下面的 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）用于取消一些我們不想保留的表格默認(rèn)行為。我們不希望在單元格之間或單元格內(nèi)部填充多余的空白。

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

我們繪制每個(gè)角色時(shí)需要?jiǎng)?chuàng)建其對(duì)應(yīng)的 DOM 元素，并根據(jù)角色屬性來設(shè)置元素坐標(biāo)與尺寸。這些值都需要與scale相乘，以將游戲中的尺寸單位轉(zhuǎn)換為像素。

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

為了賦予一個(gè)元素多個(gè)類別，我們使用空格來分隔類名。在下面展示的 CSS 代碼中，actor類會(huì)賦予角色一個(gè)絕對(duì)坐標(biāo)。我們將角色的類型名稱作為額外的 CSS 類來設(shè)置這些元素的顏色。我們并沒有再次定義lava類，因?yàn)槲覀兛梢灾苯訌?fù)用前文為巖漿單元格定義的規(guī)則。

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

setState方法用于使顯示器顯示給定的狀態(tài)。它首先刪除舊角色的圖形，如果有的話，然后在他們的新位置上重新繪制角色。試圖將 DOM 元素重用于角色，可能很吸引人，但是為了使它有效，我們需要大量的附加記錄，來關(guān)聯(lián)角色和 DOM 元素，并確保在角色消失時(shí)刪除元素。因?yàn)橛螒蛑型ǔＶ挥猩贁?shù)角色，重新繪制它們開銷并不大。

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

我們可以將關(guān)卡的當(dāng)前狀態(tài)作為類名添加到包裝器中，這樣可以根據(jù)游戲勝負(fù)與否來改變玩家角色的樣式。我們只需要添加 CSS 規(guī)則，指定祖先節(jié)點(diǎn)包含特定類的player元素的樣式即可。

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

在遇到巖漿之后，玩家的顏色應(yīng)該變成深紅色，暗示著角色被燒焦了。當(dāng)玩家收集完最后一枚硬幣時(shí)，我們添加兩個(gè)模糊的白色陰影來創(chuàng)建白色的光環(huán)效果，其中一個(gè)在左上角，一個(gè)在右上角。

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

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

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

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

找出玩家中心位置的代碼展示了，我們?nèi)绾问褂?b>Vec類型來寫出相對(duì)可讀的計(jì)算代碼。為了找出玩家的中心位置，我們需要將左上角位置坐標(biāo)加上其尺寸的一半。計(jì)算結(jié)果就是關(guān)卡坐標(biāo)的中心位置。但是我們需要將結(jié)果向量乘以顯示比例，以將坐標(biāo)轉(zhuǎn)換成像素級(jí)坐標(biāo)。

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

最簡單的做法是每次重繪時(shí)都滾動(dòng)視口，確保玩家總是在視口中央。但這種做法會(huì)導(dǎo)致畫面劇烈晃動(dòng)，當(dāng)你跳躍時(shí)，視圖會(huì)不斷上下移動(dòng)。比較合理的做法是在屏幕中央設(shè)置一個(gè)“中央?yún)^(qū)域”，玩家在這個(gè)區(qū)域內(nèi)部移動(dòng)時(shí)我們不會(huì)滾動(dòng)視口。

我們現(xiàn)在能夠顯示小型關(guān)卡。

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

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

移動(dòng)?xùn)|西非常簡單。比較困難的一部分是處理元素之間的相互作用。當(dāng)玩家撞到墻壁或者地板時(shí)，不可能簡單地直接穿越過去。游戲必須注意特定的動(dòng)作會(huì)導(dǎo)致兩個(gè)對(duì)象產(chǎn)生碰撞，并需要采取相應(yīng)措施。如果玩家遇到墻壁，則必須停下來，如果遇到硬幣則必須將其收集起來。

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

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

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

該方法用于判斷某個(gè)矩形（通過位置與尺寸限定）是否會(huì)碰到給定類型的網(wǎng)格。

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

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

