js開發飛機大戰需求文件
飛機大戰遊戲需求文件
遊戲玩法介紹:玩家控制一架英雄機,可以發射子彈 , 螢幕上方下落敵機和炸藥包
打到獎勵的炸藥包, 可以雙發子彈 , 也可能獲得生命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