下面的 CSS 使表格看起來像我們想要的背景：

.background    { background: rgb(52, 166, 251);
                 table-layout: fixed;
                 border-spacing: 0;              }
.background td { padding: 0;                     }
.lava          { background: rgb(255, 100, 100); }
.wall          { background: white;              }

其中某些屬性（border-spacing和padding）用于取消一些我們不想保留的表格默認行為。我們不希望在單元格之間或單元格內部填充多余的空白。

其中background規則用于設置背景顏色。CSS中可以使用兩種方式來指定顏色，一種方法是使用單詞（white），另一種方法是使用形如rgb(R,G,B)的格式，其中R表示顏色中的紅色成分，G表示綠色成分，B表示藍色成分，每個數字范圍均為 0 到 255。因此在rgb(52,166,251)中，紅色成分為 52，綠色為 166，而藍色是 251。由于藍色成分數值最大，因此最后的顏色會偏向藍色。而你可以看到.lava規則中，第一個數字（紅色）是最大的。

我們繪制每個角色時需要創建其對應的 DOM 元素，并根據角色屬性來設置元素坐標與尺寸。這些值都需要與scale相乘，以將游戲中的尺寸單位轉換為像素。

function drawActors(actors) {
  return elt("div", {}, ...actors.map(actor => {
    let rect = elt("div", {class: `actor ${actor.type}`});
    rect.style.width = `${actor.size.x * scale}px`;
    rect.style.height = `${actor.size.y * scale}px`;
    rect.style.left = `${actor.pos.x * scale}px`;
    rect.style.top = `${actor.pos.y * scale}px`;
    return rect;
  }));
}

為了賦予一個元素多個類別，我們使用空格來分隔類名。在下面展示的 CSS 代碼中，actor類會賦予角色一個絕對坐標。我們將角色的類型名稱作為額外的 CSS 類來設置這些元素的顏色。我們并沒有再次定義lava類，因為我們可以直接復用前文為巖漿單元格定義的規則。

.actor  { position: absolute;            }
.coin   { background: rgb(241, 229, 89); }
.player { background: rgb(64, 64, 64);   }

setState方法用于使顯示器顯示給定的狀態。它首先刪除舊角色的圖形，如果有的話，然后在他們的新位置上重新繪制角色。試圖將 DOM 元素重用于角色，可能很吸引人，但是為了使它有效，我們需要大量的附加記錄，來關聯角色和 DOM 元素，并確保在角色消失時刪除元素。因為游戲中通常只有少數角色，重新繪制它們開銷并不大。

DOMDisplay.prototype.setState = function(state) {
  if (this.actorLayer) this.actorLayer.remove();
  this.actorLayer = drawActors(state.actors);
  this.dom.appendChild(this.actorLayer);
  this.dom.className = `game ${state.status}`;
  this.scrollPlayerIntoView(state);
};

我們可以將關卡的當前狀態作為類名添加到包裝器中，這樣可以根據游戲勝負與否來改變玩家角色的樣式。我們只需要添加 CSS 規則，指定祖先節點包含特定類的player元素的樣式即可。

.lost .player {
  background: rgb(160, 64, 64);
}
.won .player {
  box-shadow: -4px -7px 8px white, 4px -7px 8px white;
}

在遇到巖漿之后，玩家的顏色應該變成深紅色，暗示著角色被燒焦了。當玩家收集完最后一枚硬幣時，我們添加兩個模糊的白色陰影來創建白色的光環效果，其中一個在左上角，一個在右上角。

我們無法假定關卡總是符合視口尺寸，它是我們在其中繪制游戲的元素。所以我們需要調用scrollPlayerIntoView來確保如果關卡在視口范圍之外，我們可以滾動視口，確保玩家靠近視口的中央位置。下面的 CSS 樣式為包裝器的DOM元素設置了一個最大尺寸，以確保任何超出視口的元素都是不可見的。我們可以將外部元素的position設置為relative，因此該元素中的角色總是相對于關卡的左上角進行定位。

.game {
  overflow: hidden;
  max-width: 600px;
  max-height: 450px;
  position: relative;
}

在scrollPlayerIntoView方法中，我們找出玩家的位置并更新其包裝器元素的滾動坐標。我們可以通過操作元素的scrollLeft和scrollTop屬性，當玩家接近視口邊界時修改滾動坐標。

