摘要：前言解決運動和碰撞問題后，我們為了讓運動環境更加自然，需要加入一些環境因子，比如常見的重力加速度和模擬摩擦力。核心代碼如下完整示例重力加速度演示模擬摩擦力科普阻礙物體相對運動或相對運動趨勢的力叫做摩擦力。

解決運動和碰撞問題后，我們為了讓運動環境更加自然，需要加入一些環境因子，比如常見的重力加速度和模擬摩擦力。
閱讀本篇前請先打好前面的基礎。
本人能力有限，歡迎牛人共同討論，批評指正。

【科普】重力加速度是一個物體受重力作用的情況下所具有的加速度。也叫自由落體加速度，用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從運動到停止的過程，核心代碼如下，基本思路：

【科普】速度和速率是兩個不同的概念。速度是矢量，具有大小和方向；速率則純粹指物體運動的快慢，是標量，沒有方向。

將vx與vy平方后求和，再開方求出速率；通過計算Math.atan2(vy, vx)獲得角度；

從速率減去模擬摩擦力，但不要讓速率變為負數；

通過正余弦函數將和速率分解為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);
}());

彩色噴泉

往鼠標方向彈動的箭頭