黎志雄 黃彥湘 陳學(xué)中

(東莞理工學(xué)院 計(jì)算機(jī)學(xué)院，廣東東莞 523808)

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

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

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

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

1 主要技術(shù)支持

1.1 游戲涉及到的HTML5特性

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

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

下面是canvas的聲明:

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

＜/canvas＞

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

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

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

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

1.2 游戲涉及到的Javascript特性

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

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

onMouseOver當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)的事件;

onMouseMove鼠標(biāo)移動(dòng)時(shí)觸發(fā)的事件;

onMouseOut當(dāng)鼠標(biāo)離開某對(duì)象范圍時(shí)觸發(fā)的事件;

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

onKeyDown當(dāng)鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)的事件;

onKeyUp當(dāng)鍵盤上某個(gè)按鍵被按放開時(shí)觸發(fā)的事件。

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

1.3 游戲涉及到的CSS3特性

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

2 游戲設(shè)計(jì)

2.1 游戲邏輯設(shè)計(jì)

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

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

2.2 游戲邏輯流程圖

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

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

圖1 游戲邏輯流程圖

2.3 關(guān)卡設(shè)計(jì)

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

2.4 游戲優(yōu)化

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

1)界面美化。

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

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

2)音效的引入。

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

3)游戲難度逐步提升。

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

其次，筆者精確測(cè)量出每個(gè)關(guān)卡軌跡的坐標(biāo)，保證游戲的嚴(yán)密性。與此同時(shí)，軌跡的弧度逐關(guān)卡增加而越來越大，軌跡的寬度也越來越小，以此提升了游戲的難度。

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

首先，打開游戲時(shí)，筆者設(shè)計(jì)了一個(gè)簡(jiǎn)潔的界面吸引觀眾眼球，避免進(jìn)入游戲游戲時(shí)過于唐突，如圖3示。

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

3 游戲?qū)崿F(xiàn)

圖3 游戲開啟界面效果圖

3.1 圓角功能

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

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

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

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

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

3.2 基于時(shí)延的平緩過渡效果的CSS代碼

－webkit－transition:all 0.5 s ease;

－moz－transition:all 0.5 s ease; //變換效果的時(shí)延為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 點(diǎn)擊開始按鈕，圓角跟按鈕將平緩過渡效果圖

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

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

效果如圖5～6示。

圖5 游戲開始前的效果圖

圖6 鼠標(biāo)移至灰太狼時(shí)的效果圖

代碼實(shí)現(xiàn):

3.4 畫布上坐標(biāo)的獲取

坐標(biāo)的獲取的準(zhǔn)確與否關(guān)系到整個(gè)游戲的成功與否。只有準(zhǔn)確地獲取到坐標(biāo)，才能確定各個(gè)關(guān)卡中橋的路徑，這不僅在開始設(shè)計(jì)中起著非常重要的作用，在后期調(diào)試中也意義重大。

4 結(jié)語

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

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

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

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

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

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

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

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

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

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

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