关于弹力球的游戏,小游戏弹力球
学了一个多星期的画布，觉得画布真的很好玩。学油画的人大概和我有一样的想法。他们是抱着写游戏的态度学习画布的。所以运动学，碰撞检测和一些简单的算法是基础。以前没玩过游戏，学起来真的很吃力。今天我们用画布写一个最简单的弹力球游戏，用最简单的重力和碰撞检测。
转到演示：弹力球演示(点击画布中的空白区域会给球一个新的速度)
[创建一个小球对象]
第一步是创建一个球对象，编写球的构造函数：复制代码如下：
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；这个半径=r；
this.color=color
}
球的属性很简单。xy是球的坐标，vx和vy是球的初始水平和垂直速度。Radius是球的半径，color是球的颜色(区分不同的球)，oldx和oldy是球的前一帧的位置，用于后期球碰撞后的位置修正(后者其实没用，直接计算位置修正。如果用oldx来设置的话，不严谨，但是记录的话必然会用到)。
球属性写好之后，在球原型中写球的动作：复制代码如下：
球.原型={
paint:function(){
CTX . save()；
CTX . begin path()；
ctx.arc(this.x，this.y，this.radius，0，Math。PI * 2)；
CTX . fill style=this . color；
CTX . fill()；
CTX . restore()；
this.moving=false
},
运行：函数(t){
如果(！this.candrod) {
this . paint()；
return }；
this . oldx=this . x；
this . oldy=this . y；/pp
if(Math.abs(this.vx) 0.01){
this . VX=0；
}
else this.vx=this.vx0？-莫卡里*t:莫卡里* t；/PP this . vy=this . vy g * t；
this . x=t * this . VX * pxpm；
this . y=t * this . vy * pxpm；/PP if(this . y canvas . height-ball radius this . y ball radius){
this.y=this.y球半径？ball radius:(canvas . height-ball radius)；
this . vy=-this . vy * collag
}
if(this . x canvas . width-ball radius this . x ball radius){
this.x=this.x ballRadius？ball radius:(canvas . width-ball radius)；
this.derectionX=！this.derectionX
this . VX=-this . VX * collag；
}
this . paint()；
}，/pp }
只有两种移动球的方法。第一种方法是自己画，第二种方法是控制球的移动。t是当前帧和前一帧之间的时间差。用来计算球的速度增量得到球的位移增量，然后计算球的新位置，重画球。当获得新位置时，判断球的新位置是否已经过墙，如果是，则进行速度修正，使球弹起。
第二种方法中的一些常数是ballradius=30，g=9.8，mocali=0.5，balls=[]，collarg=0.8，pxpm=canvas.width/20;含义很明显：ballradius是球的半径，G是重力加速度，mocali是空气阻力引起的水平方向的减速度，balls是存放小球对象的数组，collag是弹性系数。Pxpm是像素和米之间的映射。把画布想象成20米宽的区域。
[碰撞检测]
球对象创建后，就该写碰撞了，球与球之间的碰撞：复制代码如下：
函数冲突(){
for(var I=0；iballs.lengthi ){
for(var j=0；jballs.lengthj ){
var b1=balls[i]，B2=balls[j]；
如果(b1！==b2){
var RC=数学。sqrt(数学。pow(B1。x B2。x，2) Math.pow(b1.y - b2.y，2))；
如果(数学。天花板(钢筋混凝土)(B1。半径B2。radius)){/PP//获得碰撞后速度的增量
var ax=((B1。VX-B2。VX)*数学。pow((B1。x B2。x)，2)(B1)。维-B2。vy)*(B1。x B2。x)*(B1。B2。y))/数学。功率(RC，2)
var ay=((B1。维-B2。vy)*数学。pow((B1。B2。y)，2)(B1)。VX-B2。VX)*(B1。x B2。x)(B1)。B2。y))/数学。pow(RC，2)/pp //给与小球新的速度
B1。VX=(B1。VX-ax)* collag；
B1。vy=(B1。vy-ay)* collag；
B2。VX=(B2。VX ax)* collag；
B2。vy=(B2。vy ay)* collag；/pp //获取两球斜切位置并且强制扭转
var clength=((b1。半径b2。半径)-RC)/2；
var CX=c长度*(B1。x B2。x)/RC；
var cy=c长度*(B1。B2。y)/RC；
B1。x=B1。x CX；
B1。y=B1。y cy
B2。x=B2。x-CX；
B2。y=B2。y-cy；
}
}
}
}
}/pp
每一帧都进行小球之间碰撞的判断，如果两个小球球心距离小于两球半径之和，则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量斧头。和赞成票就是速度变化量。
后面长长的公式就是这个：具体原理我就不说了，想了解原理就直接戳小球碰撞的算法设计。下面那段就是防止小球重复碰撞检测导致无法正常反弹，所以计算两小球的球心距离，然后算出两个小球的斜切位置，并且将两个小球的位置进行更正。
【运动动画】
最后一步：复制代码代码如下：/PP帆布。onclick=函数(事件){
event=event window.event
var x=事件。clientx文档。身体。向左滚动文档。文档元素。向左滚动-画布。向左偏移；
变量y=事件。客户文件。身体。滚动顶部文档。文档元素。滚动顶部-画布。offsettop/pp balls.forEach(function(){
这个。VX=(x-this。x)/20；//初速度米/秒
这个。vy=(y-this。y)/20；
});
}/pp /pp函数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)/PP var t1=new Date()；
var t=(t1-t0)/1000；
碰撞();
balls.forEach(function(){
这个。运行(t)；
});
t0=t1/pp if(窗口中的" requestAnimationFrame"){
requestAnimationFrame(animate)；
}
else if(窗口中的" webkitRequestAnimationFrame "){
webkitRequestAnimationFrame(animate)；
}
else if(窗口中的" msRequestAnimationFrame "){
msRequestAnimationFrame(animate)；
}
else if(窗口中的" mozRequestAnimationFrame "){
mozRequestAnimationFrame(animate)；
}
}
}/pp
点击画布的位置给出球的初速度，然后animate就是运行动画每一帧的方法。高于ctx.fillstyle= rgba (255，255，255，0.2)；CTX.fillrect (0，0，canvas.width，canvas.height)是给球添加虚拟阴影。我觉得会好看一点。不喜欢就用clearRect清除。然后计算每一帧的时间差，然后在球数组中遍历并重绘球数组。然后加入碰撞检测方法。动画完成了。
至此，已经完成，源地址：
https://github . com/whx axes/canvas-test/blob/GH-pages/src/Other-demo/shot ball . html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。