基于HTML5的海底魚群大作戰(zhàn)游戲設(shè)計(jì)與實(shí)現(xiàn)

杜佳玲 徐建華 杜雨航 張成

摘要：網(wǎng)頁(yè)上的游戲常采用Flash技術(shù)實(shí)現(xiàn)，但隨著HTML5技術(shù)的發(fā)展，越來(lái)越多的瀏覽器不再支持Flash。針對(duì)當(dāng)下Flash不再更新的問題，設(shè)計(jì)并實(shí)現(xiàn)了HTML5的海底魚群大作戰(zhàn)游戲，采用HTML5、JavaScript、Canvas等前端相關(guān)技術(shù)進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)，使該游戲不用依靠Flash便能在網(wǎng)頁(yè)上實(shí)現(xiàn)其動(dòng)畫效果。該文首先結(jié)合HTML5的相關(guān)發(fā)展背景，提出該課題研究背景及其意義，接著介紹關(guān)于課題中會(huì)使用到的HTML5相關(guān)技術(shù)及其新特性，之后對(duì)該游戲進(jìn)行可行性分析，同時(shí)設(shè)計(jì)出海底魚群大作戰(zhàn)游戲的整體游戲框架并且完成相關(guān)功能模塊，最終根據(jù)設(shè)計(jì)方案對(duì)該游戲功能進(jìn)行實(shí)現(xiàn)并且對(duì)課題項(xiàng)目進(jìn)行測(cè)試。

關(guān)鍵詞：HTML5;游戲;Canvas;海底魚群

中圖分類號(hào)：TP391 ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）31-0097-03

1 引言

隨著HTML5技術(shù)的不斷進(jìn)步，同時(shí)帶動(dòng)了游戲行業(yè)的快速發(fā)展，游戲在人們生活中隨處可見。目前較為成熟的網(wǎng)頁(yè)技術(shù)仍以Flash為平臺(tái)為主，但隨著HTML5技術(shù)的快速發(fā)展，F(xiàn)lash已經(jīng)被越來(lái)越多瀏覽器所禁用。正是由于HTML5技術(shù)的日益成熟，網(wǎng)頁(yè)中較多的功能效果將會(huì)采用HTML5技術(shù)來(lái)實(shí)現(xiàn)。目前HTML5技術(shù)在支持音頻、圖像、動(dòng)畫以及與設(shè)備交互上具有明顯優(yōu)勢(shì)，又因?yàn)镠TML5具有強(qiáng)大的跨平臺(tái)能力，使得其成為最熱門的互聯(lián)網(wǎng)應(yīng)用開發(fā)技術(shù)之一。本文將采用HTML5技術(shù)來(lái)完成海底魚群大作戰(zhàn)游戲的設(shè)計(jì)與開發(fā)。

2 關(guān)鍵技術(shù)

2.1 HTML5技術(shù)

自從最原始的HTML創(chuàng)建以來(lái)，其應(yīng)用于Web上的效果非常明顯，網(wǎng)頁(yè)效果的展示也變得越來(lái)越多元化，HTML5不僅是Web的基礎(chǔ)，也是構(gòu)建互聯(lián)網(wǎng)網(wǎng)頁(yè)結(jié)構(gòu)的主要語(yǔ)言。HTML5被認(rèn)定將成為下一代互聯(lián)網(wǎng)的標(biāo)準(zhǔn)，也會(huì)是構(gòu)建和呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的語(yǔ)言方式。相比于HTML4，HTML5為網(wǎng)頁(yè)提供了許多新特性，這些新特性將作為HTML5開創(chuàng)Web時(shí)代的基石。

2.2 Canvas畫布

Canvas作為HTML5中新元素，使得用戶可以通過與應(yīng)用數(shù)據(jù)對(duì)象的圖形進(jìn)行交互操作，不僅使得用戶更能理解，而且能帶給用戶直觀的感受。Canvas元素的出現(xiàn)可以直接使用硬件來(lái)完成渲染工作，若直接使用該元素將可以完成2D圖形渲染，如果再結(jié)合WebGL等語(yǔ)言的使用還能完成3D圖形渲染，讓頁(yè)面變得豐富。Canvas元素為HTML5中能夠支持高性能的動(dòng)畫提供方法，讓網(wǎng)頁(yè)無(wú)需安裝Flash等插件便可以在瀏覽器中將圖形或動(dòng)畫圖像直接展示。

