基于HTML5&JavaScript的游戲設計和實現

彭小紅，鄭瓊璇，鄧淦輝，林界

（廣東海洋大學信息學院，湛江524088）

基于HTML5&JavaScript的游戲設計和實現

彭小紅，鄭瓊璇，鄧淦輝，林界

（廣東海洋大學信息學院，湛江524088）

互聯網作為一個新興的媒介，逐漸成為網絡游戲、電子商務等大展拳腳的平臺。相比傳統的媒介而言，它最突出的優勢就是動畫的展示。而HTML5開發的應用具有多設備、跨平臺的優勢，可隨時更新的優勢、高標準化的優勢，使得HTML5游戲不斷發展和完善，逐漸成為主流。首先簡要介紹該游戲的技術、社會需求的可行性分析及游戲開發的目的和結構。然后從宏觀的角度介紹該游戲的設計原理、體系架構等；從微觀的角度介紹該游戲開發的關鍵點。最后簡要介紹利用以上原理和設計制作的游戲實例展示。

HTML5；游戲開發；網絡游戲；動畫；引擎

0　引言

在一個手機和平板電腦普及的時代，移動優先是無法阻止的趨勢。在這種多終端的環境下，開發Web游戲應用更加適應時代的潮流。正是移動技術的發展以及智能終端的普及和人們利用碎片化時間的行為模式，使得這種基于全新技術平臺和規則的HTML5游戲獲得巨大的市場空間。

為了滿足用戶在娛樂上的碎片化、可視化、社交化等方面的需求，設計和開發這款基于HTML5和JavaScript的Web游戲。實現玩家登錄、注冊賬號的功能，以記錄玩家在游戲中的行為，通過簡單的游戲方式、精美生動的游戲動畫效果使玩家得到視覺上和體驗上的享受，同時達到放松壓力的目的。游戲結束后，玩家可以查看自己在眾多玩家中的高分排行榜。若分值超過抽獎的設定值，即可參加本游戲的抽獎活動，以增加游戲和玩家之間的互動性［1］。

1　系統分析

1.1技術性可行性分析

互聯網作為一個新興的媒介，日漸成為網絡游戲大展拳腳的平臺?；贖TML5開發的游戲，具有跨設備、跨平臺進行使用的一大優勢，并且能自動適應設備，使其顯示效果最佳［2］。這與Native App依賴整個終端設備運行是有極大改良的。本游戲的一大特點是不借助任何框架，用原生的技術去實現，以達到透徹理解和掌握Web游戲開發的底層運作思想。

1.2社會需求可行性分析

隨著互聯網的迅速發展，無論是智能手機還是Web瀏覽器在生活中的使用頻率越來越高，HTML5游戲經過一直以來的發展和蛻變，在諸多方面已達到原生游戲的水平，被廣大玩家們所接受。其即點即玩的特性也成為了各大企業宣傳和傳播的一個手段，特別是在微信中的推廣速度，看似非常簡單的小游戲，卻在微信朋友圈中得到強勢的關注度，其易用性和跨設備性，讓每個人都可以輕易掌控。

1.3系統目的

HTML5游戲的內容以形態多樣化、真實還原化、趣味互動化為特點，滿足用戶在娛樂上的碎片化、可視化、社交化等方面的需求［3］。實現了用戶注冊、登錄功能，流暢連貫的開展游戲互動，查看高分排行榜等，并以抽獎活動的形式激發用戶的重玩度。

1.4系統結構

本游戲總為四大功能模塊，分別對應初始模塊、游戲模塊、結束模塊、抽獎模塊。其中初始模塊主要用于用戶的登錄和注冊功能；游戲模塊主要用于游戲進行中的所有玩法及分值計算；結束模塊主要用于排行榜的查詢以及當前用戶最高分的分值記錄；抽獎模塊主要用于用戶游戲分值達標時的抽獎互動。系統結構圖如圖1所示。

圖1　系統系統圖

2　系統總體設計方案

本游戲采用瀏覽器/服務器（B/S）模式，采用HTML5負責游戲的頁面渲染及顯示、JavaScript技術處理業務邏輯、動畫效果實現、分值計算等，相當于本游戲的驅動引擎，結合傳統的JSP+Servlet+JavaBean的后臺數據處理，MySQL承擔數據庫管理。各種技術相輔相成，共同組成了本游戲。

