HTML5是偉大的,因為它多才多藝的 - 它沒有具體針對單一的平臺.更重要的是,HTML5是無所不在的. 就我所知的,它在你的PC上,你的手機上,你的平板設(shè)備上,甚至在你的廚房電器上. 

就憑HTML5-多才多藝和無所不在這兩個特點 -- 不辯自明, 為什么眾多的開發(fā)者們備受鼓舞. 然,眾所周知,"一旦開發(fā)者們被激發(fā)了靈感,他們常常會編寫游戲."(好吧,可能只是我做了.)

幸運的是,有關(guān)HTML5游戲開發(fā)的文章比比皆是. 然而, 在你打算使用HTML5編寫游戲之前, 我不得不給你一些建議.

 你能從本文中學(xué)習(xí)到什么? 我將提及HTML5游戲開發(fā)框架, 怎樣通過支持智能手機和手持設(shè)備使受眾更廣泛, 怎樣管理游戲狀態(tài), 怎樣解決性能問題, 怎樣支持大多數(shù)瀏覽器平臺.

因此,直奔主題,這里有5個創(chuàng)建HTML5游戲的最佳實踐,實戰(zhàn)!("實戰(zhàn)"增加了戲劇效果)

最佳實踐 #1:使用框架 

編寫簡單游戲在HTML5中是很容易的,但是當(dāng)你押寶在HTML5上,你就需要做更多的準(zhǔn)備,確保游戲順利運行.

例如,當(dāng)你使用了很多的圖片,聲音效果,和其它的資源,它們會花費一些時間等待瀏覽器從服務(wù)器下載. 如果在編寫游戲時, 你不把它放在心上, 你會焦頭爛額. 因為圖片和聲音文件是異步加載的,你的JavaScript代碼會在資源全部加載完成前執(zhí)行.這常常導(dǎo)致"popping"(圖片不可用),聲音效果在需要時不播放. 好的修正方法是創(chuàng)建一個預(yù)加載器,延后腳本代碼的執(zhí)行,直到所有的資源都下載完畢為止. 

另一個問題是,你很可能想在不同的機器和/或不同的瀏覽器,以不同的速度運行你的游戲. 對此, 當(dāng)你沒有更多做為的時候,你仍要確保動畫和移動速幀獨立于游戲運行平臺. 

實際上, 每個游戲都很多功能性的樣板代碼. 幸運的是, 你不必自己從頭編寫. 有很多框架讓你僅關(guān)注游戲邏輯, 而不是去擔(dān)心這些瑣碎(和大)的事, 確保你的游戲順利運行. 

使用框架唯一需要注意的是, 你有太多選擇. 像ImpactJS框架, 皆在幫助開發(fā)游戲的方方面面, 而像EaselJS框架主要關(guān)注圖形處理. 最后還是由你來挑選你認(rèn)為最舒服的框架. 這些可能讓人摸不著頭腦, 但在JavaScript世界, 確定了框架往往意味著確定了編程風(fēng)格。

ig.module(   
    'monster'   
)  
.requires(  
    'impact.game',  
)  
.defines(function(){  
 
Monster = ig.Entity.extend({  
    eyes: 42  
});  
 
}); 

一個好例子是ImpactJS, 它不僅提供圖形顯示的抽象或播放聲音效果, 也織入了自定義對象和繼承模型,如上所示.

 Ascend Arcade delivered three games in three months using the ImpactJS framework. 

盡管有很多的HTML5游戲現(xiàn)在依賴于某種形式的框架, 很多開發(fā)者仍然堅持一路顛簸, 試圖重新構(gòu)建一切. 然而這可能是一個好的學(xué)習(xí)經(jīng)驗, 但如果你想在合理的時間完成, 使用框架是正確的方法.  一個好的例子是, Ascended Arcade 使用 ImpactJS框架, 在三個月中發(fā)布了三款有意思的(有些受到好評)游戲.

最佳實踐 #2: 認(rèn)真考慮小的和觸摸屏的設(shè)備 

可能HTML5的銷售賣點之一是,它可以工作于桌面PC, 手持電腦甚至智能手機.(如果你還沒有看過Windows Phone 7 Mango上運行的IE9, 看看這個視頻). 