2.3多媒體元素

HTML5中多媒體元素能夠支持音頻視頻是它最大特色，其中主要為多媒體進(jìn)行音頻、視頻使用支持的是<audio>、<video>這兩個(gè)標(biāo)簽，該標(biāo)簽使得網(wǎng)頁(yè)內(nèi)無(wú)需安裝插件就可以完成音頻、視頻的播放。新增的元素使得音頻、視頻文件在瀏覽器中的運(yùn)行擺脫了對(duì)插件的依賴，減少了瀏覽器的污染程序，加快了加載頁(yè)面的速度，擴(kuò)展了互聯(lián)網(wǎng)中對(duì)于多媒體技術(shù)的發(fā)展空間。

2.4 WebSocket通信

HTML5定義了WebSocket協(xié)議，使瀏覽器與服務(wù)端能夠進(jìn)行實(shí)時(shí)通信，還能節(jié)省服務(wù)端的帶寬資源。

3 海底魚群大作戰(zhàn)游戲分析

3.1 技術(shù)可行性分析

正是由于HTML5技術(shù)的發(fā)展為海底魚群大作戰(zhàn)游戲?qū)崿F(xiàn)提供了技術(shù)可行性，這其中可概括為三方面的內(nèi)容：HTML5規(guī)范的發(fā)展和完善決定了移動(dòng)終端網(wǎng)絡(luò)游戲的流行性;瀏覽器對(duì)HTML5新功能和特點(diǎn)的支持為基于網(wǎng)頁(yè)游戲的應(yīng)用程序提供環(huán)境和平臺(tái);互聯(lián)網(wǎng)公司的參與為網(wǎng)頁(yè)游戲的發(fā)展提供了強(qiáng)大的技術(shù)支持。

3.2 推廣和應(yīng)用的可行性分析

網(wǎng)頁(yè)游戲的流行是有一定的原因，其輕便、跨平臺(tái)性、無(wú)需占用較大的內(nèi)存，這便使得其越來(lái)越受歡迎。根據(jù)易觀智庫(kù)數(shù)據(jù)統(tǒng)計(jì)，2019年中國(guó)網(wǎng)頁(yè)游戲市場(chǎng)規(guī)模達(dá)到109億元，2020年雖降至99億元，但其所占規(guī)模也是巨大的。之前的網(wǎng)頁(yè)游戲大部分都是基于PC端，且需要Flash的承載，而目前HTML5技術(shù)在移動(dòng)端也有了巨大成就，且其自帶的畫圖等輕便功能將為手機(jī)端網(wǎng)頁(yè)游戲的推行產(chǎn)生重要的影響。目前，HTML5的2D繪畫效果與Flash效果相媲美，但其耗電和穩(wěn)定性等功能相比于Flash則是相當(dāng)大的改進(jìn)。

3.3 用戶體驗(yàn)分析

網(wǎng)頁(yè)游戲的制作完成服務(wù)的將是用戶，而用戶體驗(yàn)則是用戶在玩此游戲時(shí)的主觀感受。以人為本的游戲設(shè)計(jì)理念將是網(wǎng)頁(yè)等游戲發(fā)展的長(zhǎng)久之計(jì)，一個(gè)不以用戶為導(dǎo)向的產(chǎn)品將不會(huì)受到用戶的歡迎，特別是在更具競(jìng)爭(zhēng)力的IT行業(yè)。本文的海底魚群大作戰(zhàn)游戲則需要將用戶體驗(yàn)放在第一位，并且還需將HTML5的交互性體現(xiàn)出來(lái)。本文的用戶體驗(yàn)主要還是體現(xiàn)在以下方面：1）豐富的視覺效果;2）游戲體驗(yàn)時(shí)間;3）網(wǎng)頁(yè)的高效性。其中網(wǎng)頁(yè)的高效性是指除了視覺效果之外，良好的Web應(yīng)用環(huán)境也能提高用戶體驗(yàn)。如果為了做出酷炫的視覺效果，忽略掉網(wǎng)頁(yè)加載時(shí)間等問題，用戶可能會(huì)放棄此網(wǎng)頁(yè)游戲。由此可見，高速、方便、快捷的網(wǎng)頁(yè)對(duì)于用戶體驗(yàn)的重要性。

