JavaScript實現Fly Bird小遊戲

JavaScript實現Fly Bird小遊戲

Runner_Yang 前端先鋒

做者：Runner_Yang（簡書做者）
本文由原做者受權發佈，如轉載，請聯繫受權。

1.分析頁面結構，理清需求和功能
遊戲有三個界面，分別是開始界面，遊戲界面和遊戲結束界面。
1.1 開始界面

start.gif

• 遊戲的大背景
• 上下移動的遊戲標題和翅膀擺動的小鳥
• start 按鈕，點擊進入遊戲界面
• 一直移動的地面

1.2 遊戲界面

play.gif

• 顯示越過障礙數量的計分器
• 移動的障礙物，分別是上管道和下管道
• 點擊遊戲界面，小鳥向上飛起，而後在重力做用下下墜，
• 當小鳥和管道碰撞後，結束界面彈出，同時小鳥落到地面

1.3 結束界面

• Game over 提示面板
• OK 按鈕

2. 開發「開始界面」
考慮到草地的移動效果，咱們在頁面中加入兩個草地

2.1 HTML

2.2 CSS

將wrapBg中的overflow:hidden註釋掉的頁面效果

開始界面.jpg
2.3 JS
小鳥煽動翅膀的效果須要用到逐幀動畫的原理

逐幀動畫是一種常見的動畫形式（Frame ByFrame），其原理是在「連續的關鍵幀」中分解動畫動做，也就是在時間軸的每幀上逐幀繪製不一樣的內容，使其連續播放而成動畫。

bird1.png

bird0.png

2.3.1 開始標題的擺動

2.3.2 移動的草地

2.3.3 Start按鍵

完成後的效果（註釋掉了wrapBg中的overflow:hidden）

start01.gif

接下來咱們開發「遊戲界面」

3. 「遊戲界面」的開發
遊戲界面中有三樣元素，分別是「小鳥」，「障礙」，和「計分器」，咱們依次來建立相應的對象。

3.1 小鳥
首先，建立小鳥的對象， bird.js 文件。

下面，實現點擊start按鈕時，加載小鳥。(在以前的代碼基礎上添加)

添加小鳥後的效果

---

play01.gif
3.2 障礙（上管道和下管道）

block示意圖.png

障礙分爲上管道和下管道，如示意圖所示結構嵌套，這樣就能夠經過隨機設置DownDiv2的高度和gapHeight的高度，來改變生成障礙的形態

block.js

公共對象文件 baseObj.js ，用來提供隨機數，和兩個矩形div的碰撞檢測

下面個人想法是在start按鈕點擊的時候建立一個block，把這個block存儲到數組blocksArr 中，在landTimer 定時器的方法 landRun 中檢查此數組的長度，若是數組不爲空數組，那麼就讓數組中全部的block移動。
檢查數組中最後一個block離開的距離，達到必定距離，就從新new 一個block，添加到數組。
檢查數組中第一個block，一旦達到必定位置，就在結構中移除downDivWrap和upDivWrap，同時在數組中刪除block。

當前的遊戲效果

play02.gif
3.3 計分器
遊戲中的計分器相對較好實現，咱們就實現最大爲三位數的計分器吧。

html

css樣式

js

實現計數器功能，最重要的是如何判斷走過水管的數量，咱們以水管的位置來判斷。bird的定位left爲50px，水管的寬度是62px，當水管越太小鳥的時候，水管距離它父級的定位 offsetLeft 是 -12px。每當有一個水管到達此位置，score++；

在start按鈕的事件處理程序中加入

目前效果，計數器功能完成。

play03.gif
4.「結束界面」的開發
當小鳥和管道碰撞或者和地面碰撞時候，隱藏計分器，彈出結束面板。
結束界面主要有「結束面板」和「ok」按鈕，這裏須要爲「ok」按鈕添加點擊事件。

最終效果

---

play04.gif

有興趣的朋友，能夠下載代碼，而後加上音效。OK，結束。點擊「閱讀原文」獲取源碼。