基于HTML5游戲開發(fā)的研究與實現(xiàn)

黎志雄 黃彥湘 陳學中

(東莞理工學院 計算機學院，廣東東莞 523808)

HTML5的前身是Web Applications 1.0，由WHATWG于2004年提出。2007年它被W3C接納，并于2008年1月22日發(fā)布第一份正式草案［1］。HTML5將成為 HTML、XHTML以及 HTML DOM的新標準。

HTML5的迅速發(fā)展，帶動了游戲產(chǎn)業(yè)的崛起。開發(fā)者憑借HTML5制作出創(chuàng)收豐富的游戲作品。其中，磊友科技推出的《修仙三國》，推出當日便迎來982位玩家，付費率8.3%，總收入12 390元，表現(xiàn)搶眼，引來眾多HTML5游戲開發(fā)人士的圍觀，更有人將其稱為HTML5游戲破局之戰(zhàn)。HTML5在游戲領域的突破，包含兩個要素:分別是新HTML5標簽和可供瀏覽器托管的JavaScript應用利用的新編程界面［2］。

傳統(tǒng)基于flash網(wǎng)頁游戲流行的原因，是flash支持視頻播放、音頻播放與錄制等。如今，HTML5新引入的canvas標簽同樣具備了游戲開發(fā)的條件，而且HTML5游戲開發(fā)還具備三點優(yōu)勢:第一，HTML5游戲能夠移植至各種采用HTML5界面的設備;第二，HTML5平臺覆蓋面廣，HTML5能夠兼容采用各種操作系統(tǒng)的個人電腦，所有采用Android和iOS系統(tǒng)的手機設備，及其他任何連網(wǎng)智能設備;第三，HTML5具有開放性，HTML5不為單個公司所有或控制，這使得HTML5擁有比其他類似平臺更持久的生命力［3］。平臺不存在單一的既得利益，相反，HTML5和互聯(lián)網(wǎng)平臺的開發(fā)者存在共享利益。

為此，筆者將深入探究HTML5中canvas標簽的特性，結合JavaScript及CSS 3.0等技術，以實際游戲開發(fā)例子進行論述。

1 主要技術支持

1.1 游戲涉及到的HTML5特性

HTML5的時代越來越近，其中最值得開發(fā)者和用戶留意的新特性，莫過于canvas的功能，它能在當前的IE9，Chrome，F(xiàn)ireFox等多種瀏覽器中使用，是目前HTML5中富客戶端動畫效果的實現(xiàn)方式，也是HTML5與flash對抗的資本。只要用戶使用支持HTML5的瀏覽器，便可以不安裝flash插件，大大優(yōu)化用戶體驗。

官方對canvas元素標簽的定義為:canvas可以用來繪制圖形、游戲圖案或者其他圖形圖案，允許使用腳本動態(tài)渲染點陣圖像。開發(fā)者可以在HTML5中使用JavaScript去繪制需要的圖形，包括文字、圖片、線等。Canvas使用的是canvas 2D API去繪制圖形，大部分瀏覽器都支持2D canvas［4］。

下面是canvas的聲明:

＜canvas id="mycanvas"width="800"height="600"class="bg" ＞

＜/canvas＞

Canvas 2D API對象允許開發(fā)者繪制各種圖片和圖形。調用時，需要通過getContext方法獲得上下文，這個方法有一個參數(shù)，目前是2d，調用的代碼如下:

var myCanvas=document.getElementById(“myCanvas”);

var context=myCanvas.getContext(“2d”)。

Canvas標簽是基于HTML5游戲開發(fā)的關鍵，運用canvas標簽要注意以下三點:1)而大多數(shù)Canvas繪圖API都沒有定義在 ＜canvas＞元素本身，而是定義在通過畫布的getContext()方法獲得的一個“繪圖環(huán)境”對象上。2)Canvas API也使用了路徑的表示法［5］。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數(shù)字的字符串，比如調用 beginPath()和 arc()方法。3)canvas標簽，允許用其所帶有JavaScript的API在畫布上面畫圖，從而實現(xiàn)不用插件也可以在瀏覽器中實現(xiàn)動畫。

1.2 游戲涉及到的Javascript特性

JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應用戶的各種操作［6］。

本游戲中涉及到較多的JavaScript特性。其中主要是鼠標事件，如:

onMouseOver當鼠標移動到某對象范圍的上方時觸發(fā)的事件;