4 海底魚群大作戰(zhàn)游戲設(shè)計(jì)與實(shí)現(xiàn)

4.1 游戲框架設(shè)計(jì)

通過對(duì)HTML5新特性的了解，遵循網(wǎng)頁(yè)游戲制作結(jié)構(gòu)清晰、視圖控制等相分離的原則，設(shè)計(jì)出海底魚群大作戰(zhàn)游戲的游戲框架，其基本流程如圖1所示：

其中可以將海底魚群大作戰(zhàn)游戲流程大致分為三大過程：初始化——主循環(huán)——結(jié)束。

1）加載資源與配置

在剛剛開始啟動(dòng)游戲時(shí)，首先加載的是運(yùn)行海底魚群大作戰(zhàn)游戲必備的各類基礎(chǔ)資源和配置。

2）主循環(huán)

加載資源和配置后后，進(jìn)入海底魚群大作戰(zhàn)游戲的主循環(huán)部分，點(diǎn)擊開始游戲后便能進(jìn)入游戲循環(huán)中。海底魚群大作戰(zhàn)游戲則通過鍵盤來(lái)控制游戲中鯊魚的上下左右移動(dòng)，空格鍵來(lái)控制鯊魚的獵殺行動(dòng)。海底魚群大作戰(zhàn)游戲中，按下空格鍵后，鯊魚就會(huì)進(jìn)行發(fā)射子彈的行動(dòng)，然后更新是否射中反方魚群。事實(shí)上，整個(gè)過程并不一定需要等到外部設(shè)備的操作，有可能是由內(nèi)部游戲的其他對(duì)象引發(fā)的，比如說(shuō)鯊魚碰到反方任意一條魚之后就會(huì)消失一條生命值。事實(shí)上，這部分也可以看出游戲的主要邏輯處理部分，一旦滿足退出游戲邏輯，那么游戲主循環(huán)就結(jié)束，從而結(jié)束游戲。為提高用戶視覺體驗(yàn)，游戲場(chǎng)景需要被渲染出來(lái)。

3）結(jié)束

海底魚群大作戰(zhàn)游戲中是當(dāng)鯊魚三條生命值都結(jié)束時(shí)則退出游戲循環(huán)，代表游戲結(jié)束。

4.2 游戲主界面布局設(shè)計(jì)

海底魚群大作戰(zhàn)游戲的游戲頁(yè)面是通過用戶登錄后進(jìn)入，游戲開始的整個(gè)頁(yè)面結(jié)構(gòu)布局如圖2所示：

其中生命值處會(huì)標(biāo)記每局游戲中會(huì)有三條生命值，當(dāng)前狀態(tài)處的圖標(biāo)則是當(dāng)前生命值中剩余的狀態(tài)，得分?jǐn)?shù)則是打敗小魚的分?jǐn)?shù)值，其中打敗黃色的小魚得分?jǐn)?shù)為100，打敗綠色小魚的得分?jǐn)?shù)為200。

4.3 海底魚群大作戰(zhàn)游戲?qū)崿F(xiàn)

海底魚群大作戰(zhàn)游戲中主要包括一只鯊魚、兩只反方魚、子彈和爆炸效果。

鯊魚的繪制，鯊魚在此游戲中將其設(shè)置為HeroFish，由用戶進(jìn)行控制，操作鯊魚進(jìn)行躲避反方魚，或發(fā)射子彈射殺反方魚。

兩只反方魚分別為黃色的小魚和綠色的小魚，兩種小魚只創(chuàng)建一個(gè)Sprite類，每只魚都有自己的一系列幀設(shè)置來(lái)顯示。

