摘要：前言解決運(yùn)動(dòng)和碰撞問題后，我們?yōu)榱俗屵\(yùn)動(dòng)環(huán)境更加自然，需要加入一些環(huán)境因子，比如常見的重力加速度和模擬摩擦力。核心代碼如下完整示例重力加速度演示模擬摩擦力科普阻礙物體相對(duì)運(yùn)動(dòng)或相對(duì)運(yùn)動(dòng)趨勢(shì)的力叫做摩擦力。

解決運(yùn)動(dòng)和碰撞問題后，我們?yōu)榱俗屵\(yùn)動(dòng)環(huán)境更加自然，需要加入一些環(huán)境因子，比如常見的重力加速度和模擬摩擦力。
閱讀本篇前請(qǐng)先打好前面的基礎(chǔ)。
本人能力有限，歡迎牛人共同討論，批評(píng)指正。

【科普】重力加速度是一個(gè)物體受重力作用的情況下所具有的加速度。也叫自由落體加速度，用g表示。方向豎直向下。通常指地面附近物體受地球引力作用在真空中下落的加速度，記為g。為了便于計(jì)算，其近似標(biāo)準(zhǔn)值通常取為980厘米/秒的二次方或9.8米/秒的二次方。

真實(shí)的物體是有質(zhì)量的，所以其重力加速度是由于重力產(chǎn)生，而我們計(jì)算機(jī)中的抽象物體并沒有質(zhì)量，所有也不存在重力一說，我們這里說的重力加速度只是借用了物理上的概念，實(shí)際上是人為定義的一個(gè)方向指向y軸正半軸的加速度。
其實(shí)實(shí)現(xiàn)起來很簡(jiǎn)單，就是設(shè)定一個(gè)為正的加速度，每次繪制都加到物體的y軸速度上。
下面的示例是一個(gè)ball，它會(huì)受重力加速度gravity而自動(dòng)下落，你可以使用鍵盤的上、下、左、右改變其四個(gè)方向上的加速度。核心代碼如下：
完整示例：重力加速度演示

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

【科普】阻礙物體相對(duì)運(yùn)動(dòng)（或相對(duì)運(yùn)動(dòng)趨勢(shì)）的力叫做摩擦力。摩擦力的方向與物體相對(duì)運(yùn)動(dòng)（或相對(duì)運(yùn)動(dòng)趨勢(shì)）的方向相反。一個(gè)物體在另一個(gè)物體表面發(fā)生滑動(dòng)時(shí)，接觸面間產(chǎn)生阻礙它們相對(duì)運(yùn)動(dòng)的摩擦，稱為滑動(dòng)摩擦?；瑒?dòng)摩擦力的大小與接觸面的粗糙程度的大小和壓力大小有關(guān)。壓力越大，物體接觸面越粗糙，產(chǎn)生的滑動(dòng)摩擦力就越大。

之前的例子中有一些非常不自然的場(chǎng)景，比如跟隨鼠標(biāo)的箭頭，由于加速度始終存在，導(dǎo)致運(yùn)動(dòng)永遠(yuǎn)不可能停止，而在現(xiàn)實(shí)中（太空例外），由于存在各種摩擦力的關(guān)系，這是不可能發(fā)生的情況。
計(jì)算機(jī)中沒有摩擦力，我們只是借鑒物理中的概念模擬一個(gè)模擬摩擦力，請(qǐng)記住這個(gè)并不是物理意義的力。

【定義】模擬摩擦力是人為規(guī)定的值，定義和滑動(dòng)摩擦力相似都與運(yùn)動(dòng)方向相反的量，將物體速度削減到0為止，不會(huì)改變運(yùn)動(dòng)方向。

注意：根據(jù)定義只能將物體的速率減去與一定大小的值，而不能分別在x, y軸上減小速度向量。如果物體正沿著某個(gè)角度運(yùn)動(dòng)，就會(huì)出現(xiàn)物體在某條軸的速度降為零，而繼續(xù)在另一條軸上運(yùn)動(dòng)的奇怪現(xiàn)象。

我們將模擬摩擦力用變量friction表示，示例會(huì)演示隨機(jī)速度的ball從運(yùn)動(dòng)到停止的過程，核心代碼如下，基本思路：

【科普】速度和速率是兩個(gè)不同的概念。速度是矢量，具有大小和方向；速率則純粹指物體運(yùn)動(dòng)的快慢，是標(biāo)量，沒有方向。

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

從速率減去模擬摩擦力，但不要讓速率變?yōu)樨?fù)數(shù)；

通過正余弦函數(shù)將和速率分解為x軸和y軸上的速度。

完整示例：模擬摩擦力正確計(jì)算

(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);
  // 判斷運(yùn)動(dòng)是否停止
  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);
}());

正確的做法十分繁瑣，是個(gè)合成分解再合成的過程，這樣對(duì)計(jì)算資源的消耗是比較大的，但我們也許并不需要這么精確的做法，只要每次將各個(gè)方向的速度乘以一個(gè)0~1之間的數(shù)就能簡(jiǎn)單模擬出摩擦力的效果。因此我們定義了模擬摩擦力系數(shù)。

【定義】模擬摩擦力系數(shù)是人為規(guī)定的值，會(huì)在物體運(yùn)動(dòng)時(shí)不斷比例減少各個(gè)方向上的速度，使各個(gè)方向的速度無限接近于0。

示例由上面的正確做法改造而來，friction被定義為模擬摩擦力系數(shù)，指為0.9，只要運(yùn)動(dòng)都將x軸和y軸方向的速度乘以這個(gè)值即可，減少了大量操作。核心代碼如下：
完整示例：模擬摩擦力正確計(jì)算
注意：這里有一個(gè)細(xì)節(jié)，速度不斷乘以系數(shù)會(huì)導(dǎo)致速度無限接近但不等于0，為了避免做無意義的計(jì)算，可以先判斷速度是否已經(jīng)小到肉眼不可見的值，以提高性能。

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 判斷速度大小以減少不必要的計(jì)算
  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);
}());

彩色噴泉

往鼠標(biāo)方向彈動(dòng)的箭頭