我們通過查找坐標(biāo)遍歷網(wǎng)格方塊，并在找到匹配的方塊時(shí)返回true。關(guān)卡之外的方塊總是被當(dāng)作"wall"，來確保玩家不能離開這個(gè)世界，并且我們不會(huì)意外地嘗試，在我們的“rows數(shù)組的邊界之外讀取。

狀態(tài)的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;
};

它接受時(shí)間步長和一個(gè)數(shù)據(jù)結(jié)構(gòu)，告訴它按下了哪些鍵。它所做的第一件事是調(diào)用所有角色的update方法，生成一組更新后的角色。角色也得到時(shí)間步長，按鍵，和狀態(tài)，以便他們可以根據(jù)這些來更新。只有玩家才會(huì)讀取按鍵，因?yàn)檫@是唯一由鍵盤控制的角色。

如果游戲已經(jīng)結(jié)束，就不需要再做任何處理（游戲不能在輸之后贏，反之亦然）。否則，該方法測試玩家是否接觸背景巖漿。如果是這樣的話，游戲就輸了，我們就完了。最后，如果游戲?qū)嶋H上還在繼續(xù)，它會(huì)查看其他玩家是否與玩家重疊。

overlap函數(shù)檢測角色之間的重疊。它需要兩個(gè)角色對(duì)象，當(dāng)它們觸碰時(shí)返回true，當(dāng)它們沿X軸和Y軸重疊時(shí)，就是這種情況。

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方法有機(jī)會(huì)更新狀態(tài)。觸碰巖漿角色將游戲狀態(tài)設(shè)置為"lost"，當(dāng)你碰到硬幣時(shí)，硬幣就會(huì)消失，當(dāng)這是最后一枚硬幣時(shí)，狀態(tài)就變成了"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);
};

角色對(duì)象的update方法接受時(shí)間步長、狀態(tài)對(duì)象和keys對(duì)象作為參數(shù)。Lava角色類型忽略keys對(duì)象。

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

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

硬幣使用它們的act方法來晃動(dòng)。他們忽略了網(wǎng)格的碰撞，因?yàn)樗鼈冎皇窃谒鼈冏约旱姆綁K內(nèi)部晃動(dòng)。

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屬性來跟蹤時(shí)間，然后用作Math.sin的參數(shù)，來找到波上的新位置。然后，根據(jù)其基本位置和基于波的偏移，計(jì)算硬幣的當(dāng)前位置。

還剩下玩家本身。玩家的運(yùn)動(dòng)對(duì)于每和軸多帶帶處理，因?yàn)榕龅降匕宀粦?yīng)阻止水平運(yùn)動(dòng)，碰到墻壁不應(yīng)停止下降或跳躍運(yùn)動(dòng)。

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

水平運(yùn)動(dòng)根據(jù)左右箭頭鍵的狀態(tài)計(jì)算。當(dāng)沒有墻壁阻擋由這個(gè)運(yùn)動(dòng)產(chǎn)生的新位置時(shí)，就使用它。否則，保留舊位置。

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

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

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

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

我們需要設(shè)置一個(gè)鍵盤處理器來存儲(chǔ)左、右、上鍵的當(dāng)前狀態(tài)。我們調(diào)用preventDefault，防止按鍵產(chǎn)生頁面滾動(dòng)。

下面的函數(shù)接受一個(gè)按鍵名稱數(shù)組，返回跟蹤這些按鍵的當(dāng)前位置的對(duì)象。并注冊"keydown"和"keyup"事件，當(dāng)事件對(duì)應(yīng)的按鍵代碼存在于其存儲(chǔ)的按鍵代碼集合中時(shí)，就更新對(duì)象。

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"]);

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

我們在第十四章中看到的requestAnimationFrames函數(shù)是一種產(chǎn)生游戲動(dòng)畫的好方法。但該函數(shù)的接口有點(diǎn)過于原始。該函數(shù)要求我們跟蹤上次調(diào)用函數(shù)的時(shí)間，并在每一幀后再次調(diào)用requestAnimationFrame方法。

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

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

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

