網頁游戲制作需要什么技術做網頁游戲需要什么 _網頁游戲制作需要什么技術

文章插圖

文章插圖
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）；} 完成以上的工作，游戲制作完成，在瀏覽器中運行。
4、結束語
本文介紹了如何在游戲中實現卷軸滾動效果，游戲雖然簡單，但是里面有彈跳、墜落、重力等內容，這些同時也是一般橫版過關游戲的組成部分，相信會對想制作橫版過關游戲的朋友起到一定的借鑒作用。

網頁游戲制作需要什么技術 做網頁游戲需要什么

網頁游戲制作需要什么技術做網頁游戲需要什么