跨平臺(take that,Webster's 字典!)特性是HTML5與身俱來的, 常常只需付出少量的額外工作便可做到. 然而, 有幾個你需要認(rèn)真考慮的事情... 

首先也是最重要的, 屏幕尺寸可能在不同設(shè)備中區(qū)別很大. 如果想讓你的HTML5游戲在移動設(shè)備上運行良好,你要么確保它們支持多個分辨率,要么不超過WVGA框架大小800x480. 

縱然這樣,既然大多數(shù)移動設(shè)備缺乏一次渲染整個網(wǎng)頁的能力, 采用先進的縮放和平移技術(shù)編寫游戲可能會適得其反. 這可以通過viewport標(biāo)記關(guān)閉.下面的代碼片段將使游戲窗口占滿可用的橫向屏幕. 設(shè)置屬性"user-scaleable"為"no"告知手機瀏覽器禁用平移, 否則常常會導(dǎo)致手指控制游戲的沖突。

<meta name="Viewport"   
 
  content="width=device-width; user-scaleable=no; initial-scale=1.0" 
/> 

就算游戲在小屏幕設(shè)備上渲染沒問題, 你也應(yīng)該停下來思考一下輸入問題. 大多數(shù)僅支持觸摸式的設(shè)備擁有個虛擬鍵盤,他們可能會占用太多屏幕空間來控制游戲角色. 如果嚴(yán)格的觸摸式輸入出了問題, 你應(yīng)該創(chuàng)建一個受限的虛擬鍵盤,僅僅創(chuàng)建游戲需要的按鈕(如方向鍵). 然而,最好的做法是控制你的游戲,不需要額外的屏幕元素. 一個很好的例子是Spy Chase游戲,你用一個手指控制自動車(一些你不可能在實際生活中嘗試的東西)。

最佳實踐 #3:自動保存玩家進度

像site pinning特性, 試圖給web瀏覽器web應(yīng)用程序和常規(guī)的桌面應(yīng)用同樣的地位. 然而, 作為應(yīng)用程序運行的網(wǎng)站想法太新了, 網(wǎng)頁要維持客戶端狀態(tài). 關(guān)閉Microsoft Word前,你可能會三思后行, 但是可能不會對于一個開放的網(wǎng)頁謹(jǐn)慎行事.大部分時間, 它不是問題 --- 大多數(shù)網(wǎng)頁要嘛是無狀態(tài)的, 要嘛是在服務(wù)器上維護記錄你的信息。

然而, 瀏覽器游戲, 是非常不同的小怪獸. 既然JavaScript代碼運行在客戶端, HTML5游戲狀態(tài)通常都保持在瞬時內(nèi)存中(又稱RAM).關(guān)閉游戲器窗口,你辛苦賺取的積分就付之東流了。

現(xiàn)在, 你可能會認(rèn)為, 一個明智的用戶會足夠謹(jǐn)慎, 他們連續(xù)玩了8小時, 不關(guān)閉游戲. 但事故常有發(fā)生, 特別是當(dāng)打開了多個選項卡或突然斷電。

一言蔽之: 當(dāng)編寫HTML5游戲的時候, 絕對的最佳實踐是定期保持玩家進度,  允許玩家恢復(fù)上一次關(guān)閉網(wǎng)頁時的狀態(tài)。

現(xiàn)在,你應(yīng)在哪保存玩家的進度呢?過去,顯而易見的地方是服務(wù)器端或瀏覽器cookie. 兩個解決方案都不是特別有吸引力. 服務(wù)器端方案, HTTP請求不得不每次構(gòu)造需要存儲或取回的信息. 使用cookie的方案, 你的空間就非常有限了, cookie的可用空間大大依賴于瀏覽器配置。

更好的可行方案是使用HTML5 DOM storage. DOM storage 通過一個接口, 讓你為每個網(wǎng)站保存幾兆的數(shù)據(jù), 它類似于一個key-value存儲(或者一個JavaScript expando對象). 這非常方便,但在HTML5游戲上下文中, 你也可能需要記住復(fù)雜的數(shù)據(jù)結(jié)構(gòu) --- 一些DOM storage非原生支持的結(jié)構(gòu)。

幸運的是,現(xiàn)代的JavaScript引擎都有內(nèi)建的機制, 將對象序列化成緊湊的結(jié)構(gòu),如JSON. 使用這種方案, DOM storage也可以記住復(fù)雜信息.接下來的兩個助手函數(shù), 使用HTML5 DOM storage和ECMAScript5的內(nèi)建JSON特性, 解決了游戲狀態(tài)的存儲和取回。

ECMAScript5: 

function saveState(state) {  
    window.localStorage.setItem("gameState", JSON.stringify(state));  
}  
 
function restoreState() {  
    var state = window.localStorage.getItem("gameState");  
    if (state) {  
        return JSON.parse(state);  
    } else {  
        return null;  
    }  
} 

最佳實踐 #4: 使用監(jiān)控器

開發(fā)游戲的一個最大挑戰(zhàn)是加入越來越多的游戲特性的同時能保持高幀率.

好消息是, 瀏覽器比過去幾年快了很多,HTML5游戲運行在恒定的60fps已經(jīng)成為現(xiàn)實.

這實屬不易. 對于IE9,意味著要編寫一個全新的JavaScript引擎, 使用多CPU內(nèi)核和基于Direct2D的完全的硬件加速渲染管道.

IE9的內(nèi)置監(jiān)控器能幫助你定位性能漏洞.

 對于簡單游戲,你不需要擔(dān)心性能問題.但既然HTML5是平臺無關(guān)的,你很可能會針對大量的設(shè)備和瀏覽器開發(fā), 有些不像你想像的那么快速. 即使你只針對高性能電腦, 性能仍然會成為一個問題.

如果你想游戲運行在60fps, 單個幀渲染不能超過16毫秒. 這可能看起來像是個艱巨的任務(wù), 但這是可以做到的.

很幸運,有一些工具可以幫助你. 在IE9中(或者10),單擊F12,打開開發(fā)者工具,選擇"Profiler"選項卡并單擊 "Start profiling".

現(xiàn)在導(dǎo)航到你感覺性能應(yīng)被改善的地方,給監(jiān)控器大概30秒的時間收集數(shù)據(jù),然后單擊"Stop profiling." 將給你展現(xiàn)一個關(guān)于每個游戲函數(shù)累計執(zhí)行時間的概覽. 大多數(shù)時候, 你會發(fā)現(xiàn), 少數(shù)幾個函數(shù)占用了大部分執(zhí)行時間.優(yōu)化這些函數(shù)將給你超值回報, 分析這些代碼, 拖后腿的子程序?qū)⒃彤吢?