DOMDisplay.prototype.scrollPlayerIntoView = function(state) {
  let width = this.dom.clientWidth;
  let height = this.dom.clientHeight;
  let margin = width / 3;

  // The viewport
  let left = this.dom.scrollLeft, right = left + width;
  let top = this.dom.scrollTop, bottom = top + height;

  let player = state.player;
  let center = player.pos.plus(player.size.times(0.5))
                         .times(scale);

  if (center.x < left + margin) {
    this.dom.scrollLeft = center.x - margin;
  } else if (center.x > right - margin) {
    this.dom.scrollLeft = center.x + margin - width;
  }
  if (center.y < top + margin) {
    this.dom.scrollTop = center.y - margin;
  } else if (center.y > bottom - margin) {
    this.dom.scrollTop = center.y + margin - height;
  }
};

找出玩家中心位置的代碼展示了，我們如何使用Vec類型來寫出相對可讀的計算代碼。為了找出玩家的中心位置，我們需要將左上角位置坐標加上其尺寸的一半。計算結果就是關卡坐標的中心位置。但是我們需要將結果向量乘以顯示比例，以將坐標轉換成像素級坐標。

接下來，我們對玩家的坐標進行一系列檢測，確保其位置不會超出合法范圍。這里需要注意的是這段代碼有時候依然會設置無意義的滾動坐標，比如小于 0 的值或超出元素滾動區域的值。這是沒問題的。DOM 會將其修改為可接受的值。如果我們將scrollLeft設置為–10，DOM 會將其修改為 0。

最簡單的做法是每次重繪時都滾動視口，確保玩家總是在視口中央。但這種做法會導致畫面劇烈晃動，當你跳躍時，視圖會不斷上下移動。比較合理的做法是在屏幕中央設置一個“中央區域”，玩家在這個區域內部移動時我們不會滾動視口。

我們現在能夠顯示小型關卡。

我們可以在link標簽中使用rel="stylesheet"，將一個 CSS 文件加載到頁面中。文件game.css包含了我們的游戲所需的樣式。

現在我們是時候來添加一些動作了。這是游戲中最令人著迷的一部分。實現動作的最基本的方案（也是大多數游戲采用的）是將時間劃分為一個個時間段，根據角色的每一步速度和時間長度，將元素移動一段距離。我們將以秒為單位測量時間，所以速度以單元每秒來表示。

移動東西非常簡單。比較困難的一部分是處理元素之間的相互作用。當玩家撞到墻壁或者地板時，不可能簡單地直接穿越過去。游戲必須注意特定的動作會導致兩個對象產生碰撞，并需要采取相應措施。如果玩家遇到墻壁，則必須停下來，如果遇到硬幣則必須將其收集起來。

想要解決通常情況下的碰撞問題是件艱巨任務。你可以找到一些我們稱之為物理引擎的庫，這些庫會在二維或三維空間中模擬物理對象的相互作用。我們在本章中采用更合適的方案：只處理矩形物體之間的碰撞，并采用最簡單的方案進行處理。

在移動角色或巖漿塊時，我們需要測試元素是否會移動到墻里面。如果會的話，我們只要取消整個動作即可。而對動作的反應則取決于移動元素類型。如果是玩家則停下來，如果是巖漿塊則反彈回去。

這種方法需要保證每一步之間的時間間隔足夠短，確保能夠在對象實際碰撞之前取消動作。如果時間間隔太大，玩家最后會懸浮在離地面很高的地方。另一種方法明顯更好但更加復雜，即尋找到精確的碰撞點并將元素移動到那個位置。我們會采取最簡單的方案，并確保減少動畫之間的時間間隔，以掩蓋其問題。

該方法用于判斷某個矩形（通過位置與尺寸限定）是否會碰到給定類型的網格。

Level.prototype.touches = function(pos, size, type) {
  var xStart = Math.floor(pos.x);
  var xEnd = Math.ceil(pos.x + size.x);
  var yStart = Math.floor(pos.y);
  var yEnd = Math.ceil(pos.y + size.y);

  for (var y = yStart; y < yEnd; y++) {
    for (var x = xStart; x < xEnd; x++) {
      let isOutside = x < 0 || x >= this.width ||
                      y < 0 || y >= this.height;
      let here = isOutside ? "wall" : this.rows[y][x];
      if (here == type) return true;
    }
  }
  return false;
};

該方法通過對坐標使用Math.floor和Math.ceil，來計算與身體重疊的網格方塊集合。記住網格方塊的大小是1x1個單位。通過將盒子的邊上下顛倒，我們得到盒子接觸的背景方塊的范圍。

