基于HTML5的海底魚群大作戰游戲設計與實現

杜佳玲 徐建華 杜雨航 張成

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

關鍵詞：HTML5;游戲;Canvas;海底魚群

中圖分類號：TP391 ? ?文獻標識碼：A

文章編號：1009-3044（2021）31-0097-03

1 引言

隨著HTML5技術的不斷進步，同時帶動了游戲行業的快速發展，游戲在人們生活中隨處可見。目前較為成熟的網頁技術仍以Flash為平臺為主，但隨著HTML5技術的快速發展，Flash已經被越來越多瀏覽器所禁用。正是由于HTML5技術的日益成熟，網頁中較多的功能效果將會采用HTML5技術來實現。目前HTML5技術在支持音頻、圖像、動畫以及與設備交互上具有明顯優勢，又因為HTML5具有強大的跨平臺能力，使得其成為最熱門的互聯網應用開發技術之一。本文將采用HTML5技術來完成海底魚群大作戰游戲的設計與開發。

2 關鍵技術

2.1 HTML5技術

自從最原始的HTML創建以來，其應用于Web上的效果非常明顯，網頁效果的展示也變得越來越多元化，HTML5不僅是Web的基礎，也是構建互聯網網頁結構的主要語言。HTML5被認定將成為下一代互聯網的標準，也會是構建和呈現互聯網內容的語言方式。相比于HTML4，HTML5為網頁提供了許多新特性，這些新特性將作為HTML5開創Web時代的基石。

2.2 Canvas畫布

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

2.3多媒體元素

HTML5中多媒體元素能夠支持音頻視頻是它最大特色，其中主要為多媒體進行音頻、視頻使用支持的是<audio>、<video>這兩個標簽，該標簽使得網頁內無需安裝插件就可以完成音頻、視頻的播放。新增的元素使得音頻、視頻文件在瀏覽器中的運行擺脫了對插件的依賴，減少了瀏覽器的污染程序，加快了加載頁面的速度，擴展了互聯網中對于多媒體技術的發展空間。

2.4 WebSocket通信

HTML5定義了WebSocket協議，使瀏覽器與服務端能夠進行實時通信，還能節省服務端的帶寬資源。

3 海底魚群大作戰游戲分析

3.1 技術可行性分析

正是由于HTML5技術的發展為海底魚群大作戰游戲實現提供了技術可行性，這其中可概括為三方面的內容：HTML5規范的發展和完善決定了移動終端網絡游戲的流行性;瀏覽器對HTML5新功能和特點的支持為基于網頁游戲的應用程序提供環境和平臺;互聯網公司的參與為網頁游戲的發展提供了強大的技術支持。

3.2 推廣和應用的可行性分析

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

3.3 用戶體驗分析

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

4 海底魚群大作戰游戲設計與實現

4.1 游戲框架設計

通過對HTML5新特性的了解，遵循網頁游戲制作結構清晰、視圖控制等相分離的原則，設計出海底魚群大作戰游戲的游戲框架，其基本流程如圖1所示：

其中可以將海底魚群大作戰游戲流程大致分為三大過程：初始化——主循環——結束。

1）加載資源與配置

在剛剛開始啟動游戲時，首先加載的是運行海底魚群大作戰游戲必備的各類基礎資源和配置。

2）主循環

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

3）結束

海底魚群大作戰游戲中是當鯊魚三條生命值都結束時則退出游戲循環，代表游戲結束。

4.2 游戲主界面布局設計

海底魚群大作戰游戲的游戲頁面是通過用戶登錄后進入，游戲開始的整個頁面結構布局如圖2所示：

其中生命值處會標記每局游戲中會有三條生命值，當前狀態處的圖標則是當前生命值中剩余的狀態，得分數則是打敗小魚的分數值，其中打敗黃色的小魚得分數為100，打敗綠色小魚的得分數為200。

4.3 海底魚群大作戰游戲實現

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

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

兩只反方魚分別為黃色的小魚和綠色的小魚，兩種小魚只創建一個Sprite類，每只魚都有自己的一系列幀設置來顯示。

雙方魚群都會發射子彈，子彈有一定運行速度且方法決定了發射的方向，當子彈碰到魚群時，將使用爆炸幀來代替魚群的位置。其子彈類的相關代碼如下：

為了滿足用戶體驗需求，海底魚群大作戰游戲邏輯事件處理都會在服務器端進行，瀏覽器端通過JavaScript腳本接受用戶的點擊或鍵盤操作事件，將這些事件處理成相對應的命令后并把消息傳遞發送給服務器端，游戲邏輯處理程序得到結果再傳給瀏覽器端，由此來改變游戲狀態。圖3為渲染出的海底魚群大作戰游戲場景之一。

5 結束語

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

參考文獻：

[1] 陽曉霞，譚衛.基于HTML5技術的游戲開發與實現[J].信息與電腦（理論版），2019（9）：69-71.

[2] 徐曉.基于HTML5的闖關游戲式課程教學考核的設計和實現[J].計算機時代，2019（3）：42-44.

[3] 和歆雨.基于HTML5的網頁游戲的設計與開發[J].中國戰略新興產業，2018（4）：94-95.

[4] 馬雄，趙凌之.HTML5技術在藝術檔案數字化設計中的應用[J].技術與市場，2020，27（12）：79-80.

[5] 施瑤.基于HTML5的貪吃蛇游戲設計與實現[J].福建電腦，2018，34（7）：118-119.

[6] 黎志雄，黃彥湘，陳學中.基于HTML5游戲開發的研究與實現[J].東莞理工學院學報，2014，21（5）：48-53.

[7] 董春俠，司占軍.基于HTML5技術的五子棋游戲的設計與開發[J].微型機與應用，2017，36（11）：12-14.

[8] 王文建.HTML5 Canvas下交互式圖形模式的設計與實現[D].西安：西北大學，2019.

[9] 董娜.基于HTML5技術的移動教學游戲設計和開發[J].電腦知識與技術，2019，15（2）：33-35.

【通聯編輯：梁書】

收稿日期：2021-05-21

基金項目：三江學院大學生創新創業訓練計劃立項項目——面向AI時代的小學階段學生編程教育方法研究;三江學院畢業設計（論文）重點課題（2021屆）

作者簡介：杜佳玲（1997—），女，2017級網絡工程專業學生;徐建華（1979—），通信作者，男，江蘇南通人，副教授，研究方向為計算機仿真技術、人工智能技術;杜雨航（2000—），女，軟件工程專業學生;張成（2002—），男，財務管理專業學生。