2.1體系架構設計

游戲采用三層體系結構，既包括瀏覽器、服務器、數據庫系統三大部分。本游戲分為數據服務器層、業務邏輯層（功能層）和表現層。本游戲體系架構圖如圖2所示。

2.2前端結構

游戲的前端結構分為三部分：控制中心、對象類、工具類。

圖2　游戲體系架構圖

為了方便整個游戲的操作和控制，將所有的動畫對象實例化放在一個總的控制中心上，控制中心就像導演一樣負責總的調控。是一個直接面向用戶的接口層，負責初始化整個游戲的對象類，并繪制所有的動畫。

而對象類的實例就是控制中心上的一個一個動畫，所以對象類的功能就是創建動畫。包含了?？麑ο?、魚對象、果實對象等。包含了每個對象的特殊屬性以及相關的初始化方法和繪制方法，需要用到該對象時，對象的實例化即可調控該對象去完成相應的任務。

工具類的主要功能即是為對象類提供動畫效果的方法，有擺動效果、旋轉效果、特效效果等，它們之間是不存在繼承關系的。本游戲前端結構圖如圖3所示。

3　系統詳細設計

JavaScript技術是負責游戲中所有業務邏輯處理，起到游戲引擎的作用。是整個游戲設計和實現的關鍵點。使用JavaScript技術可以更加清楚的理解和掌握開發HTML5游戲的底層運作原理和思想，極具學習價值。

3.1游戲動態效果設計

支持整個游戲的動畫效果均由循環gameloop函數所實現了，游戲的主要核心就是動畫，而該函數實現了控制整個游戲的動畫效果使其具有連貫性和順暢性。因此，該gameloop函數的動畫編程對于整個游戲編程來說是至關重要的。

圖3　前端結構圖

（1）實現原理

游戲編程中的動畫效果可以想象成是由一系列的幀去繪制實現的，好比是通過一系列預先生成的、靜態的幀圖像快速顯示，形成只有細微差別的圖像動畫［4-5］。在動畫效果編程中，我們需要考慮的是不同機器的性能是各有差別的，導致其機器系統和處理器能力也不同。為了使得實現一個平滑順暢的動畫效果，應該根據不同機器的性能來確定間隔多長時間去繪制下一幀。相當于，動畫運行的間隔時差即物體運動的速度，間隔時差的穩定即使得物體運動處于勻速狀態；間隔時差的有序增大即使得物體運動處于加速狀態；間隔時差的有序減弱即使得物體運動處于減速狀態。

（2）存在問題

瀏覽器自身存在的一個問題，當頁面離開當前網頁的標簽頁時，會導致頁面內容不執行，即處于停止狀態。然而動畫效果編程是依賴間隔時差的穩定性來實現了，頁面的停止狀態會導致動畫間隔時差的計算出現錯誤。

（3）實現方法

使用requestAnimFrame函數進行間隔時差的控制，其優點在于該函數可以在當前幀完成繪制后根據機器性能來確定間隔多長時間去繪制下一幀，可智能計算動畫效果的間隔時差［6］。然而使用requestAnim-Frame函數需要考慮不同瀏覽器的兼容性問題，同時需要考慮的是，該函數所產生的幀與幀之間的時間間隔是不固定的且不穩定，我們需要通過控制時間差的變動幅度來讓動畫效果允速進行。游戲動態效果設計的流程圖如4所示。

圖4　游戲動態效果設計流程圖

3.2對象實例化設計

對象類實例化相當于整個游戲中一個一個的對象，每個對象應包含自身特有的屬性，初始化方法以及繪制方法，該對象是實現路徑設置、動畫效果的基礎前提。而繪制可以通過HTML5中Canvas標簽的一些繪制API實現對象的繪制，也可以使用切分割好的一系列圖片通過輪播序列幀一幀一幀的繪制［7］。

（1）實現原理：

定義一個對象類，對這個類定義自身特有的屬性，為該類定義初始化方法、繪制方法。游戲開始時，通過對象類實例化對象，初始化該對象，并將該對象的繪制方法放置于gameloop函數中循環繪制。對象類實例化設計的流程圖如圖5所示。