onMouseMove鼠標移動時觸發(fā)的事件;

onMouseOut當鼠標離開某對象范圍時觸發(fā)的事件;

onKeyPress當鍵盤上的某個鍵被按下并且釋放時觸發(fā)的事件;

onKeyDown當鍵盤上某個按鍵被按下時觸發(fā)的事件;

onKeyUp當鍵盤上某個按鍵被按放開時觸發(fā)的事件。

同時，也使用了DOM結構。DOM是Document Object Model(文檔對象模型)的簡稱，它是讓javascript與頁面交互的一種方式，能夠動態(tài)修改文檔中的節(jié)點、元素、屬性等［7］。

1.3 游戲涉及到的CSS3特性

CSS即層疊樣式表 (Cascading Stylesheet)。在網(wǎng)頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式［8］。

2 游戲設計

2.1 游戲邏輯設計

本網(wǎng)頁游戲名為《灰太狼捕羊記》，是一款闖關類的游戲。涉及到的對象為家喻戶曉的喜羊羊與灰太狼形象，適合年齡較小的玩家。由游戲名字容易得知，游戲以灰太狼捕捉喜羊羊作為游戲的線索，游戲成功與否在于灰太狼能否捕捉到喜羊羊，在此前提下，作者為游戲設定了灰太狼必須在特定時間內沿著特定的軌跡移動的規(guī)則，否則游戲失敗。這便是游戲的邏輯，本游戲暫時有4個關卡，每個關卡游戲邏輯一致，難度依次提升，符合傳統(tǒng)闖關類游戲的特點。

為了使游戲更有可玩性，作者對游戲進行優(yōu)化。主要利用HTML5、CSS3與Javascript技術。作者利用CSS3圓角功能優(yōu)化游戲界面，包括游戲開始界面，闖關失敗界面，闖關成功界面，利用CSS3的時延功能實現(xiàn)部分動畫效果功能等。作者利用Javascript對游戲邏輯進行精密的控制，即灰太狼一旦移出特定軌跡將導致游戲闖關失敗。同時也控制該游戲中的大部分動畫效果以及發(fā)光效果等等。最后，作者利用HTML的audio表情控制。

2.2 游戲邏輯流程圖

打開網(wǎng)頁時，用戶將看到游戲開啟界面，點擊開始按鈕，便進入游戲界面。此時游戲并未開始，當鼠標移至“灰太狼”時，“灰太狼”明顯變大，此時游戲才正式開始。

游戲進行過程中，用戶必須沿特定軌跡移動“灰太狼”，且必須在時間條結束前將“灰太狼”移至“喜羊羊”處，方可過關，否則，游戲失敗，可以選擇是否繼續(xù)，或者結束游戲。如圖1所示。

圖1 游戲邏輯流程圖

2.3 關卡設計

本游戲成功與否在于各個關卡的設計。根據(jù)闖關類游戲的特征，筆者將游戲的難度逐步遞增，第一關為直線軌跡，第二關為半圓弧，第三關為不規(guī)則曲線，第四關為正弦函數(shù)。在此基礎上，調節(jié)路徑的寬度，以控制游戲的難度，同時增加時間條，對游戲闖關時間進行限制。

2.4 游戲優(yōu)化

游戲能否吸引玩家，取決于細節(jié)的處理。筆者再游戲制造中，充分考慮到這點，在后期對游戲進行了優(yōu)化，主要有以下幾個方面。

1)界面美化。

為了讓游戲界面更符合低年齡兒童喜好，筆者在游戲中引入了色彩絢麗而富有趣味的動畫，如圖2示。

圖2 動態(tài)素材效果圖

2)音效的引入。

引入緊張而富有節(jié)奏感的背景音樂，可以讓游戲更富趣味。同時，可以對背景音樂進行控制，可隨時關閉打開背景音樂。同時增加音效，闖關成功與否都有不同的音效，增加游戲的完整性。

3)游戲難度逐步提升。

首先，筆者為每一關的游戲時間做了限制，時間為30 s，如果超出時間，闖關失敗。

其次，筆者精確測量出每個關卡軌跡的坐標，保證游戲的嚴密性。與此同時，軌跡的弧度逐關卡增加而越來越大，軌跡的寬度也越來越小，以此提升了游戲的難度。

4)輔助功能的優(yōu)化。