雙方魚群都會(huì)發(fā)射子彈，子彈有一定運(yùn)行速度且方法決定了發(fā)射的方向，當(dāng)子彈碰到魚群時(shí)，將使用爆炸幀來(lái)代替魚群的位置。其子彈類的相關(guān)代碼如下：

為了滿足用戶體驗(yàn)需求，海底魚群大作戰(zhàn)游戲邏輯事件處理都會(huì)在服務(wù)器端進(jìn)行，瀏覽器端通過JavaScript腳本接受用戶的點(diǎn)擊或鍵盤操作事件，將這些事件處理成相對(duì)應(yīng)的命令后并把消息傳遞發(fā)送給服務(wù)器端，游戲邏輯處理程序得到結(jié)果再傳給瀏覽器端，由此來(lái)改變游戲狀態(tài)。圖3為渲染出的海底魚群大作戰(zhàn)游戲場(chǎng)景之一。

5 結(jié)束語(yǔ)

為了讓游戲玩家能夠暢快地體驗(yàn)海底魚群大作戰(zhàn)游戲所帶來(lái)的快樂，本文采用了HTML5先進(jìn)技術(shù)予以實(shí)現(xiàn)，摒棄了Flash需要安裝插件的弊端。最終開發(fā)的海底魚群大作戰(zhàn)游戲具有跨平臺(tái)、方便使用、高效等特性，并且能夠兼容PC機(jī)、智能手機(jī)和PAD等不同的終端。今后，為進(jìn)一步提高游戲的實(shí)時(shí)性和趣味性，考慮增加魚群的種類以及采用GPU加速技術(shù)等。

參考文獻(xiàn)：

[1] 陽(yáng)曉霞，譚衛(wèi).基于HTML5技術(shù)的游戲開發(fā)與實(shí)現(xiàn)[J].信息與電腦（理論版），2019（9）：69-71.

[2] 徐曉.基于HTML5的闖關(guān)游戲式課程教學(xué)考核的設(shè)計(jì)和實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2019（3）：42-44.

[3] 和歆雨.基于HTML5的網(wǎng)頁(yè)游戲的設(shè)計(jì)與開發(fā)[J].中國(guó)戰(zhàn)略新興產(chǎn)業(yè)，2018（4）：94-95.

[4] 馬雄，趙凌之.HTML5技術(shù)在藝術(shù)檔案數(shù)字化設(shè)計(jì)中的應(yīng)用[J].技術(shù)與市場(chǎng)，2020，27（12）：79-80.

[5] 施瑤.基于HTML5的貪吃蛇游戲設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦，2018，34（7）：118-119.

[6] 黎志雄，黃彥湘，陳學(xué)中.基于HTML5游戲開發(fā)的研究與實(shí)現(xiàn)[J].東莞理工學(xué)院學(xué)報(bào)，2014，21（5）：48-53.

[7] 董春俠，司占軍.基于HTML5技術(shù)的五子棋游戲的設(shè)計(jì)與開發(fā)[J].微型機(jī)與應(yīng)用，2017，36（11）：12-14.

[8] 王文建.HTML5 Canvas下交互式圖形模式的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西北大學(xué)，2019.

[9] 董娜.基于HTML5技術(shù)的移動(dòng)教學(xué)游戲設(shè)計(jì)和開發(fā)[J].電腦知識(shí)與技術(shù)，2019，15（2）：33-35.

【通聯(lián)編輯：梁書】

收稿日期：2021-05-21

基金項(xiàng)目：三江學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃立項(xiàng)項(xiàng)目——面向AI時(shí)代的小學(xué)階段學(xué)生編程教育方法研究;三江學(xué)院畢業(yè)設(shè)計(jì)（論文）重點(diǎn)課題（2021屆）

作者簡(jiǎn)介：杜佳玲（1997—），女，2017級(jí)網(wǎng)絡(luò)工程專業(yè)學(xué)生;徐建華（1979—），通信作者，男，江蘇南通人，副教授，研究方向?yàn)橛?jì)算機(jī)仿真技術(shù)、人工智能技術(shù);杜雨航（2000—），女，軟件工程專業(yè)學(xué)生;張成（2002—），男，財(cái)務(wù)管理專業(yè)學(xué)生。