不要盲目的相信直覺, 在當(dāng)今的JavaScript引擎中, 看起來慢可能實際上運行得很快. 最佳優(yōu)化方案是時常監(jiān)控和判斷代碼的改變是否對性能有負(fù)面影響.

社會化游戲: Warimals 基于HTML5而允許你身邊的Facebook好友一起玩游戲. 

最佳實踐 #5 創(chuàng)意!

HTML5不光在技術(shù)上是有趣的, 瀏覽器本身也是一個完美的游戲平臺.

感謝瀏覽器... 它存在于很多不同的設(shè)備中,他們常常(總是)在線的,它們是人們彼此交流的工具, 通過email,聊天室和社交網(wǎng)絡(luò).做為一個瀏覽器的游戲開發(fā)者, 你可以創(chuàng)建游戲, 讓世界各地的人聚集在一起, 帶給他們快樂.

如果你是一個HTML5游戲的開發(fā)新手,可能編寫你曾經(jīng)玩過的線下游戲的克隆會很誘人. 這種做法沒有錯誤. 但是,如果你想讓做線上游戲, 現(xiàn)在是一個好的機會, 請拿出全新的, 極具創(chuàng)意的游戲理念. 一個有趣的例子是 Warimals, 第一個基于HTML5的Facebook游戲.在 Warimals 中,你可以扮演小狗或小雞,還能讓你的Facebook好友和你一起玩. 何樂不為呢?

總結(jié): 

感謝框架開發(fā)者的工作和JavaScript開拓者, HTML5已經(jīng)成為一個相當(dāng)成熟的游戲開發(fā)平臺. 這是好消息, 因為web是個普適的應(yīng)用環(huán)境，只要有合適的工具（很多已經(jīng)集成到IE9和IE10或者可以免費下載）和合適的框架，HTML5的開發(fā)體驗會充滿愉悅并令人振奮，尤其是在分享有趣的和創(chuàng)造性的經(jīng)驗的時候。

英文：Top 5 Best Practices for Building HTML5 Games…In Action!

原文鏈接：http://www.oschina.net/question/1579_46161

【編輯推薦】

1. 分享21個最新的超酷web設(shè)計特效
2. 響應(yīng)式Web設(shè)計的20個有用的jQuery插件
3. 使用jQuery和CSS3實現(xiàn)的超炫3D畫廊特效
4. 20個最新的Web和移動UI套件PSD分享
5. PhoneGap+jQuery Mobile打造本地化Web App