在手機上自己製作遊戲的方法，製作網頁遊戲需要什麼

HTML5技術的興起有多方面的原因，其中比較重要的一點就是，越來越多的開發者選擇以網頁的形式來製作應用軟件與遊戲。本文通過設計一款捲軸類遊戲，介紹了如何利用lufylegend遊戲引擎來開發基於HTML5的Web遊戲。

1、HTML5技術特點

HTML5是HTML的最新規則版本，它有很多優點，其中比較重要的一點是具有強大的跨平台特性。HTML5增加了很多新的元素，其中包括與Web遊戲設計緊密相關的Canvas元素。

從文字處理到電子遊戲，它們所需的全部圖形功能，Canvas元素都會提供。儘管它在各個平台中的性能有所差異，不過總的來說，Canvas的運行速度還是很快的。瀏覽器廠商們在遵循HTML5規範方面做得都相當好，所以，編碼良好的Canvas應用程序無需修改即可在兼容HTML5的瀏覽器中運行。

2、lufylegend開發框架

現在的遊戲開發變得越來越複雜，需要製作各種炫麗的效果，還要製作各種基於2D或者3D的場景。為了節省遊戲開發者的時間，讓開發者集中精力在遊戲的創新上，出現了許許多多的遊戲引擎。

lufylegend是一個HTML5開源引擎，它實現了利用仿ActionScript3.0的語法進行HTML5的開發，包含了LSprite，LBitmapData，LBitmap等多個AS開發人員熟悉的類，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多種熱門環境。

3、利用HTML5技術來設計捲軸類遊戲

在本遊戲製作中，可以將遊戲層次劃分為：進度條顯示層、背景層、人物層、障礙層。進度條顯示層用來顯示圖片讀取時的進度，背景層用來顯示不斷捲動的背景圖片，人物層用來顯示遊戲中的主角，障礙層用來顯示不斷出現的各種地板。

本遊戲利用HTML5的跨平台特點，分別給遊戲添加鍵盤事件和觸屏事件，以使遊戲在電腦上和智能手機上都能運行。

3.1、遊戲初始化

先利用LSprite對象的graphics屬性和LTextField對象製作遊戲標題和遊戲說明文字，然後定義一個進度條，利用LLoadManager來顯示進度條，最後給背景層backLayer增加鼠標點擊事件。主要代碼如下：

　　loadingLayer=new LoadingSample2（50）； 
　　backLayer.addChild（loadingLayer）； 
　　LLoadManager.load（imgData，function（progress）{ 
　　loadingLayer.setProgress（progress）； 
　　}，gameInit）；

當點擊遊戲畫面的時候，首先要將背景層清空，然後添加背景圖片。LSprite的die函數表示移除所有的事件監聽，removeAllChild函數表示移除所有子對象。主要代碼如下：

　　backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）； 
　　function gameStart{ 
　　backLayer.die； 
　　backLayer.removeAllChild；}

3.2、顯示捲軸背景

新建一個Background類，在其構造器內建立3個LBitmap對象，並依次顯示。因為背景圖片是可以無縫銜接的，所以顯示到畫面上就好像一張圖片一樣。

Background類的run函數是將Background對象中的3個子圖片向上移動一個STAGE_STEP步長，這個步長會在定義部分提前定義好相應的值，待第一個LBitmap對象移出屏幕後，就會把第二個LBitmap對象的坐標賦值給第一個LBitmap對象，然後再重新計算其他兩個LBitmap對象的坐標。相關代碼如下：

　　Background.prototype.run=function{
　　var self=this；
　　self.bitmap1.y-=STAGE_STEP；
　　self.bitmap2.y-=STAGE_STEP；
　　self.bitmap3.y-=STAGE_STEP；
　　if（self.bitmap1.y<-self.bitmap1.getHeight）{
　　self.bitmap1.y=self.bitmap2.y；
　　self.bitmap2.y=self.bitmap1.y+self.bitmap1.getHeight；
　　self.bitmap3.y=self.bitmap1.y+self.bitmap1.getHeight*2；}}

在循環播放監聽函數onframe中不斷調用Background類的run函數，就可以達到背景捲動的效果。

3.3 添加地板

在這個遊戲中，有各種各樣的地板，這些地板有一些共同的屬性，比如它們都在不停地向上移動。為了實現這些共同的屬性，先建立一個Floor類，作為所有地板的父類，這個父類里包含了所有地板的公共部分。Floor類的定義如下：

　　function Floor{ 
　　base（this，LSprite，[]）； 
　　var self=this； 
　　self.hy=0；

　　self.setView； 
　　} 
　　Floor.prototype.setView=function{} 
　　Floor.prototype.onframe=function{ 
　　var self=this； 
　　self.y-=STAGE_STEP； 
　　}； 
　　Floor.prototype.hitRun=function{}

其中，hy屬性是用來控制遊戲主角相對於地板的位置，setView函數用於給地板設定皮膚，每調用一次onframe函數，地板就向上移動一個STAGE_STEP長度。當遊戲主角落到每個地板上，會根據地板的不同而有不同的表現，比如強制左移，強制右移，或者向上跳起等，hitRun函數就是為了實現這些不同的表現而建立的。

有了公共類Floor，各種各樣的地板子類都必須繼承自Floor，並重寫相應的setView、onframe和hitRun函數。

3.4、添加遊戲主角

主角類Chara繼承自LSprite，其主要屬性有：moveType用來控制遊戲主角是左移還是右移，hp表示當前血量，mapHp表示最大血量，hpCtrl用來控制血量恢復的速度，isJump用來表示遊戲主角的當前狀態是否處於跳躍狀態，index用來控制動作變換的快慢，speed表示下落的速度，_charOld用來記錄遊戲主角每次下落之前的y坐標。

Chara類的changeAction函數用於控制遊戲主角的動作，定義如下：

　　Chara.prototype.changeAction=function{ 
　　var self=this； 
　　if（self.moveType=="left"）{hero.anime.setAction（3）；} 
　　else if（self.moveType=="right"）{hero.anime.setAction（2）；} 
　　else if（hero.isJump）{hero.anime.setAction（1，0）；} 
　　else{hero.anime.setAction（0，0）；} }

changeAction函數的原理是根據moveType來設定遊戲主角的動作是左移還是右移，當既不是左移也不是右移的時候，則判斷其狀態是不是跳躍，是則設定動作為跳躍，否則設定動作為站立。

3.5、遊戲數據顯示

遊戲的數據包括遊戲主角的血量和總共下降的層數，首先建立幾個變量來表示這些數：layers表示下降的層數，初始值為0；layersText用來將層數的數值顯示到畫面上；hpText用來將血量顯示到畫面上。然後建立showInit函數來進行文字顯示的初始化，主要代碼如下：

　　function showInit{ 
　　layersText=new LTextField； 
　　layersText.x=10； 
　　layersText.y=20； 
　　layersText.size=20； 
　　layersText.weight="bolder"； 
　　layersText.color="#ffff00"； 
　　backLayer.addChild（layersText）； 
　　}

完成以上的工作，遊戲製作完成，在瀏覽器中運行。