基于HTML5的Flappybird游戲設計與開發(fā)

曹學琪 尼瑪扎西

摘要：隨著網(wǎng)絡技術的快速發(fā)展，網(wǎng)頁游戲逐漸受到游戲玩家的青睞。Flappy bird是一款經(jīng)典網(wǎng)頁小游戲，對開發(fā)者的綜合能力要求較高。本文使用HTML5中的Canvas結合JavaScript來開發(fā)Flappy bird。

關鍵詞：HTML5;JavaScript;Canvas;游戲開發(fā);Flappy bird

中圖分類號：TP311.1 文獻標識碼：A 文章編號：1007-9416（2019）09-0132-02

0 引言

HTML5作為HTML的最新標準，增添新多媒體（video、audio）、新表單（keygen、output）、畫布（canvas）等元素，對網(wǎng)頁提供更好的頁面結構。本文結合HTML5中的新元素結合JavaScript腳本，對網(wǎng)頁小游戲Flappy bird進行設計和開發(fā)。

1 整體方案設計

1.1 游戲功能

本文設計的Flappy bird小游戲基于B/S架構，小游戲可以運行在Windows、Android、Mac OS等操作系統(tǒng)的瀏覽器中。當游戲運行時，玩家通過點擊手機屏幕（在電腦上使用鼠標點擊屏幕）來控制小鳥向上飛動，每當小鳥飛過一對管道的縫隙玩家游戲得分，當小鳥碰到管道或墜落地面時游戲結束。

1.2 程序流程和框架

當游戲玩家進入游戲后，系統(tǒng)開始加載圖片、音頻等資源文件，加載完畢后管道開始向左運動。玩家通過點擊屏幕來控制小鳥的飛動，游戲整體流程設計如圖1。

2 主要模塊設計

Flappy bird小游戲從主界面設計、屏幕適配模塊、小鳥模塊、管道模塊、碰撞檢測等模塊對主要的模塊進行設計。

2.1 程序入口

游戲的index.html為入口界面，Game.js為控制游戲的腳本，在開發(fā)程序時，首先需要在index.html中引入canvas元素，并加載Game.js腳本文件：

2.2 屏幕適配模塊

在HTML中，分別用document的Element.clientWidth、Element.clientHeight屬性來表示當前頁面的可視寬高屬性，為給玩家提供更好的游戲體驗，本設計對人們使用的主流手機型號進行屏幕適配，首先列出不同型號機型的屏幕尺寸。

由表1可以發(fā)現(xiàn)，屏幕寬度值最小的是iPhone 4，最大的是Nexus7;屏幕高度值最小的是iPhone 4，最大的是Nexus 7。由此可以根據(jù)屏幕的極值，設計適配屏幕的方法使得游戲全屏顯示。令cW=clientWidth、cH=clientHeight，那么屏幕的寬度判定方法設計為：cW<320？320：cW，cW>600？600：cW;屏幕高度的判定方法為：cH<600？600：cH，cH>960？960：cH。

2.3 小鳥模塊

本文設計有三種顏色的鳥，小鳥的高度為屏幕的0.04倍。游戲開始后，那么需要先使用Math.random（）產(chǎn)生一個{0，1，2}中的隨機數(shù)，從而產(chǎn)生黃色、藍色、紅色的一組鳥，每一組鳥包括三個圖片對應鳥扇動翅膀的不同效果。游戲中使用canvas元素中的drawImage（）方法繪制小鳥：

function drawBird（） {

（++fno）>=1000？fno：0;

//for

ctx.drawImage（imgBird[fno%300%3]，birdX，birdY，birdW，birdH）;

birdY+=birdSpeedDown;

t++;

birdSpeedDown=（2*t+1）*0.1;

}

玩家點擊屏幕小鳥向上飛動，同時播放小鳥飛動聲音，通過小鳥縱軸坐標變小可實現(xiàn)小鳥向上飛動：

function birdUp（） {

mediaSwing.play（）;

birdY-=birdSpeedUp;

}

2.4 管道模塊

游戲不斷產(chǎn)生新的管道，產(chǎn)生起始坐標位置隨機，寬為canvas寬的0.1倍，高為canvas的高減去gap的值。管道需要向左運動，因此把管道設置成數(shù)組對象，增添新管道時向其中push元素即可：

pipeArr.push（{

pX0：gameW，

pY0：gameH*（-Math.random（）*0.47）

}）;

2.5 碰撞檢測

設小鳥有四個屬性值：birdHead，birdFoot，birdLeft，birdRight。

小鳥總共三種情況下會產(chǎn)生碰撞：碰撞上管道、碰撞下管道、碰撞地面，如圖2所示。根據(jù)三種碰撞類型，設計碰撞模型，判斷小鳥是否發(fā)生碰撞：

（1）碰撞上管道判斷方法：birdRight>pipeUpLeft&&birdHead

（2）碰撞下管道判斷方法：birdFoot>pipeDownHead&&birdRight>pipeDownLeft&&birdLeft

（3）碰撞地面判斷方法：birdFoot>groundHead。

2.6 游戲測試

在游戲開發(fā)完成后，Chrome中針對表1全部的手機機型進行仿真測試，游戲的歡迎界面顯示、屏幕適配、游戲功能操作、游戲分數(shù)顯示功能均正常。

3 結語

我通過這次對Flappy bird小游戲的開發(fā)，加深了HTML、JavaScript等知識的認識。通過這個小項目，將所學過的知識融會貫通，付出實踐，對以后的程序開發(fā)設計提供了幫助。在開發(fā)過程中我遇到了一些程序上的問題，非常感謝對我提供指導和幫助的老師以及同學。

參考文獻

[1] 薛玉倩.基于HTML5的Web前端設計與開發(fā)[J].內(nèi)蒙古科技與經(jīng)濟，2019（17）：68-69.

[2] 秦鵬珍.基于Java的拼圖游戲實現(xiàn)[J].電子技術與軟件工程，2019（13）：237-238.

[3] 謝昊，昝鄉(xiāng)鎮(zhèn).基于JAVA平臺的flappy bird游戲設計[J].電腦知識與技術，2018，14（29）：77-79.

[4] 楊錦.關于網(wǎng)頁設計與制作方法研究[J].計算機產(chǎn)品與流通，2019（08）：210.

[5] 曾婷，凌財進.基于HTML5的計算機一級考試模擬Web APP的設計與實現(xiàn)[J].辦公自動化，2019，24（15）：60-62.

[6] 韓東陽，張松玥，王巖.微信小程序“IT云文檔”探討[J].湖北農(nóng)機化，2019（16）：153.

Abstract：With the rapid development of network technology， web games are gradually favored by gamers. Flappy bird is a classic web game that requires a high level of developer competence. This article uses canvas in HTML5 in conjunction with JavaScript to develop Flappy bird.

Key words：HTML5;JavaScript;Canvas;Game development;Flappy bird