曹學(xué)琪 尼瑪扎西

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

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

中圖分類(lèi)號(hào)：TP311.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2019）09-0132-02

0 引言

HTML5作為HTML的最新標(biāo)準(zhǔn)，增添新多媒體（video、audio）、新表單（keygen、output）、畫(huà)布（canvas）等元素，對(duì)網(wǎng)頁(yè)提供更好的頁(yè)面結(jié)構(gòu)。本文結(jié)合HTML5中的新元素結(jié)合JavaScript腳本，對(duì)網(wǎng)頁(yè)小游戲Flappy bird進(jìn)行設(shè)計(jì)和開(kāi)發(fā)。

1 整體方案設(shè)計(jì)

1.1 游戲功能

本文設(shè)計(jì)的Flappy bird小游戲基于B/S架構(gòu)，小游戲可以運(yùn)行在Windows、Android、Mac OS等操作系統(tǒng)的瀏覽器中。當(dāng)游戲運(yùn)行時(shí)，玩家通過(guò)點(diǎn)擊手機(jī)屏幕（在電腦上使用鼠標(biāo)點(diǎn)擊屏幕）來(lái)控制小鳥(niǎo)向上飛動(dòng)，每當(dāng)小鳥(niǎo)飛過(guò)一對(duì)管道的縫隙玩家游戲得分，當(dāng)小鳥(niǎo)碰到管道或墜落地面時(shí)游戲結(jié)束。

1.2 程序流程和框架

當(dāng)游戲玩家進(jìn)入游戲后，系統(tǒng)開(kāi)始加載圖片、音頻等資源文件，加載完畢后管道開(kāi)始向左運(yùn)動(dòng)。玩家通過(guò)點(diǎn)擊屏幕來(lái)控制小鳥(niǎo)的飛動(dòng)，游戲整體流程設(shè)計(jì)如圖1。

2 主要模塊設(shè)計(jì)

Flappy bird小游戲從主界面設(shè)計(jì)、屏幕適配模塊、小鳥(niǎo)模塊、管道模塊、碰撞檢測(cè)等模塊對(duì)主要的模塊進(jìn)行設(shè)計(jì)。

2.1 程序入口

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

2.2 屏幕適配模塊

在HTML中，分別用document的Element.clientWidth、Element.clientHeight屬性來(lái)表示當(dāng)前頁(yè)面的可視寬高屬性，為給玩家提供更好的游戲體驗(yàn)，本設(shè)計(jì)對(duì)人們使用的主流手機(jī)型號(hào)進(jìn)行屏幕適配，首先列出不同型號(hào)機(jī)型的屏幕尺寸。

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

2.3 小鳥(niǎo)模塊

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

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;

}

玩家點(diǎn)擊屏幕小鳥(niǎo)向上飛動(dòng)，同時(shí)播放小鳥(niǎo)飛動(dòng)聲音，通過(guò)小鳥(niǎo)縱軸坐標(biāo)變小可實(shí)現(xiàn)小鳥(niǎo)向上飛動(dòng)：

function birdUp（） {

mediaSwing.play（）;

birdY-=birdSpeedUp;

}

2.4 管道模塊

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

pipeArr.push（{

pX0：gameW，

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

}）;

2.5 碰撞檢測(cè)

設(shè)小鳥(niǎo)有四個(gè)屬性值：birdHead，birdFoot，birdLeft，birdRight。

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

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

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

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

2.6 游戲測(cè)試

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

3 結(jié)語(yǔ)

我通過(guò)這次對(duì)Flappy bird小游戲的開(kāi)發(fā)，加深了HTML、JavaScript等知識(shí)的認(rèn)識(shí)。通過(guò)這個(gè)小項(xiàng)目，將所學(xué)過(guò)的知識(shí)融會(huì)貫通，付出實(shí)踐，對(duì)以后的程序開(kāi)發(fā)設(shè)計(jì)提供了幫助。在開(kāi)發(fā)過(guò)程中我遇到了一些程序上的問(wèn)題，非常感謝對(duì)我提供指導(dǎo)和幫助的老師以及同學(xué)。

參考文獻(xiàn)

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

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

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

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

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

[6] 韓東陽(yáng)，張松玥，王巖.微信小程序“IT云文檔”探討[J].湖北農(nóng)機(jī)化，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