我們通過查找坐標遍歷網格方塊，并在找到匹配的方塊時返回true。關卡之外的方塊總是被當作"wall"，來確保玩家不能離開這個世界，并且我們不會意外地嘗試，在我們的“rows數組的邊界之外讀取。

狀態的update方法使用touches來判斷玩家是否接觸巖漿。

State.prototype.update = function(time, keys) {
  let actors = this.actors
    .map(actor => actor.update(time, this, keys));
  let newState = new State(this.level, actors, this.status);
  if (newState.status != "playing") return newState;
  let player = newState.player;
  if (this.level.touches(player.pos, player.size, "lava")) {
    return new State(this.level, actors, "lost");
  }
  for (let actor of actors) {
    if (actor != player && overlap(actor, player)) {
      newState = actor.collide(newState);
    }
  }
  return newState;
};

它接受時間步長和一個數據結構，告訴它按下了哪些鍵。它所做的第一件事是調用所有角色的update方法，生成一組更新后的角色。角色也得到時間步長，按鍵，和狀態，以便他們可以根據這些來更新。只有玩家才會讀取按鍵，因為這是唯一由鍵盤控制的角色。

如果游戲已經結束，就不需要再做任何處理（游戲不能在輸之后贏，反之亦然）。否則，該方法測試玩家是否接觸背景巖漿。如果是這樣的話，游戲就輸了，我們就完了。最后，如果游戲實際上還在繼續，它會查看其他玩家是否與玩家重疊。

overlap函數檢測角色之間的重疊。它需要兩個角色對象，當它們觸碰時返回true，當它們沿X軸和Y軸重疊時，就是這種情況。

function overlap(actor1, actor2) {
  return actor1.pos.x + actor1.size.x > actor2.pos.x &&
         actor1.pos.x < actor2.pos.x + actor2.size.x &&
         actor1.pos.y + actor1.size.y > actor2.pos.y &&
         actor1.pos.y < actor2.pos.y + actor2.size.y;
}

如果任何角色重疊了，它的collide方法有機會更新狀態。觸碰巖漿角色將游戲狀態設置為"lost"，當你碰到硬幣時，硬幣就會消失，當這是最后一枚硬幣時，狀態就變成了"won"。

Lava.prototype.collide = function(state) {
  return new State(state.level, state.actors, "lost");
};

Coin.prototype.collide = function(state) {
  let filtered = state.actors.filter(a => a != this);
  let status = state.status;
  if (!filtered.some(a => a.type == "coin")) status = "won";
  return new State(state.level, filtered, status);
};

角色對象的update方法接受時間步長、狀態對象和keys對象作為參數。Lava角色類型忽略keys對象。

Lava.prototype.update = function(time, state) {
  let newPos = this.pos.plus(this.speed.times(time));
  if (!state.level.touches(newPos, this.size, "wall")) {
    return new Lava(newPos, this.speed, this.reset);
  } else if (this.reset) {
    return new Lava(this.reset, this.speed, this.reset);
  } else {
    return new Lava(this.pos, this.speed.times(-1));
  }
};

它通過將時間步長乘上當前速度，并將其加到其舊位置，來計算新的位置。如果新的位置上沒有障礙，它移動到那里。如果有障礙物，其行為取決于巖漿塊的類型：滴落巖漿具有reset位置，當它碰到某物時，它會跳回去。跳躍巖漿將其速度乘以-1，從而開始向相反的方向移動。

硬幣使用它們的act方法來晃動。他們忽略了網格的碰撞，因為它們只是在它們自己的方塊內部晃動。

const wobbleSpeed = 8, wobbleDist = 0.07;

Coin.prototype.update = function(time) {
  let wobble = this.wobble + time * wobbleSpeed;
  let wobblePos = Math.sin(wobble) * wobbleDist;
  return new Coin(this.basePos.plus(new Vec(0, wobblePos)),
                  this.basePos, wobble);
};

遞增wobble屬性來跟蹤時間，然后用作Math.sin的參數，來找到波上的新位置。然后，根據其基本位置和基于波的偏移，計算硬幣的當前位置。

還剩下玩家本身。玩家的運動對于每和軸多帶帶處理，因為碰到地板不應阻止水平運動，碰到墻壁不應停止下降或跳躍運動。

const playerXSpeed = 7;
const gravity = 30;
const jumpSpeed = 17;