3.3動畫路徑設置設計

為了讓游戲的動畫效果更加生氣，更加形象，需要為游戲的對象設置路徑了。在整個游戲中基本的移動方式是deltaTime提供的勻速直線運動。整個畫面的對象在不設置路徑前都是處于勻速運動狀態。deltaTime是保證游戲中的動畫流暢連貫的重要變量，一旦需要用到隨時間變化的變量，或者改變物體運動速度的變量時，一定要使用deltaTime來使得這整個變動的過程保持流暢性和連貫性。以鼠標控制對象的路徑設置實現為例子來說明。

圖5　對象實例化設計流程圖

（1）實現原理

①監測鼠標的動作，獲得鼠標與觸發事件的對象相關的鼠標位置的坐標值。

②獲取該鼠標移動時的坐標值。

③獲取對象當前位置的坐標值。

④使得對象移動的位置要跟隨鼠標移動到的位置。即實現一個源坐標值按一定的速度趨向于一個目標坐標值。

換而言之，即是鼠標移動到哪，對象會一定的速度比例移動到鼠標的位置，從而實現對象隨鼠標移動的動畫路徑設置。

（2）實現方法

使用lerpDistance函數，即一個源坐標值趨向于一個目標坐標值的函數。含三個參數：目標值、當前值、移動速度。其中delta是目標值和當前值的距離差，返回一個按一定距離差乘以移動速度的比例去趨向于目標坐標值。

3.4基于數學原理的動畫效果設計

在游戲制作中，為了使得游戲的動畫更類似于現實生活中的實際情況，單單實現動畫路徑設置是遠遠不夠的。例如在海底世界中，?？歉鶕娴牟▌佣笥移〉?，為了使得海底的動畫更加真實，應該有一個?？〉膭赢?。除此以外，在鼠標控制魚對象移動時，為了更加具有真實性，應該使得指向鼠標的大魚旋轉其身體到達鼠標的位置。而這一類動畫效果的實現離不開數學原理了。以擺動動畫和旋轉動畫為例來說明。

1、擺動動畫效果的設計

（1）實現原理

利用二次貝塞爾曲線實現擺動動畫，使得對象形成一個弧度，設置起始點、控制點的坐標固定，結束點進行左右搖擺，即可形成擺動效果。其中，結束點的坐標移動需要利用正弦函數控制擺動的振幅，使得對象擺動得有秩序且畫面平滑。

（2）基本原理

①二次貝塞爾曲線

貝塞爾曲線，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋［8］。二次貝塞爾曲線需要兩個點。第一個點是用于二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。其中二次貝塞爾曲線的示例圖如圖6所示。

圖6　二次貝塞爾曲線的示例圖

②正弦函數

正弦定理是三角學中的一個基本定理，它指出“在任意一個平面三角形中，各邊和它所對角的正弦值的比相等且等于外接圓半徑的2倍”，即a/sinA=b/sinB=c/sinC=2r=D（r為外接圓半徑，D為直徑）。其中alpha即是正弦曲線的x坐標，會隨著時間的增加而增加。l即是正弦曲線的y坐標，隨著x坐標的增加，會在［1，-1］之間取值，從而控制擺動效果的振幅。其中正弦函數的示例圖如圖7所示：

圖7　正弦函數的示例圖

2、旋轉動畫效果的設計

（1）實現原理

根據極坐標的數學原理，逆時針旋轉180度，角度則為-π的弧度值，順時針旋轉旋轉180度，角度則為+ π的弧度值。對象1和對象2的坐標值之間的坐標差會形成一個三角形，三角形的夾角即是對象1相對于對象2的角度，因此對象2自身的旋轉角度應該追隨這個坐標差所形成的角度（即三角形的夾角）。

4　實例應用

下面分模塊展示基于HTML5和JavaScript的游戲開發案例，以泡泡魚為案例展示。

4.1初始模塊

該模塊包含玩家的注冊、登錄功能。初始模塊界面展示如圖8所示。

圖8　初始模塊展示

4.2游戲模塊

游戲模塊即游戲進行中的頁面，游戲模塊界面展示如圖9所示。

圖9　游戲模塊展示

4.3結束模塊