該函數(shù)也會(huì)將時(shí)間單位轉(zhuǎn)換成秒，相比于毫秒大家會(huì)更熟悉秒。

runLevel函數(shù)的接受Level對(duì)象和顯示對(duì)象的構(gòu)造器，并返回一個(gè)Promise。runLevel函數(shù)（在document.body中）顯示關(guān)卡，并使得用戶通過該節(jié)點(diǎn)操作游戲。當(dāng)關(guān)卡結(jié)束時(shí)（或勝或負(fù)），runLevel會(huì)多等一秒（讓用戶看看發(fā)生了什么），清除關(guān)卡，并停止動(dòng)畫，如果我們指定了andThen函數(shù)，則runLevel會(huì)以關(guān)卡狀態(tài)為參數(shù)調(diào)用該函數(shù)。

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

一個(gè)游戲是一個(gè)關(guān)卡序列。每當(dāng)玩家死亡時(shí)就重新開始當(dāng)前關(guān)卡。當(dāng)完成關(guān)卡后，我們切換到下一關(guān)。我們可以使用下面的函數(shù)來完成該任務(wù)，該函數(shù)的參數(shù)為一個(gè)關(guān)卡平面圖（字符串）數(shù)組和顯示對(duì)象的構(gòu)造器。

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!");
}

因?yàn)槲覀兪?b>runLevel返回Promise，runGame可以使用async函數(shù)編寫，如第十一章中所見。它返回另一個(gè)Promise，當(dāng)玩家完成游戲時(shí)得到解析。

在本章的沙盒的GAME_LEVELS綁定中，有一組可用的關(guān)卡平面圖。這個(gè)頁面將它們提供給runGame，啟動(dòng)實(shí)際的游戲：

按照慣例，平臺(tái)游戲中玩家一開始會(huì)有有限數(shù)量的生命，每死亡一次就扣去一條生命。當(dāng)玩家生命耗盡時(shí)，游戲就從頭開始了。

調(diào)整runGame來實(shí)現(xiàn)生命機(jī)制。玩家一開始會(huì)有 3 條生命。每次啟動(dòng)時(shí)輸出當(dāng)前生命數(shù)量（使用console.log）。

現(xiàn)在實(shí)現(xiàn)一個(gè)功能 —— 當(dāng)用戶按下 ESC 鍵時(shí)可以暫?；蚶^續(xù)游戲。

我們可以修改runLevel函數(shù)，使用另一個(gè)鍵盤事件處理器來實(shí)現(xiàn)在玩家按下 ESC 鍵的時(shí)候中斷或恢復(fù)動(dòng)畫。

乍看起來，runAnimation無法完成該任務(wù)，但如果我們使用runLevel來重新安排調(diào)度策略，也是可以實(shí)現(xiàn)的。

當(dāng)你完成該功能后，可以嘗試加入另一個(gè)功能。我們現(xiàn)在注冊鍵盤事件處理器的方法多少有點(diǎn)問題?，F(xiàn)在arrows對(duì)象是一個(gè)全局綁定，即使游戲沒有運(yùn)行時(shí)，事件處理器也是有效的。我們稱之為系統(tǒng)泄露。請擴(kuò)展tracKeys，提供一種方法來注銷事件處理器，接著修改runLevel在啟動(dòng)游戲時(shí)注冊事件處理器，并在游戲結(jié)束后注銷事件處理器。

它是傳統(tǒng)的平臺(tái)游戲，里面有敵人，你可以跳到它頂上來打敗它。這個(gè)練習(xí)要求你把這種角色類型添加到游戲中。

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

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

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

wayneli

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• 快速掌握正則表達(dá)式 | 02 掌握進(jìn)階的匹配操作

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

• 程序員之職業(yè)生涯的第8個(gè)階段

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

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

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

• 熬夜爆肝！C++核心STL容器知識(shí)點(diǎn)匯總整理【3W字干貨預(yù)警 建議收藏】

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

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

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

• 常見的css布局

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

• Do not mutate vuex store state outside mutation ha

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

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

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

最新活動(dòng)