編程思路

• 核心：跟隨游戲的步驟邏輯，思考其中所需的功能，并盡量將各部分功能分離，可以使編程思路更清晰、代碼易讀性更強，也方便調試
• 先寫大框架，有需要的功能直接調用（雖然未編寫），交給后面的代碼實現細節功能

初始化：隨機生成戰艦的位置（這一功能最后再實現，先使用硬編碼指定戰艦位置（即：指定固定的位置），優先編寫和調試后面的核心功能）

獲取玩家輸入：用controller對象實現。將輸入的"A3"轉換為"03"，判定是否擊中交給后面的對象model處理；且通過model中擊沉的戰艦數量判斷游戲是否結束；

處理擊中和未擊中：用model對象實現，接收到"03"這樣的參數后，判斷是否擊中、是否重復擊中同一位置、戰艦是被擊沉；擊中/未擊中的圖像顯示交給后面的對象view實現；

圖形化的游戲顯示：用view對象實現，傳入擊中/未擊中的單元格坐標，在對應位置顯示戰艦或MISS圖像。

摘要：知識要點

• 每個戰艦為ship對象，包含兩個數組locations和hits，保存一艘戰艦的位置和被擊中部位

• 若有多個ship對象，將它們保存在同一個數組ships中（數組元素為對象）

• 玩家提交輸入后，通過遍歷每艘戰艦的位置，判定是否擊中

• 根據是否擊中，使用對應網格的<td>元素的setAttribute()將其設置為之前在CSS中規定好的類（類的background已被設置為戰艦或MISS圖像），網頁將實時地根據其class(類)的不同改變其背景圖像

• 消息顯示區為<div>元素，innerHTML對應其文本

• 輸入框為<input>元素(type為"text")，value對輸入框的內容，placeholder可預設其文本，將value置為""可清空文本

• 開火按鈕為<input>元素(type為"button")，value對應按鈕上的文本

• "button"型<input>元素的onclick事件：檢測到點擊事件時觸發

• [優化：回車自動提交表單]"text"型<input>元素的onkeypress事件：(在輸入框中)檢測到按鍵事件時觸發

• [優化：回車自動提交表單]事件處理程序：判斷當前按下的按鍵是否為回車，如果是，自動調用fireButton.click()實現按鈕點擊操作

設計方案

將這款游戲設計為幾個較為獨立的對象（每個對象有其主要職責，從而便于獨立創建和測試游戲的各個部分），并利用DOM與用戶交互。這種設計讓問題理解起來容易得多。

• 這樣做的優點在于：可以相對獨立的編寫代碼，并分別測試每個對象，確保對象履行其職責（每個對象的測試代碼可能需要單獨編寫，僅用于測試該對象的功能）

總共有3個要設計并實現的對象：model、view和controller

• model將存儲游戲的狀態，如每艘戰艦的位置以及哪個部位被擊中；
• view負責在model存儲的狀態改變時更新界面；
• controller將各個部分整合以實現游戲邏輯：將用戶輸入交給model以更新狀態、判斷游戲是否結束

1.view對象

• view對象用于顯示當前的游戲狀態
• 需要displayMessage方法：在左上角顯示hit/miss/you sank my battleship信息
• 需要displayHit方法：在某指定網格內顯示戰艦圖像
• 需要displayMiss方法：在某指定網格內顯示MISS圖像

具體實現方案

displayMessage方法：傳入要顯示的信息msg，通過getElementById獲取用于顯示消息的<div>元素，用innerHTML設置其文本為msg

displayHit方法：傳入指定網格<td>的id，通過getElementById獲取相應的<td>元素，并將其class屬性設置為hit類，即可將網格背景設置為戰艦圖像（利用了之前定義的hit類，其background屬性為戰艦圖像）

displayMiss方法：同理

var view = {displayMessage: function(msg) {var messageArea = document.getElementById("messageArea");messageArea.innerHTML = msg;},displayHit: function(location) {var cell = document.getElementById(location);cell.setAttribute("class", "hit");},displayMiss: function(location) {var cell = document.getElementById(location);cell.setAttribute("class", "miss");} };

2.model對象

model對象用于存儲游戲的狀態、判斷是否擊中以完成狀態轉換、狀態改變時通知view

• 需要一些屬性：保存網格大小、總戰艦數量、戰艦長度、被擊沉的戰艦數
• 每個戰艦為ship對象，包含兩個數組locations和hitis，保存一艘戰艦的位置和被擊中部位
• 若有多個ship對象，將它們保存在同一個數組ships中（數組元素為對象）
• 需要fire方法：向戰艦開火時給出開火位置，判斷是否擊中、擊沉，并更新狀態
• 需要isSunk方法：返回戰艦是否被擊沉
• 注意model對象所保存的狀態改變時（如擊中），要通知view。因為view模型并不會主動的檢查狀態的變化
• 需要generateShip方法：隨機生成戰艦

核心邏輯：如何檢測擊中

遍歷每艘船，比較船的位置和開火的位置

