用HTML5制作一个简单的弹力球游戏


Posted in HTML / CSS onMay 12, 2015

学canvas学了有一个多礼拜了,觉得canvas真心好玩。学canvas的人想法估计都跟我差不多,抱着写游戏的态度去学canvas的。所以运动学啊、碰撞检测啊、一些简单的算法神马的是基础啊。以前没做过游戏的我学起来还真心吃力。今天就来说下用canvas写个最简单的弹力球游戏,就运用了最简单的重力作用以及碰撞检测。

先上DEMO:弹力球DEMO (鼠标点击canvas里的空白区域会给与小球新速度)

【创建小球对象】

第一步就是先创建一个小球对象,写好小球的构造函数:

复制代码
代码如下:

var Ball = function(x , y , r , color){
this.x = x;
this.y = y;
this.oldx = x;
this.oldy = y;
this.vx = 0;
this.vy = 0;this.radius = r;
this.color = color;
}

 

小球属性很简单,xy是小球的坐标,vx和vy是小球的初始水平速度和初始垂直速度。radius就是小球的半径,color是小球颜色(为了区分不同球),oldx和oldy是记录小球的上一帧的位置,后期球与球之间碰撞后用于位置修正(后面其实没用上,位置修正直接计算了,如果用oldx来设置很不严谨,不过记录一下,难免会用得到)。

小球属性写好后,就在小球原型中写小球的动作了:

复制代码
代码如下:

Ball.prototype = {
paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x , this.y , this.radius , 0 , Math.PI*2);
ctx.fillStyle=this.color;
ctx.fill();
ctx.restore();
this.moving = false;
},
run:function(t){
if(!this.candrod) {
this.paint();
return};
this.oldx = this.x;
this.oldy = this.y;</p> <p>
if(Math.abs(this.vx) < 0.01){
this.vx = 0;
}
else this.vx += this.vx>0? -mocali*t : mocali*t;</p> <p> this.vy = this.vy + g * t;

this.x += t * this.vx * pxpm;
this.y += t * this.vy * pxpm;</p> <p> if(this.y > canvas.height - ballRadius || this.y < ballRadius){
this.y = this.y < ballRadius ? ballRadius : (canvas.height - ballRadius);
this.vy = -this.vy*collarg
}
if(this.x > canvas.width - ballRadius || this.x < ballRadius){
this.x = this.x < ballRadius ? ballRadius : (canvas.width - ballRadius);
this.derectionX = !this.derectionX;
this.vx = -this.vx*collarg;
}
this.paint();
},</p> <p> }

小球的动作方法也很简单,就两个,第一个方法是把自己画出来,第二个方法就是控制小球的运动。t是当前帧与上一帧的时间差。用于计算小球的速度的增量从而得出小球的位移增量,从而计算出小球的新位置并且将小球重绘。得出新位置的同时判断小球的新位置有无超出墙壁,如果超出则进行速度修正让小球反弹。

第二个方法里的一些常量ballRadius =30, g = 9.8 , mocali = 0.5,balls = [],collarg = 0.8,pxpm = canvas.width/20; 意思很明显:ballradius是球半径,g是重力加速度,mocali是空气阻力引起的水平方向的减速度,balls是一个用于存放小球对象的数组,collarg是弹力系数。pxpm是像素与米之间的映射,把画布当成是20米宽的区域。

【碰撞检测】

创建好小球对象后,就开始写碰撞了,小球与小球之间的碰撞:

复制代码
代码如下:

function collision(){
for(var i=0;i<balls.length;i++){
for(var j=0;j<balls.length;j++){
var b1 = balls[i],b2 = balls[j];
if(b1 !== b2){
var rc = Math.sqrt(Math.pow(b1.x - b2.x , 2) + Math.pow(b1.y - b2.y , 2));
if(Math.ceil(rc) < (b1.radius + b2.radius)){</p> <p> //获得碰撞后速度的增量
var ax = ((b1.vx - b2.vx)*Math.pow((b1.x - b2.x) , 2) + (b1.vy - b2.vy)*(b1.x - b2.x)*(b1.y - b2.y))/Math.pow(rc , 2)
var ay = ((b1.vy - b2.vy)*Math.pow((b1.y - b2.y) , 2) + (b1.vx - b2.vx)*(b1.x - b2.x)+(b1.y - b2.y))/Math.pow(rc , 2)</p> <p> //给与小球新的速度
b1.vx = (b1.vx-ax)*collarg;
b1.vy = (b1.vy-ay)*collarg;
b2.vx = (b2.vx+ax)*collarg;
b2.vy = (b2.vy+ay)*collarg;</p> <p> //获取两球斜切位置并且强制扭转
var clength = ((b1.radius+b2.radius)-rc)/2;
var cx = clength * (b1.x-b2.x)/rc;
var cy = clength * (b1.y-b2.y)/rc;
b1.x = b1.x+cx;
b1.y = b1.y+cy;
b2.x = b2.x-cx;
b2.y = b2.y-cy;
}
}
}
}
}</p> <p>

每一帧都进行小球之间碰撞的判断,如果两个小球球心距离小于两球半径之和,则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量。ax和ay就是速度变化量。 
后面长长的公式就是这个:
用HTML5制作一个简单的弹力球游戏

具体原理我就不说了,想了解原理就直接戳 小球碰撞的算法设计 。 下面那段就是防止小球重复碰撞检测导致无法正常反弹,所以计算两小球的球心距离,然后算出两个小球的斜切位置,并且将两个小球的位置进行更正。

【运动动画】

最后一步:

复制代码
代码如下:
</p> <p>canvas.onclick = function(event){
event = event || window.event;
var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;
var y= event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;</p> <p> balls.forEach(function(){
this.vx = (x - this.x)/20; //初速度 m/s
this.vy = (y - this.y)/20;
});
}</p> <p> </p> <p> function animate(){
ctx.save();
ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(0,0,canvas.width,canvas.height)
ctx.restore();
// ctx.clearRect(0,0,canvas.width,canvas.height)</p> <p> var t1 = new Date();
var t = (t1 - t0)/1000;
collision();
balls.forEach(function(){
this.run(t);
});

t0 = t1;</p> <p> if("requestAnimationFrame" in window){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
}
}</p> <p>

 

通过点击画布的位置来给于小球初速度,然后animate就是动画的每一帧运行的方法。上面的 ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height)是给小球添加虚影,我觉得这样会更好看,如果觉得不喜欢,就直接用clearRect清除就行了。然后就是计算每一帧的时间差,然后对小球数组里小球数组进行遍历重绘。然后再加入碰撞检测的collision方法。动画也就做完了。

至此,就已经写完了,源码地址:

https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Other-demo/shotBall.html

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 #HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 #HTML / CSS
用HTML5制作烟火效果的教程
May 12 #HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 #HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 #HTML / CSS
用HTML5制作数字时钟的教程
May 11 #HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 #HTML / CSS
You might like
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
JS+CSS实现动态时钟
2021/02/19 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python发展史及网络爬虫
2019/06/19 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
新护士岗前培训制度
2014/02/02 职场文书
租房协议书范本
2014/04/09 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
个人年终总结结尾
2015/03/06 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