Player.prototype.update = function(time, state, keys) {
  let xSpeed = 0;
  if (keys.ArrowLeft) xSpeed -= playerXSpeed;
  if (keys.ArrowRight) xSpeed += playerXSpeed;
  let pos = this.pos;
  let movedX = pos.plus(new Vec(xSpeed * time, 0));
  if (!state.level.touches(movedX, this.size, "wall")) {
    pos = movedX;
  }

  let ySpeed = this.speed.y + time * gravity;
  let movedY = pos.plus(new Vec(0, ySpeed * time));
  if (!state.level.touches(movedY, this.size, "wall")) {
    pos = movedY;
  } else if (keys.ArrowUp && ySpeed > 0) {
    ySpeed = -jumpSpeed;
  } else {
    ySpeed = 0;
   }
  return new Player(pos, new Vec(xSpeed, ySpeed));
};

水平運動根據左右箭頭鍵的狀態計算。當沒有墻壁阻擋由這個運動產生的新位置時，就使用它。否則，保留舊位置。

垂直運動的原理類似，但必須模擬跳躍和重力。玩家的垂直速度（ySpeed）首先考慮重力而加速。

我們再次檢查墻壁。如果我們不碰到任何一個，使用新的位置。如果存在一面墻，就有兩種可能的結果。當按下向上的箭頭，并且我們向下移動時（意味著我們碰到的東西在我們下面），將速度設置成一個相對大的負值。這導致玩家跳躍。否則，玩家只是撞到某物上，速度就被設定為零。

重力、跳躍速度和幾乎所有其他常數，在游戲中都是通過反復試驗來設定的。我測試了值，直到我找到了我喜歡的組合。

對于這樣的游戲，我們不希望按鍵在每次按下時生效。相反，我們希望只要按下了它們，他們的效果（移動球員的數字）就一直有效。

我們需要設置一個鍵盤處理器來存儲左、右、上鍵的當前狀態。我們調用preventDefault，防止按鍵產生頁面滾動。

下面的函數接受一個按鍵名稱數組，返回跟蹤這些按鍵的當前位置的對象。并注冊"keydown"和"keyup"事件，當事件對應的按鍵代碼存在于其存儲的按鍵代碼集合中時，就更新對象。

function trackKeys(keys) {
  let down = Object.create(null);
  function track(event) {
    if (keys.includes(event.key)) {
      down[event.key] = event.type == "keydown";
      event.preventDefault();
    }
  }
  window.addEventListener("keydown", track);
  window.addEventListener("keyup", track);
  return down;
}

const arrowKeys =
  trackKeys(["ArrowLeft", "ArrowRight", "ArrowUp"]);

兩種事件類型都使用相同的處理程序函數。該處理函數根據事件對象的type屬性來確定是將按鍵狀態修改為true（“keydown”）還是false（“keyup”）。

我們在第十四章中看到的requestAnimationFrames函數是一種產生游戲動畫的好方法。但該函數的接口有點過于原始。該函數要求我們跟蹤上次調用函數的時間，并在每一幀后再次調用requestAnimationFrame方法。

我們這里定義一個輔助函數來將這部分煩人的代碼包裝到一個名為runAnimation的簡單接口中，我們只需向其傳遞一個函數即可，該函數的參數是一個時間間隔，并用于繪制一幀圖像。當幀函數返回false時，整個動畫停止。

