HTML5很棒，因?yàn)樗鼛缀鯚o(wú)所不能——它并不是為某種特殊的應(yīng)用設(shè)計(jì)的。更重要的是，HTML5幾乎是無(wú)處不在的。它就在你的PC機(jī)上、你的手機(jī)上、你的平板設(shè)備上——它甚至可能就在你的廚房電器上。

　　正是由于HTML5具有豐富的功能并且無(wú)處不在，所以它給開發(fā)者帶來(lái)了很多的靈感。俗話說(shuō)得好，“一旦開發(fā)者有了靈感，他們就開始編寫游戲了。”（這句話應(yīng)該是作者編的）

　　幸運(yùn)的是，有關(guān)HTML5游戲開發(fā)的指南現(xiàn)在已經(jīng)有很多了。而這篇文章則是要告訴開發(fā)者在開發(fā)HTML5游戲以前應(yīng)該具備的一些全局概念。你能 從這篇文章中學(xué)到什么？這里會(huì)介紹HTML5游戲開發(fā)的一些框架，你將知道如何使你設(shè)計(jì)的游戲能夠在更多的平臺(tái)上運(yùn)行，了解如何管理在線游戲的狀態(tài)，如何 處理性能問題。

　　話不多說(shuō)，現(xiàn)在就開始介紹HTML5游戲開發(fā)的5條實(shí)用建議。

　　建議1：使用框架

　　如果只是用HTML5編寫一些小程序其實(shí)非常簡(jiǎn)單，但如果想往你的游戲中加入更豐富的功能，那么就有許多其他的事情需要處理了。

　　比如，如果你的游戲中有大量的圖片、音效或是其他的資源，那么瀏覽器需要從你的游戲服務(wù)器上下載這些資源，這往往需要花費(fèi)很多的時(shí)間。如果你在 編寫程序的時(shí)候沒有考慮這些問題，那么你也許會(huì)對(duì)最后的結(jié)果感到意外。由于圖形和聲音文件都是異步下載的，也許在你的資源下載好以前你的 javaScript腳步已經(jīng)開始運(yùn)行了。這就是所謂的“爆音”現(xiàn)象（圖像顯示異常），而聲音也可能在錯(cuò)誤的時(shí)間播放。一個(gè)好的解決方法就是創(chuàng)建一個(gè)預(yù)先 下載機(jī)制，保證所有的資源下載完以后才允許腳本執(zhí)行。

　　另一個(gè)你可能碰到的問題就是你的游戲在不同的機(jī)器甚至是瀏覽器中運(yùn)行的速度有所不同。雖然這也許在你的控制范圍以外，但你還是可以盡量使得你的動(dòng)畫或是動(dòng)作的速度不依賴于游戲運(yùn)行框架的速度。

　　其實(shí)，現(xiàn)在有許多的游戲模板代碼，里面實(shí)現(xiàn)了大多數(shù)游戲需要的功能。這樣，開發(fā)者不需要從頭到尾編寫一個(gè)完整的游戲程序。現(xiàn)在有許多框架可以幫助開發(fā)者設(shè)計(jì)游戲，開發(fā)者只用關(guān)注具體的游戲邏輯，而不用擔(dān)心如何使游戲順暢運(yùn)行這些細(xì)節(jié)問題。

　　使用框架時(shí)唯一需要注意的一點(diǎn)就是如何從眾多的框架中挑選一個(gè)合適的框架。像ImpactJS這樣的框架功能非常強(qiáng)大，幾乎可以在各個(gè) 方面為開發(fā)者提供幫助；而像EaselJS的框架則主要是處理圖形方面的工作。最后，還是需要由開發(fā)者決定使用哪種框架更加合適。這看起來(lái)似乎很簡(jiǎn)單，但 在Javascript的世界里面，選擇一個(gè)框架時(shí)也意味著你選擇了一種特定的編程風(fēng)格。