游戲結束后，所得分值會傳送給后臺。后臺將當前分值與該玩家的最高分值做對比，若當前分值高于以往的最高分，則將當前分值存入數據庫；否則不做任何處理。玩家亦可通過排行榜功能查看眾多玩家中的前五個最高分值。結束模塊界面展示如圖10所示，查看排行榜界面如圖11所示。

圖10　結束模塊展示

圖11　查看排行榜的展示

4.4抽獎模塊

游戲結束后，當該玩家的分值超過參與抽獎活動的某個設定值時，玩家可進入抽獎頁面進行抽獎。抽獎模塊界面展示如圖12所示。

圖12　抽獎模塊展示

5　結語

眾所周知，由于互聯網的快速發展，不管是前端還是后臺涌現了各種便于開發的技術框架，但是萬變不離其宗，任何框架的底層支持都是依賴基礎原理了。因此，本文以學習探索的角度出發，不借助任何技術框架來實現該Web游戲，從而達到徹底理解和掌握游戲運作原理的目的。

除此以外，當今的網絡推廣，已不再是枯燥無味的文字描述，而是通過精美的圖片、具有回饋性的動畫效果來展示，而此時HTML5游戲無疑是最佳的選擇之一，不受設備的限制，即點即玩，已然成為當今人類娛樂的首選方式。本文基于HTML5&JavaScript的游戲設計和實現，是現今社交手段的重要體現，通過HTML5游戲達到互相交流，頻繁互動的社交方式，以增加人與人之間的聯系度。并且滿足了人們利用碎片化時間的行為模式，HTML5游戲在現今的各種媒體傳播及商業模式下將有無限可能和發展空間。

［1］劉津，李月.破繭成蝶——用戶體驗設計師的成長之路［M］.北京：人民郵電出版社，2014.

［2］馮科融，王和興.HTML5網頁游戲分析［J］.網絡與通信，2012（24）：71-72.

［3］Fulton S，Fulton J.HTML5 Canvas［M］.USA:O'Reilly Media，2011.

［4］Grady M.Functional Programming Using JavaScript and the HTML5 Canvas Element［J］.Journal of Computing Sciences in Colleges，2010，26:97-105．

［5］Freeman E，Robson E.Head First HTML5 Programming［M］.USA:O'Reilly Media，2011.

［6］Nicholas C，Zakas.JavaScript高級程序設計［M］.北京：人民郵電出版社，2012.

［7］Lubbers P，Albers B，Salim F.HTML5高級程序設計［M］.北京：人民郵電出版社，2011.

［8］宋宇，譚浩．游戲引擎開發技術簡析［J］．福建電腦，2007（8）：31-32．

PENG Xiao-hong，ZHENG Qiong-xuan，DENG Gan-hui，LIN Jie

（College of Information Technology，Guangdong Ocean University，Zhanjiang 524088）

The Internet as a new media has gradually become online games，e-commerce platform.To flex its muscles compared to the traditional media，it is the most prominent advantage is the animation display.And with the development of the HTML5 application of multi device，cross platform advantages，can update the advantages of high standard，the HTML5 game development and perfection，has gradually become the mainstream.First of all，briefly introduces the technology of the game，the feasibility analysis of social demand and the purpose and structure of the game development.Then introduces the design principle and architecture of the game from a macro perspective，and introduces the key points of the game development from the micro angle.Finally，introduces the use of the above principles and design of the production of the game show.

HTML5；Game Development；Online Game；Animation；Engine

1007-1423（2016）25-0052-07DOI：10.3969/j.issn.1007-1423.2016.25.012

彭小紅（1968-），女，廣東高州人，碩士研究生，教授，研究方向為智能控制技術及應用

鄭瓊璇（1995-），女，廣東汕頭人，本科，學生，研究方向為計算機科學與技術

鄧淦輝（1993-），男，廣東東莞人，本科，學生，研究方向為計算機科學與技術

林界（1994-），男，廣東揭陽人，本科，學生，研究方向為計算機科學與技術

2016-06-21

2016-08-08Design and Implement of the Game Based on HTML5 and JavaScript

廣東海洋大學2015教學成果培育項目（No.GDOU2014040638）、廣東海洋大學重點教改項目（No.XJG201401）、廣東省大學生創新創業訓練計劃項目（No.CXXL2015024）