【30分钟学完】canvas动画|游戏基本(5)：重力加速度与模仿摩擦力

2024年5月24日 219次阅读 来源: calimanco

媒介

处理活动和碰撞题目后，我们为了让活动环境越发天然，须要到场一些环境因子，比方罕见的重力加速度和模仿磨擦力。
浏览本篇前请先打好前面的基本。
本人才能有限，迎接牛人配合议论，批评指正。

重力加速度

【科普】重力加速度是一个物体受重力作用的状况下所具有的加速度。也叫自由落体加速度，用g示意。方向竖直向下。一般指地面四周物体受地球引力作用在真空中着落的加速度，记为g。为了便于盘算，其近似规范值一般取为980厘米/秒的二次方或9.8米/秒的二次方。

实在的物体是有质量的，所以其重力加速度是因为重力发作，而我们盘算机中的笼统物体并没有质量，一切也不存在重力一说，我们这里说的重力加速度只是借用了物理上的观点，实际上是工资定义的一个方向指向y轴正半轴的加速度。
实在完成起来很简朴，就是设定一个为正的加速度，每次绘制都加到物体的y轴速度上。
下面的示例是一个ball，它会受重力加速度gravity而自动着落，你能够运用键盘的上、下、左、右转变其四个方向上的加速度。中心代码以下：
完全示例：重力加速度演示

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);

  vx += ax;
  vy += ay;
  vy += gravity;
  ball.x += vx;
  ball.y += vy;
  ball.draw(context);
}());

模仿磨擦力

【科普】障碍物体相对活动（或相对活动趋向）的力叫做磨擦力。磨擦力的方向与物体相对活动（或相对活动趋向）的方向相反。一个物体在另一个物体外表发作滑动时，打仗面间发作障碍它们相对活动的磨擦，称为滑动磨擦。滑动磨擦力的大小与打仗面的粗拙水平的大小和压力大小有关。压力越大，物体打仗面越粗拙，发作的滑动磨擦力就越大。

之前的例子中有一些异常不天然的场景，比方追随鼠标的箭头，因为加速度一直存在，致使活动永久不可能住手，而在实际中（太空破例），因为存在种种磨擦力的关联，这是不可能发作的状况。
盘算机中没有磨擦力，我们只是自创物理中的观点模仿一个模仿磨擦力，请记着这个并非物理意义的力。

【定义】模仿磨擦力是工资划定的值，定义和滑动磨擦力类似都与活动方向相反的量，将物体速度削减到0为止，不会转变活动方向。

注重：依据定义只能将物体的速度减去与肯定大小的值，而不能分别在x, y轴上减小速度向量。假如物体正沿着某个角度活动，就会涌现物体在某条轴的速度降为零，而继承在另一条轴上活动的新鲜征象。

准确做法

我们将模仿磨擦力用变量friction示意，示例会演示随机速度的ball从活动到住手的历程，中心代码以下，基本思路：

【科普】速度和速度是两个差别的观点。速度是矢量，具有大小和方向；速度则地道指物体活动的快慢，是标量，没有方向。

  1. 将vx与vy平方后乞降，再开方求出速度；经由过程盘算Math.atan2(vy, vx)取得角度；
  2. 从速度减去模仿磨擦力，但不要让速度变成负数；
  3. 经由过程正余弦函数将和速度剖析为x轴和y轴上的速度。

完全示例：模仿磨擦力准确盘算

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 先求速度
  let speed = Math.sqrt(vx ** 2 + vy ** 2);
  // 算出角度
  const angle = Math.atan2(vy, vx);
  // 推断活动是不是住手
  if (speed > friction) {
    // 没有住手则减去模仿磨擦力
    speed -= friction;
  } else {
    speed = 0;
  }
  // 从新剖析为x轴和y轴上的速度
  vx = Math.cos(angle) * speed;
  vy = Math.sin(angle) * speed;
  ball.x += vx;
  ball.y += vy;
  ball.draw(context);
}());

轻便做法

准确的做法非常烦琐，是个合成剖析再合成的历程，如许对盘算资本的斲丧是比较大的，但我们或许并不须要这么准确的做法，只需每次将各个方向的速度乘以一个0~1之间的数就可以简朴模仿出磨擦力的结果。因而我们定义了模仿磨擦力系数。

【定义】模仿磨擦力系数是工资划定的值，会在物体活动时不停比例削减各个方向上的速度，使各个方向的速度无穷靠近于0。

示例由上面的准确做法革新而来，friction被定义为模仿磨擦力系数，指为0.9，只需活动都将x轴和y轴方向的速度乘以这个值即可，削减了大批操纵。中心代码以下：
完全示例：模仿磨擦力准确盘算
注重：这里有一个细节，速度不停乘以系数会致使速度无穷靠近但不即是0，为了防止做无意义的盘算，能够先推断速度是不是已小到肉眼不可见的值，以进步机能。

(function drawFrame() {
  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);
}());

回忆前面的示例

    原文作者：calimanco
    原文地址: https://segmentfault.com/a/1190000014019499
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