var model = {boardSize: 7,numShips: 3,shipLength: 3,shipsSunk: 0,// hard-coded values for ship locations(used for test) /*ships: [{ locations: ["06", "16", "26"], hits: ["", "", ""] },{ locations: ["24", "34", "44"], hits: ["", "", ""] },{ locations: ["10", "11", "12"], hits: ["", "", ""] }], */fire: function(guess) {for (var i = 0; i < this.numShips; i++) {var ship = this.ships[i];var index = ship.locations.indexOf(guess);//猜測的位置上有戰艦if (ship.hits[index] === "hit") {//Already hitreturn true;} else if (index >= 0) {//HITif (this.isSunk(ship)) {//SUNK}return true;}}//MISSreturn false;},//... };

注意，查看是否命中戰艦時，代碼為
var ship = this.ships[i];
var locations = ship.locations;
var index = locations.indexOf(guess);
這里使用串接(Chaining)將對象引用連接，避免創建臨時變量，也減少了代碼量


串接后的代碼為
var ship = this.ships[i];
var index = ship.locations.indexOf(guess);
此處ship沒有串接，以免串接鏈條過長（閱讀理解困難）

3.controller對象

controller對象用于整合各部分：處理用戶輸入，記錄猜測次數、讓model根據當前猜測更新自己、判斷游戲是否結束

• 需要guesses屬性：記錄猜測次數
• 需要processGuess方法：傳入用戶猜測，對其處理（如"A3"轉換為"03"），將結果交給model，檢測游戲是否結束

var controller = {guesses: 0,processGuess: function(guess) {var location = parseGuess(guess);//"A3"轉換為"03"的輔助函數if (location) {//有效輸入this.guesses++;var hit = model.fire(location);if (hit && model.shipsSunk === model.numShips) {view.displayMessage("You sank all my battleships, in " + this.guesses + " guesses");}}} }

怎樣獲取玩家輸入：事件處理程序

事件處理程序能將HTML中的表單<form>元素與游戲關聯

• 點擊Fire!按鈕時（單擊事件），調用事件處理程序
• 事件處理程序(回調函數)事先編寫好，用于獲取輸入框的內容并交給controller

單擊事件與事件處理程序

window.onload = init; function init() {//網頁加載完畢后，再開始接收輸入并開始游戲// place the ships on the game boardmodel.generateShipLocations();// Fire! button onclick handlervar fireButton = document.getElementById("fireButton");fireButton.onclick = handleFireButton; }

事件處理程序用于獲取輸入框的內容并交給controller

function handleFireButton() {var guessInput = document.getElementById("guessInput");var guess = guessInput.value.toUpperCase();//獲取輸入框的內容controller.processGuess(guess);//輸入框的內容交給controllerguessInput.value = "";//重置輸入框，玩家無需手動刪除上一個輸入 }

優化：希望按下回車也能觸發事件

• HTML中<input>元素的onkeypress事件：(在輸入框中)檢測到按鍵事件時，就觸發對應的事件處理程序，可將所需的按鍵處理程序賦給onkeypress

• 事件處理程序：判斷當前按下的按鍵是否為回車，如果是，自動調用fireButton.click()實現按鈕點擊操作

這里使用了guessInput元素的onkeypress事件

• guessInput.onkeypress = handleKeyPress;
• 瀏覽器向事件處理程序handleKeyPress傳遞一個事件對象，其中包含有關用戶按下了哪個鍵的信息

function init() {//網頁加載完畢后，再開始接收輸入并開始游戲//...var guessInput = document.getElementById("guessInput");guessInput.onkeypress = handleKeyPress;//... }function handleKeyPress(e) {//包含有關用戶按下了哪個鍵的信息var fireButton = document.getElementById("fireButton");// in IE9 and earlier, the event object doesn't get passed// to the event handler correctly, so we use window.event instead.e = e || window.event;if (e.keyCode === 13) {fireButton.click();return false;//返回false，讓表單不做其他的提交等操作} }

4.隨機生成戰艦

• 每個戰艦為ship對象，包含兩個數組locations和hits，保存一艘戰艦的位置和被擊中部位
• 若有多個ship對象，將它們保存在同一個數組ships中（數組元素為對象）

思路：

• 大循環：要生成幾艘戰艦，就環循幾次
• 大循環內部：
  每次在游戲板上隨機生成一艘戰艦（可能于已有戰艦重疊）
  生成后判斷是否重疊：若重疊則重新隨機生成；若不重疊將新戰艦加入ships數組

注意，這里的[生成-判斷-若重疊，重新生成]，此邏輯適合用do while循環

實現方案：

• generateShips:主方法，它創建model對象中的ships數組且保證無重疊(戰艦數由model對象的屬性numShips指定)
• generateAShipRandomly:這個方法隨機在游戲板上生成一個戰艦對象ship（包含兩個數組locations和hits）[生成戰艦可能與已有的重疊]
  的位置可能與其他戰艦重疊，也可能不重疊。
• collision:傳入ship對象，并判斷它是否與已有的戰艦重疊

ps. 生成新戰艦時無需顧及hits的生成：檢測是否擊中，看的是hits數組中對應元素是否為"hit"(因為被擊中時才設置hits數組中相應索引的值為"hit")，一開始默認hits數組為空即可

generateShips: function() {var locations;for (var i = 0; i < this.numShips; i++) {do {locations = this.generateAShipRandomly();} while (this.collision(locations));this.ships[i].locations = locations;}console.log("Ships array: ");console.log(this.ships);},generateAShipRandomly: function() {var direction = Math.floor(Math.random() * 2);var row, col;if (direction === 1) { // horizontalrow = Math.floor(Math.random() * this.boardSize);col = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));} else { // verticalrow = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));col = Math.floor(Math.random() * this.boardSize);}var newShipLocations = [];for (var i = 0; i < this.shipLength; i++) {if (direction === 1) {newShipLocations.push(row + "" + (col + i));} else {newShipLocations.push((row + i) + "" + col);}}return newShipLocations;},collision: function(locations) {for (var i = 0; i < this.numShips; i++) {var ship = this.ships[i];for (var j = 0; j < locations.length; j++) {if (ship.locations.indexOf(locations[j]) >= 0) {return true;}}}return false;}};

總結

以上是生活随笔為你收集整理的JavaScript学习笔记——编写战舰游戏 Part2：JavaScript部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。