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

[Fes]基于Canvas的前端动画-游戏介绍(5)

时间:2023-04-05 00:20:35 HTML5

重力加速度【科普】重力加速度是物体在重力作用下的加速度。也称为自由落体加速度,用g表示。方向是直线向下。通常是指靠近地面的物体在地球引力作用下落入真空中的加速度,记为g。为便于计算,其近似标准值通常取980cm/s的平方或9.8m/s的平方。真实的物体是有质量的,所以它的重力加速度是重力引起的,而我们电脑里的抽象物体是没有质量的,所以没有重力。我们这里所说的重力加速度只是借用了物理学的概念。其实就是一个人为定义的指向y轴正半轴加速度的方向。其实实现起来非常简单。就是设置一个正的加速度,在每次绘制的时候加上物体的y轴速度。下面的例子是一个球,它会因为重力加速度而自动下落。您可以使用键盘的上下左右键改变其四个方向的加速度。核心代码如下:完整示例:重力加速度演示vy+=ay;vy+=重力;ball.x+=vx;ball.y+=vy;ball.draw(上下文);}());模拟摩擦力【科普】阻碍物体相对运动(或相对运动趋势)的力称为摩擦力。摩擦力的方向与物体相对运动(或相对运动倾向)的方向相反。当一个物体在另一个物体表面滑动时,在接触面之间会产生阻碍它们相对运动的摩擦力,称为滑动摩擦力。滑动摩擦力的大小与接触面的粗糙度和压力的大小有关。压力越大,物体的接触面越粗糙,产生的滑动摩擦力就越大。在前面的例子中,有一些很不自然的场景,比如箭头跟着鼠标,因为加速度一直存在,所以运动永远不会停止,但是在现实中(空间除外),由于各种摩擦力的存在,这是不可能的情况。电脑里没有摩擦力,我们只是用物理学中的概念来模拟一个模拟摩擦力,请记住这不是物理意义上的力。【定义】模拟的摩擦力是人为的数值。定义类似于滑动摩擦力,与运动方向相反。物体的速度降为0,运动方向不会改变。注:根据定义,物体的速度只能减去某个值,但速度向量不能分别在x轴和y轴上减去。如果物体沿某个角度运动,就会出现物体的速度在一个轴上降为零,而在另一个轴上继续运动的奇怪现象。正确的方法是用变摩擦力来表示模拟的摩擦力。该示例将演示随机速度球从移动到停止的过程。核心代码如下。基本思想:【科普】速度和速度是两个不同的概念。速度是一个矢量,有大小和方向;速度,仅指物体运动的速度,是一个标量,没有方向。将vx和vy的平方相加,然后开平方得到速度;通过计算Math.atan2(vy,vx)得到角度;从速度中减去模拟摩擦力,但不要使速度为负;使用正余弦函数将和速度分解为x轴和y轴上的速度。完整示例:正确计算模拟摩擦力(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//先求速度letspeed=Math.sqrt(vx**2+vy**2);//计算角度constangle=Math.atan2(vy,vx);//判断运动是否停止if(speed>friction){//如果没有停止,减去模拟摩擦力speed-=friction;}else{speed=0;}//重新分解为x轴和y轴上的速度vx=Math.cos(angle)*speed;vy=Math.sin(角度)*速度;ball.x+=vx;ball.y+=vy;ball.draw(上下文);}());简单正确的方法非常麻烦。它是一个合成、分解和再合成的过程,消耗大量的计算资源。大,但我们可能不需要这么精确的方法,只要将每个方向的速度乘以0到1之间的一个数,就可以简单模拟出摩擦的效果。因此,我们定义了模拟摩擦系数。【定义】模拟的摩擦系数是一个人为的数值,它会在物体运动的过程中按比例不断降低各个方向的速度,使各个方向的速度无限接近于0。例子修改自正确的方法同上。摩擦力定义为模拟摩擦系数,为0.9。只要移动就是将x轴和y轴方向的速度乘以这个值,就减少了很多运算。核心代码如下:完整示例:模拟摩擦的正确计算注意:这里有一个细节。不断地用系数乘以速度,会导致速度无限接近但不等于0。为了避免无意义的计算,可以先判断速度是否太小,肉眼看不见的值,以提高性能。(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//确定速度以减少不必要的计算if(Math.abs(vx)>0.001){//降低速度vx*=friction;ball.x+=vx;}if(Math.abs(vy)>0.001){vy*=friction;ball.y+=vy;}ball.draw(context);}());回想一下前面的彩色喷泉示例,它带有一个朝鼠标方向弹跳的箭头