首先，打開游戲時，筆者設計了一個簡潔的界面吸引觀眾眼球，避免進入游戲游戲時過于唐突，如圖3示。

其次，打開網(wǎng)頁后，并未直接進入游戲，此時鼠標可以脫離軌跡，當鼠標移至灰太狼時，灰太狼形狀有明顯增大，游戲正式開始。

3 游戲實現(xiàn)

圖3 游戲開啟界面效果圖

3.1 圓角功能

CSS3提供了很多新特性，其中較為突出的圓角功能。在CSS3之前實現(xiàn)邊框圓角需要冗余的代碼，而現(xiàn)在只要一句代碼便能解決。因為各大瀏覽器對邊框圓角的支持各有不同，所以需要添加相應的代碼前綴，保證各個瀏覽器的支持。

－moz－border－radius:100%; //Firefox browser;

－webkit－border－radius:100%; //基于 WEBKIT內核的瀏覽器 －ms－border－radius:100%;//Microsoft browser

－o－border－radius:100%;//Opera browser。

(注:參數(shù)100%表示邊框的圓角為全圓。)

3.2 基于時延的平緩過渡效果的CSS代碼

－webkit－transition:all 0.5 s ease;

－moz－transition:all 0.5 s ease; //變換效果的時延為0.5 s

－ms－transition:all 0.5s ease;

－o－transition:all 0.5s ease;

開始按鈕: 按下開始按鈕之后:

width:120px;width:120px;

height:120px;height:120px;

left:700px;obj.style.left="1000px";

top:530px;obj.style.width="10px";

visibility:visible;obj.style.height="10px";

obj.style.visibility="hidden"。

過渡效果如圖4示。

圖4 點擊開始按鈕，圓角跟按鈕將平緩過渡效果圖

3.3 JavaScript優(yōu)化游戲開始界面

在游戲中我們通過設置一個Boolean全局變量GO，初始值為false，來判斷游戲的開始與否。當灰太狼獲取焦點時，灰太狼變大，GO變量設置為TRUE，游戲開始，這樣可以非常有效的避免按下開始按鈕后，因鼠標初始位置不正確而導致游戲直接失敗。

效果如圖5～6示。

圖5 游戲開始前的效果圖

圖6 鼠標移至灰太狼時的效果圖

代碼實現(xiàn):

3.4 畫布上坐標的獲取

坐標的獲取的準確與否關系到整個游戲的成功與否。只有準確地獲取到坐標，才能確定各個關卡中橋的路徑，這不僅在開始設計中起著非常重要的作用，在后期調試中也意義重大。

4 結語

HTML5處于快速成長期，值得我們密切關注，近年來，越來越多的公司進入該領域，人們或許會在Chrome應用商店發(fā)現(xiàn)一些重量級投資商，同時，大家也希望在Google TV和Apple TV領域看到該類應用商店的出現(xiàn)。對于年輕的開發(fā)者，HTML5應成為他們的首選技能，因為HTML5將會形成很大的市場，將有更多公司需要這方面的專業(yè)技術人才。

本項目是一次對基于HTML5網(wǎng)頁游戲開發(fā)的實踐。從項目研究結果可知，有效地利用HTML5、CSS、JavaScript三門語言，可以開發(fā)出很多可玩性強的游戲，而HTML5在移動終端的開發(fā)與應用也發(fā)展迅速。

［1］陸凌牛．HTML5開發(fā)精要與實例詳解［M］．北京:機械工業(yè)出版社，2011．

［2］姜雪荃，林星，孫亮．寫給Web開發(fā)人員看的HTML5［M］．北京:人民郵電出版社，2012．

［3］Rob Hawkes．HTML5 Canvas基礎教程［M］．北京:人民郵電出版社，2012．

［4］David Flanagan．JavaScript權威指南2［M］．北京:機械工業(yè)出版社，2012．

［5］Nicholas C，Zakas．Java Script高級程序設計［M］．北京:人民郵電出版社，2006．

［6］Sbelley，Powers．JavaScript權威指南2［M］．北京:機械工業(yè)出版社，2009．

［7］亞當斯，Edwards James，Heilman Christian．JavaScript藝術與科學［M］．北京:電子工業(yè)出版社，2010．

［8］基思．JavaScript DOM 編程藝術［M］．北京:人民郵電出版社，2007．

［9］秀野堂主，蔣宇捷，羅睿．論道HTML5［M］．北京:人民郵電出版社，2012．