飛機大戰遊戲需求文件

遊戲玩法介紹：玩家控制一架英雄機,可以發射子彈 , 螢幕上方下落敵機和炸藥包

打到獎勵的炸藥包, 可以雙發子彈 , 也可能獲得生命1條. 打到小飛機可以加5分獎勵. 被小飛機或炸藥包碰到減生命1條, 生命為0 , 遊戲結束. 

遊戲過程 

啟動遊戲 

-英雄起始生命3條, 遊戲分數0分開始遊戲

-介面中,任意位置點選滑鼠,開始遊戲暫停遊戲

移出螢幕遊戲暫停 , 移回螢幕遊戲繼續遊戲結束

生命值為0遊戲結束,當遊戲處於結束狀態,  任意點選可初始化資料,遊戲重新開始

遊戲主程式

 ShootGame ：遊戲狀態：Begin，Started，Pause，Over

| ---- 英雄機 Hero  狀態：

| ---- 敵機 Airplane  狀態：Moving，Dead

| ---- 子彈 Bullet  狀態：Moving，Dead

| ---- 炸藥包 Bee  狀態：Moving，Dead

實現思路：

1. 開啟頁面，背景開始走動；

2. 點選開始，飛機開始不斷髮射子彈，敵人隨機出現在上方；

3. 當敵人碰到子彈，敵人消失；

4. 當敵人（敵機和炸彈）和飛機相遇，飛機死亡，結束遊戲；

介面實現：

選單介面：“飛機大戰”Logo， “開始遊戲”按鈕，“玩法介紹”按鈕

統一規定：screenWidth = window.innerWidth 螢幕寬度

背景圖片-位置：bg_left:(screenWidth-bg_width)/2,bg_Top: 50

背景圖片大小：bg_width = 480*0.7, bg_height = 850*0.7

英雄飛機的大小:plane_w = 102*0.7, plane_h = 126*0.7

英雄飛機可飛行的範圍：left(bg_left,bg_Top + bg_width - plane_w)

Top(bg.offsetTop, bg.offsetTop + bg_height - plane_h )

把所有用到多次的資料都用變數儲存起來，以方便後期的修改和調整

資料處理：

獲取已經建立好的div 的寬高
div.style.width =>_px; 使用parseInt()轉換，即可獲取該div的寬度 
div.style.height =>_px; 使用parseInt()轉換，即可獲取該div的高度

獲取已經建立好的div 的位置
1.div.style.left =>_px; 使用parseInt()轉換，即可獲取該div的寬度 
div.style.top =>_px; 使用parseInt()轉換，即可獲取該div的高度
2.div.offsetLeft => 可直接獲取div的left值
div.offsetTop =>可直接獲取div的top值
注意：offsetLeft 和offsetTop 只能獲取，不能重新賦值
所以在改變div的left,top值的時候只能去修改div.style.left和div.style.top的值

鍵盤操作：

選單介面：

1. 點選“開始遊戲”進入遊戲介面

2. 點選“遊戲玩法”顯示玩法介紹圖

遊戲主介面：

1. 滑鼠點選任意位置開始遊戲，或者鍵盤任意鍵被按下開始遊戲，或者進入遊戲頁面直接開始遊戲

2. 遊戲介面，可通過“WASD”或者上下左右鍵操控飛機飛行

遊戲簡介介面：遊戲規則介紹，點選“玩法介紹”按鈕，將Logo替換成操作指南圖片

遊戲主介面：分數顯示，英雄飛機生命值顯示，以及各種物件的顯示

遊戲暫停介面：

切換遊戲狀態，所以物體靜止，英雄飛機動畫繼續播放

遊戲結束介面：分數顯示，重新開始

顯示分數和“重新開始按鈕”

遊戲物件：

1. 英雄飛機：

飛機的狀態：飛行（移動），攻擊（發射子彈），死亡（爆炸）---> 遊戲結束

2. 子彈

生成，移動，擊中敵機（爆炸），（飛出邊界）消失

3. 敵機：

三種類型敵機：

小敵機：生成，移動，死亡（爆炸），（飛出邊界）消失      生命值：1

中型敵機：生成，移動，死亡（爆炸），（飛出邊界）消失    生命值：4

大型敵機：生成，移動，死亡（爆炸），（飛出邊界）消失    生命值：7

4. 炸彈：生成，移動，（飛出邊界）消失，爆炸-->表示擊中英雄飛機

遊戲物件具體設計：

1. 生成的所有物件都是div , 便於計算兩個物件是否發生碰撞（原理：判讀是否在一個平面內） 

2. 每個物件都由一張圖片表示

3. 屬性：width , height, left, top, Hp（血量）,  

4. 物件的功能（方法）：

根據不同的物件，設定不同的功能函式：

移動--Move():

座標系中圖形位置的移動, 都是通過改變left, top的值做到的

如: 橫向移動:  -left 左移  +left右移

如：縱向移動:  -top 上移 +top 下移

攻擊--Attack():-飛機攻擊--生成子彈

動畫切換--Animation():各種飛機飛行時的動態效果

死亡/爆炸--Death/Boom(): 當物件被擊中的時候，觸發爆炸效果，然後消失

物件死亡的時候出現爆炸效果並消失

消失--Dispear():消除遊戲物件：物件超出邊界消失，物件死亡顯示爆炸效果後消失

公用函式：

碰撞--HitCheck():判斷兩個物體是否發生碰撞

生成Div--CreateDiv(): 根據引數，生成相應的div