[Canvas前端遊戲開發]——FlappyBird詳解

發表於2016-01-03
Canvas前端遊戲開發APP

一直想自己做點小東西，直到最近看了本《HTML5遊戲開發》，才瞭解遊戲開發中的一點點入門知識。

本篇就針對學習的幾個樣例，自己動手實踐，做了個FlappyBird，原始碼共享在度盤 ；也可以參考github，裡面有更多的遊戲樣例。

遊戲截圖

HTML5之Canvas

Canvas是Html5中用於繪圖的元素，它可以繪製各種圖形，比如長方形，多邊形，圓形等等。如果想要了解Canvas的使用可以參考：

http://www.w3school.com.cn/tags/html_ref_canvas.asp

 

在cavas每個繪製都是獨立的操作。比如下圖的兩個繪製圖形，第二個會以覆蓋的形式繪製，因此繪製圖形的順序就顯得十分重要了。

canvas之drawImage()

本篇的遊戲開發中，主要使用的是依據圖片繪製的api:drawImage()，它有兩個基本的使用方法：

第一個api中，指定Image物件，然後給出繪製圖片的x,y座標以及寬度和高度即可。

第二個api中，第一組x,y,width,height則指定了裁剪圖片的座標尺寸，這在使用多元素的向量圖時很常用。比如：

上面的圖片中為了減少圖片資源的請求數量，把很多的元素放在了一個圖片中，此時就需要通過裁剪的方式，獲取指定的圖片元素。

FlappyBird原理解析

其實這個遊戲很簡單，一張圖就可以看懂其中的奧妙：

其中背景和地面是不動的。

小鳥只有上和下兩個動作，可以通過控制小鳥的y座標實現。

上下的管子只會向左移動，為了簡單實現，遊戲中一個畫面僅僅會出現一對管子，這樣當管子移出左邊的背景框，就自動把管子放在最右邊！

很簡單吧！

由於該遊戲一共就這幾個元素，因此把他們都放入一個Objects陣列中，通過setInteral()方法，在一定間隔時間內，執行一次重繪。

重繪的時候會先清除畫面中的所有元素，然後按照新的元素的座標一次繪製圖形，這樣就會出現移動的效果。

模擬小鳥重力

由於這個遊戲不涉及小鳥橫向的運動，因此只要模擬出小鳥下落的動作以及上升的動作就可以了。

上升：這個很簡單，只要把小鳥的y座標減去一定的值就可以了

下落：其實重力不需要使用gt^2來模擬，可以簡單的指定兩個變數，v1和gravity，這兩個變數與setInterval()中的時間共同作用，就能模擬重力。

碰撞檢測

遊戲中小鳥碰到管子或者地面都會算遊戲結束：

其中條件1上管道的檢測為：

條件2下管道的檢測為：

條件3地面的檢測最簡單，為：

如果滿足這三個條件，就算遊戲結束，會清除迴圈以及提示遊戲結束資訊。

分數計算

分數的計算與碰撞檢測類似，設定一個開關，當管子重新出現時，設定為true。當分值加1時，設定為false。

小鳥的最左邊的x座標如果超出了管子的x+width，就認為成功通過。

通過後，分值加1，速度+1。

全部原始碼

總結

在學習遊戲開發的時候，我突然懷念起大學的物理。當時很納悶，學計算機學什麼物理，後來再接觸遊戲開發才知道，沒有一定的物理知識，根本無法模擬遊戲中的各個場景。

而通過這個簡單的小遊戲，也撿起來了很多舊知識。

參考

【1】：Canvas參考手冊

【2】：《HTML5遊戲開發》

【3】：EdisonChou的FlappyBird

相關文章