分享更有价值
被信任是一种快乐

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

文章页正文上

这篇文章主要介绍“如何用HTML5制作一个简单的弹力球游戏”,在日常操作中,相信很多人在如何用HTML5制作一个简单的弹力球游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用HTML5制作一个简单的弹力球游戏”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
  【创建小球对象】
  第一步就是先创建一个小球对象,写好小球的构造函数:
复制代码
代码如下:
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;
if(Math.abs(this.vx)

this.vx = 0;
}
else this.vx += this.vx>0? -mocali*t : mocali*t; this.vy = this.vy + g * t;
this.x += t * this.vx * pxpm;
this.y += t * this.vy * pxpm; if(this.y > canvas.height – ballRadius || this.y

this.y = this.y

this.vy = -this.vy*collarg
}
if(this.x > canvas.width – ballRadius || this.x

this.x = this.x

this.derectionX = !this.derectionX;
this.vx = -this.vx*collarg;
}
this.paint();
}, }
  小球的动作方法也很简单,就两个,第一个方法是把自己画出来,第二个方法就是控制小球的运动。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

for(var j=0;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)

//获得碰撞后速度的增量

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)

//给与小球新的速度

b1.vx = (b1.vx-ax)*collarg;

b1.vy = (b1.vy-ay)*collarg;

b2.vx = (b2.vx+ax)*collarg;

b2.vy = (b2.vy+ay)*collarg;

//获取两球斜切位置并且强制扭转

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;

}

}

}

}

}

  每一帧都进行小球之间碰撞的判断,如果两个小球球心距离小于两球半径之和,则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量。ax和ay就是速度变化量。 

后面长长的公式就是这个:

2015512173816364.png (334192)

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

  【运动动画】

  最后一步:

复制代码

代码如下:

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;

balls.forEach(function(){

this.vx = (x – this.x)/20; //初速度 m/s

this.vy = (y – this.y)/20;

});

}

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)

var t1 = new Date();

var t = (t1 – t0)/1000;

collision();

balls.forEach(function(){

this.run(t);

});

t0 = t1;

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);

}

}

}

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

到此,关于“如何用HTML5制作一个简单的弹力球游戏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!


for(var j=0;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)

//获得碰撞后速度的增量

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)

//给与小球新的速度

b1.vx = (b1.vx-ax)*collarg;

b1.vy = (b1.vy-ay)*collarg;

b2.vx = (b2.vx+ax)*collarg;

b2.vy = (b2.vy+ay)*collarg;

//获取两球斜切位置并且强制扭转

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;

}

}

}

}

}

  每一帧都进行小球之间碰撞的判断,如果两个小球球心距离小于两球半径之和,则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量。ax和ay就是速度变化量。 

后面长长的公式就是这个:

2015512173816364.png (334192)

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

  【运动动画】

  最后一步:

复制代码

代码如下:

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;

balls.forEach(function(){

this.vx = (x – this.x)/20; //初速度 m/s

this.vy = (y – this.y)/20;

});

}

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)

var t1 = new Date();

var t = (t1 – t0)/1000;

collision();

balls.forEach(function(){

this.run(t);

});

t0 = t1;

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);

}

}

}

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

到此,关于“如何用HTML5制作一个简单的弹力球游戏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!


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) //获得碰撞后速度的增量
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) //给与小球新的速度
b1.vx = (b1.vx-ax)*collarg;
b1.vy = (b1.vy-ay)*collarg;
b2.vx = (b2.vx+ax)*collarg;
b2.vy = (b2.vy+ay)*collarg; //获取两球斜切位置并且强制扭转
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;
}
}
}
}
}
  每一帧都进行小球之间碰撞的判断,如果两个小球球心距离小于两球半径之和,则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量。ax和ay就是速度变化量。 
后面长长的公式就是这个:
2015512173816364.png (334192)
具体原理我就不说了,想了解原理就直接戳 小球碰撞的算法设计 。 下面那段就是防止小球重复碰撞检测导致无法正常反弹,所以计算两小球的球心距离,然后算出两个小球的斜切位置,并且将两个小球的位置进行更正。
  【运动动画】
  最后一步:
复制代码
代码如下:
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; balls.forEach(function(){
this.vx = (x – this.x)/20; //初速度 m/s
this.vy = (y – this.y)/20;
});
} 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) var t1 = new Date();
var t = (t1 – t0)/1000;
collision();
balls.forEach(function(){
this.run(t);
});
t0 = t1; 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);
}
}
}
通过点击画布的位置来给于小球初速度,然后animate就是动画的每一帧运行的方法。上面的 ctx.fillStyle = “免费云主机、域名rgba(255,255,255,0.2)”; ctx.fillRect(0,0,canvas.width,canvas.height)是给小球添加虚影,我觉得这样会更好看,如果觉得不喜欢,就直接用clearRect清除就行了。然后就是计算每一帧的时间差,然后对小球数组里小球数组进行遍历重绘。然后再加入碰撞检测的collision方法。动画也就做完了。到此,关于“如何用HTML5制作一个简单的弹力球游戏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: jquery如何转换字符串编码

本文小编为大家详细介绍“jquery如何转换字符串编码”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何转换字符串编码”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 第一步:查看原始字符串编码格式在进行字符串编码转换之…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册