基於排序二叉樹的簡單遊戲

遊戲描述

打外星人遊戲。外星人座標記錄在排序二叉樹上。遊戲要求輸入想要開炮的橫縱座標，以判斷可否擊中飛機。若是在10發炮彈限制以內能夠擊中飛機，則贏。若是不能，失敗（外星人步步逼近，最終侵略地球）。遊戲過程當中，將顯示一些信息（如炮彈數目），遊戲結束以後也會顯示輸贏狀況。

文件結構

遊戲界面設計

• 大致上分爲3個div："title"/"stage"/"pannel"/，分別對應遊戲標題、遊戲界面、遊戲輸入輸出控制區域。
• stage爲遊戲界面，position:relative。遊戲主體飛機、外星人、炮彈都在這個div中，且position:absolute。處理相應座標top/left。
• 座標處理考慮圖片自己的像素數，簡單的計算。
• 爲了使界面居中，對class="center"的選擇器添加規則。具體的width在具體選擇器中再進行設置：margin-left: auto;margin-right:auto;

遊戲邏輯實現

一些知識點

• querySelector()：Selector API Leve1核心的兩個方法之一。能夠經過Document或者Element實例調用它們。querySelector()接收一個CSS選擇器，返回第一個匹配的元素，若是沒有則返回null。詳情見《JavaScript高級程序設計》第十一章 DOM擴展部分。
• addEventListener()/removeEventListener()：DOM2級事件處理，見《JS高程》第十三章。
• Math.random()方法可生成0到1的僞隨機數；Math.floor()方法向下取整。

外星人座標的處理

• 設計三個變量處理外星人的座標

1. binaryTree對象：排序二叉樹的實例。
2. nodesForAlien數組：數組中每一個元素是一個對象存儲：key, selected屬性。其中selected用於表示當前外星人橫座標是否選中，以表示當前顯示的外星人位置橫座標，默認爲false。
3. keys數組：用於存儲nodesForAlien的對應座標信息。以便於隨機選取外星人的座標（總共有20個）。

• 生成排序二叉樹的過程：Math.random()任意生成橫座標數值key；調用binaryTree.insert(key)將其插入到排序二叉樹中，與此同時將該值push給nodesForAlien和keys數組。爲了使二叉樹節點結構和nodesForAlien的基本一致，調用preOrderTraverse(callback)方法遍歷二叉樹，並建立callback()函數處理獲得的節點，爲每一個節點增長selected屬性，默認值爲false。
• 生成第一個外星人的位置：在0到20間選取默認值，經過binaryTree.search(keys[索引]).selected=true;將節點標記爲已選擇，同時nodesForAlien相應位置也該標記爲已選擇。接下來改變外星人的位置的操做基本相同，但要記得將已選擇狀態切換爲未選擇。

函數

• clickHandler()/keydownHandler()分別對應click和keydown事件。兩者在按下按鈕和輸入回車的時候觸發。調用validateInput()函數。
• validateInput()函數：驗證輸入是否合法，即必須是數字且輸入座標不能大於500。若不合法，從新輸入；合法，調用playgame()函數。
• playgame()函數：顧名思義。
  • 監測當前狀態並進行處理（改變或者判斷）：
    1.剩餘子彈數：shotsRemaining
    2.已用子彈數：shotsUsed；
    3.遊戲狀態gameState：一條綜合上述兩個信息的字符串。
    4.用戶輸入座標X、Y；遊戲狀態
  • 用戶輸入座標的邏輯處理
    1.賦給guessX和guessY
    2.在二叉樹上查詢guessX
    a.若存在，且該節點被選中，且guessY在適當座標範圍內。則遊戲勝利。gameWon=true。進入函數endGame()函數
    b. 若沒有擊中，且子彈數shotsRemaining耗盡，則遊戲失敗，進入endGame()函數。
    c. 不然，繼續遊戲。
  • 繼續遊戲的邏輯：
    • 改變外星人的座標值：設外星人有10個候選橫座標在樹中，任意選中一個。並適當改變其y座標，使其接近「地球」。
    • 調用render()函數：從新繪製遊戲界面。
    • 固然，能夠考慮在控制檯輸出外星人座標。
• render()函數：調用以繪製界面：
  1.遊戲進行中：改變外星人、大炮、炮彈的位置。
  2.遊戲勝利：外星人圖標改爲爆炸圖標。外星人、炮彈不可見。
  3.注意到：render()必然會運行，由於不在if-else中。且endGame()執行完畢後會有返回的操做。
• endGame()函數：
  1.顯示遊戲結果：勝利、失敗。
  2.移除事件監聽程序。
  3.按鈕和輸入欄不可用。

連接

GitHub：基於二叉樹的小遊戲