1. ig.module(

   　　對(duì)于簡(jiǎn)單的游戲，這意味著你不必?fù)?dān)心它的性能問題。但由于HTML5可以運(yùn)行在任何平臺(tái)上，這意味著你發(fā)開的HTML5游戲應(yīng)該能夠運(yùn)行在任何 一個(gè)設(shè)備或是瀏覽器上，其中有些設(shè)備或?yàn)g覽器的處理能力可能并沒有你希望的那么快。即使你的應(yīng)用只針對(duì)高性能的PC，游戲的性能也是一個(gè)不得不考慮的問 題。

   　　如果你要求你的游戲達(dá)到每秒60幀，這意味著每一幀的渲染時(shí)間不能超過16毫秒。也就是說(shuō)，在你一眨眼的時(shí)間里面，你需要完成至少6幀的渲染工作。現(xiàn)在聽起來(lái)可能有點(diǎn)難以想象…但是有些非凡的游戲確實(shí)能夠做到。

   　　幸運(yùn)的是，這里有些工具可能能夠幫助你。在IE9（或是IE10）上，通過按下F12按鍵可以打開開發(fā)工具面板。選擇“PRofile”選項(xiàng)然后選中“Start profiling”。

   　　現(xiàn)在在你覺得性能需要提升的地方停留30秒，profiler將收集相關(guān)數(shù)據(jù)，然后選擇“stop profiling”。你將看到你的游戲中的每個(gè)功能的累積執(zhí)行時(shí)間。通常，你會(huì)發(fā)現(xiàn)某些功能占用了大部分的時(shí)間。這樣你就能有針對(duì)性地優(yōu)化那些特別耗時(shí)的功能了。

   　　不要過分相信自己的直覺——有些代碼可能看起來(lái)效率很低，但在某些JavaScript引擎上執(zhí)行起來(lái)速度卻很快。最好的辦法就是時(shí)常地反復(fù)分析程序，對(duì)于修改過的代碼，需要反復(fù)進(jìn)行測(cè)試確保你的修改確實(shí)能夠提升程序的性能。

   

   　　游戲變得越來(lái)越社會(huì)化：Warimals是基于HTML5的游戲，用戶可以與Facebook上的好友一起參與游戲

   　　建議5：要有創(chuàng)造性！

   　　能夠開發(fā)出在瀏覽器中運(yùn)行的游戲是一件很棒的事情，而更酷的是可以使用HTML5在瀏覽器上開發(fā)游戲應(yīng)用！從技術(shù)的角度看，HTML5是非常棒的，而瀏覽器也是非常理想的游戲平臺(tái)。

   　　想想看…各種不同的設(shè)備上都有瀏覽器，它們通常是時(shí)時(shí)在線的，它是人們接收郵件、聊天和社交網(wǎng)絡(luò)的工具。瀏覽器游戲的開發(fā)者，可以利用自己開發(fā)的游戲?qū)?lái)自世界各地的人們聯(lián)系在一起。

   　　如果你還不熟悉HTML5的游戲開發(fā)，你可能將你在線下玩過的游戲照搬過來(lái)。這當(dāng)然沒有什么問題。但如果你想讓你的游戲變?yōu)橐粋€(gè)“交流工具”， 你最好能夠擁有更加新穎和創(chuàng)造力的想法。Warimals就是一個(gè)例子，它是第一個(gè)基于HTML5的facebook游戲。在游戲中，用戶可以扮演成一只 小狗或是小貓，并可以邀請(qǐng)自己的Facebook好友一同參加。用戶有什么理由不喜歡這個(gè)游戲呢？

   　　總結(jié)

   　　感謝框架的開發(fā)者和JavaScript的相關(guān)工作者，HTML5已經(jīng)成為了一個(gè)相當(dāng)成熟的游戲開發(fā)平臺(tái)。這是一個(gè)好消息，因?yàn)閃eb是唯一一 個(gè)適合各種應(yīng)用廣泛使用的運(yùn)行環(huán)境。選擇合理的工具（很多工具都可以在IE9和IE10中使用，并且能夠免費(fèi)下載到）和框架，HTML5游戲開發(fā)將是一件 簡(jiǎn)單并且有價(jià)值的事情，尤其適合開發(fā)新穎和社交性很強(qiáng)的游戲。