function runAnimation(frameFunc) {
  let lastTime = null;
  function frame(time) {
    let stop = false;
    if (lastTime != null) {
      let timeStep = Math.min(time - lastTime, 100) / 1000;
      if (frameFunc(timeStep) === false) return;
    }
    lastTime = time;
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

我們將每幀之間的最大時間間隔設置為 100 毫秒（十分之一秒）。當瀏覽器標簽頁或窗口隱藏時，requestAnimationFrame調用會自動暫停，并在標簽頁或窗口再次顯示時重新開始繪制動畫。在本例中，lastTime和time之差是隱藏頁面的整個時間。一步一步地推進游戲看起來很傻，可能會造成奇怪的副作用，比如玩家從地板上掉下去。

該函數也會將時間單位轉換成秒，相比于毫秒大家會更熟悉秒。

runLevel函數的接受Level對象和顯示對象的構造器，并返回一個Promise。runLevel函數（在document.body中）顯示關卡，并使得用戶通過該節點操作游戲。當關卡結束時（或勝或負），runLevel會多等一秒（讓用戶看看發生了什么），清除關卡，并停止動畫，如果我們指定了andThen函數，則runLevel會以關卡狀態為參數調用該函數。

function runLevel(level, Display) {
  let display = new Display(document.body, level);
  let state = State.start(level);
  let ending = 1;
  return new Promise(resolve => {
    runAnimation(time => {
      state = state.update(time, arrowKeys);
      display.setState(state);
      if (state.status == "playing") {
        return true;
      } else if (ending > 0) {
        ending -= time;
        return true;
      } else {
        display.clear();
        resolve(state.status);
        return false;
      }
    });
  });
}

一個游戲是一個關卡序列。每當玩家死亡時就重新開始當前關卡。當完成關卡后，我們切換到下一關。我們可以使用下面的函數來完成該任務，該函數的參數為一個關卡平面圖（字符串）數組和顯示對象的構造器。

async function runGame(plans, Display) {
  for (let level = 0; level < plans.length;) {
    let status = await runLevel(new Level(plans[level]),
                                Display);
    if (status == "won") level++;
  }
  console.log("You"ve won!");
}

因為我們使runLevel返回Promise，runGame可以使用async函數編寫，如第十一章中所見。它返回另一個Promise，當玩家完成游戲時得到解析。

在本章的沙盒的GAME_LEVELS綁定中，有一組可用的關卡平面圖。這個頁面將它們提供給runGame，啟動實際的游戲：

按照慣例，平臺游戲中玩家一開始會有有限數量的生命，每死亡一次就扣去一條生命。當玩家生命耗盡時，游戲就從頭開始了。

調整runGame來實現生命機制。玩家一開始會有 3 條生命。每次啟動時輸出當前生命數量（使用console.log）。

現在實現一個功能 —— 當用戶按下 ESC 鍵時可以暫停或繼續游戲。

我們可以修改runLevel函數，使用另一個鍵盤事件處理器來實現在玩家按下 ESC 鍵的時候中斷或恢復動畫。

乍看起來，runAnimation無法完成該任務，但如果我們使用runLevel來重新安排調度策略，也是可以實現的。

當你完成該功能后，可以嘗試加入另一個功能。我們現在注冊鍵盤事件處理器的方法多少有點問題。現在arrows對象是一個全局綁定，即使游戲沒有運行時，事件處理器也是有效的。我們稱之為系統泄露。請擴展tracKeys，提供一種方法來注銷事件處理器，接著修改runLevel在啟動游戲時注冊事件處理器，并在游戲結束后注銷事件處理器。

它是傳統的平臺游戲，里面有敵人，你可以跳到它頂上來打敗它。這個練習要求你把這種角色類型添加到游戲中。

我們稱之為怪物。怪物只能水平移動。你可以讓它們朝著玩家的方向移動，或者像水平巖漿一樣來回跳動，或者擁有你想要的任何運動模式。這個類不必處理掉落，但是它應該確保怪物不會穿過墻壁。

當怪物接觸玩家時，效果取決于玩家是否跳到它們頂上。你可以通過檢查玩家的底部是否接近怪物的頂部來近似它。如果是這樣的話，怪物就消失了。如果沒有，游戲就輸了。

• 上一篇：JavaScript 編程精解 中文第三版 十七、在畫布上繪圖
• 下一篇：JavaScript 編程精解 中文第三版 十五、處理事件

wayneli

男|高級講師

我要關注 我要私信

TA的文章

閱讀更多

• 快速掌握正則表達式 | 02 掌握進階的匹配操作

  閱讀 2187·2021-11-18 10:02

• 程序員之職業生涯的第8個階段

  閱讀 3289·2021-11-11 16:55

• CloudCone：大硬盤vps補貨，$20/年，1核/1G/250GB HDD/5TB月流量(理論

  閱讀 2694·2021-09-14 18:02

• 熬夜爆肝！C++核心STL容器知識點匯總整理【3W字干貨預警 建議收藏】

  閱讀 2426·2021-09-04 16:41

• 帶你深入理解自動化測試框架Pytest的配置文件!

  閱讀 2056·2021-09-04 16:40

• 常見的css布局

  閱讀 1165·2019-08-30 15:56

• Do not mutate vuex store state outside mutation ha

  閱讀 2213·2019-08-30 15:54

• Codepen 每日精選（2018-3-25）

  閱讀 3161·2019-08-30 14:15

最新活動