当前位置: 首页 > Web前端 > HTML5

[Fes]基于canvas的前端动画-游戏入门(七)

时间:2023-04-05 22:47:57 HTML5

动量与动量守恒【科普】一般来说,物体的动量是指物体在其运动方向上保持运动的趋势.动量实际上是牛顿第一定律的推论。动量即“物体的运动量”,是物体质量与速度的乘积,是一个能反映运动效果的矢量,一般用p表示。例如,低速运动的重物与高速运动的子弹具有相同的威力。p=m*v【科普】动量是一个守恒量。动量守恒定律表示为:一个系统不受外力或外力之和为零,系统内所有物体的总动量保持不变。其推论之一是:在没有外力干预的情况下,任何系统的质心都会保持匀速直线运动或静止状态。动量守恒定律可以从机械能的对称性推导到空间平移。动量守恒是指碰撞前系统的总动量等于碰撞后系统的总动量。系统简单的理解就是对象的集合。当可以忽略碰撞以外的因素时,动量守恒。(m0*v0)+(m1*v1)=(m0*v0Final)+(m1*v1Final)这个公式是我们计算碰撞后速度的基础,因为我们假设我们的物体是刚体,忽略外力碰撞。现在我们只需要推导出最终速度v0Final和v1Final的公式,就可以应用到我们的模拟碰撞动画编程中了。推导过程如下:其实推导过程并不重要,只要记住结论即可:v1Final=(2*m0*v0)+v1*(m1-m0)/(m0+m1)v0Final=(2*m1*v1)-v0*(m0-m1)/(m0+m1)//两者可以直接转换v1Final=(v0-v1)+v0Final单轴碰撞我们还是用前面推导的公式吧,我们先从最简单的例子开始单轴碰撞的,这里演示了两个球碰撞的效果。质量定义了它们的质量。由于它们的初始速度相同,根据动量守恒,碰撞后ball0的速度变为-1/3,而ball1的速度变为5/3。【PS】这里有一个细节。球在碰撞过程中可能会重叠。这个例子只是在碰撞后将最终速度添加到球上以将它们弹开。这是一种不精确但有效的方法。完整示例:单轴碰撞/***单轴碰撞**/window.onload=function(){constcanvas=document.getElementById('canvas');constcontext=canvas.getContext('2d');constball0=newBall();constball1=newBall();//定义ball0的属性ball0.mass=2;ball0.x=50;ball0.y=canvas.height/2;ball0.vx=1;//定义ball1的属性ball1.mass=1;ball1.x=300;ball1.y=canvas.height/2;ball1.vx=-1;(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//移动两个物体的位置ball0.x+=ball0.vx;ball1.x+=ball1.vx;constdist=ball1.x-ball0.x;//碰撞检测if(Math.abs(dist)