這篇文章的目的在于讓HTML5游戲開(kāi)發(fā)工程師們?cè)陂_(kāi)發(fā)HTML游戲時(shí)具備全局概念，在這篇文章里，
北大青鳥(niǎo)深圳嘉華將會(huì)介紹一些關(guān)于HTML5游戲開(kāi)發(fā)的框架之類(lèi)的知識(shí)，幫助親們解如何管理在線游戲的狀態(tài)，如何理性處理問(wèn)題。
HTML5最大的賣(mài)點(diǎn)之一就是它既能在桌面PC上使用，也能在筆記本電腦、平板設(shè)備甚至是智能手機(jī)上運(yùn)行。他的跨平臺(tái)的特性為開(kāi)發(fā)者節(jié)省了很多工作。
但是注意了，不同的設(shè)備屏幕的尺寸也有所不同，屏幕的寬高比以及分辨率可能有很大的差別。如果想讓你的HTML5在移動(dòng)設(shè)備上擁有良 好的效果，確保它支持多種分辨率并且不超過(guò)WVGA的800×480框架大小。此外，由于大多數(shù)的移動(dòng)設(shè)備無(wú)法在一個(gè)屏幕上顯示所有的頁(yè)面內(nèi)容，他們常常采用精確的縮放和平移技術(shù)，而這些技術(shù)通常并不適用于游戲的編寫(xiě)?？梢栽诰幊痰臅r(shí)候使用viewport meta標(biāo)志禁用這些功能。移動(dòng)瀏覽器上的縮放功能常常與觸控游戲控制功能產(chǎn)生沖 突，可以將“user-scaleable”參數(shù)設(shè)置為“no”，從而禁用瀏覽器的縮放功能。
接下來(lái)就該考慮如何處理用戶(hù)輸入的問(wèn)題了。大多數(shù)觸屏設(shè)備都有一個(gè)虛擬鍵盤(pán)，但是在 玩游戲的時(shí)候顯示一個(gè)虛擬鍵盤(pán)實(shí)在太浪費(fèi)空間了。你應(yīng)該開(kāi)發(fā)一個(gè)有限的虛擬鍵盤(pán)，只提供游戲中使用到的按鍵(比如箭頭)。當(dāng)然，最好是盡可能在游戲中不需 要使用額外的元素。Spy Chase在這方面做得很好，用戶(hù)只用一個(gè)手指就能控制游戲中的汽車(chē)了。
現(xiàn)在有許多的游戲模板代碼，里面實(shí)現(xiàn)了大多數(shù)游戲需要的功能。這樣，開(kāi)發(fā)者不需要從頭到尾編寫(xiě)一個(gè)完整的游戲程序?，F(xiàn)在有許多框架可以幫助開(kāi)發(fā)者設(shè)計(jì)游戲，開(kāi)發(fā)者只用關(guān)注具體的游戲邏輯，而不用擔(dān)心如何使游戲順暢運(yùn)行這些細(xì)節(jié)問(wèn)題。
使用框架時(shí)唯一需要注意的一點(diǎn)就是如何從眾多的框架中挑選一個(gè)合適的框架。像ImpactJS這樣的框架功能非常強(qiáng)大，幾乎可以在各個(gè) 方面為開(kāi)發(fā)者提供幫助;而像EaselJS的框架則主要是處理圖形方面的工作。最后，還是需要由開(kāi)發(fā)者決定使用哪種框架更加合適。這看起來(lái)似乎很簡(jiǎn)單，但 在JavaScript的世界里面，選擇一個(gè)框架時(shí)也意味著你選擇了一種特定的編程風(fēng)格。
functionsaveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
functionrestoreState() {
varstate =window.localStorage.getItem("gameState");
if(state) {
returnJSON.parse(state);
}else{
retrun null;
}
}
Monster=ig.Entity.extend({eyes : 42});});ImpactJS就是一個(gè)很好的例子，它不僅提供了圖像顯示和音效處理的方法，還在實(shí)現(xiàn)中插入了自己的對(duì)象和模型。
雖然現(xiàn)在已經(jīng)有很多HTML5游戲使用了一些框架，但是還是有很多開(kāi)發(fā)者不嫌麻煩地選擇不依賴(lài)任何框架完全自己開(kāi)發(fā)。如果你想在合理的時(shí)間內(nèi)完 成任務(wù)，使用框架當(dāng)然是最有效的方法。
然后在編寫(xiě)HTML5游戲時(shí)，最好是經(jīng)常將游戲玩家的進(jìn)度狀態(tài)保存一下，當(dāng)用戶(hù)重新打開(kāi)關(guān)閉的web頁(yè)面時(shí)，應(yīng)該讓用戶(hù)可以繼續(xù)之前沒(méi)有結(jié)束的游戲而不是重頭來(lái)過(guò)。
你應(yīng)該將用戶(hù)的記錄保存在哪里呢?過(guò)去，答案往往是服務(wù)器端的數(shù)據(jù)庫(kù)或是客戶(hù)端的cookie。但是這兩個(gè)都不是最佳的選擇。如果是在服務(wù)器 端，則會(huì)產(chǎn)生額外的HTTP請(qǐng)求開(kāi)銷(xiāo)。如果是cookie的話，則可以保存記錄的空間非常有限，并且cookie的壽命取決于瀏覽器的配置。
一個(gè)更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一個(gè)key-value存儲(chǔ)(或是JavaScript定義的對(duì)象)的接口，可以為每個(gè)網(wǎng)站保存幾兆的數(shù)據(jù)。使用起來(lái)非常方便，但是 在HTML5游戲中，你可能想要記錄一些更加復(fù)雜的數(shù)據(jù)結(jié)構(gòu)——這些DOM storage本身可能并不支持。幸運(yùn)的是，現(xiàn)在的JavaScript提供了一套機(jī)制幫助開(kāi)發(fā)者將一組對(duì)象壓縮成一些緊湊的符號(hào)，這就是JSON機(jī)制。 使用這套機(jī)制，DOM storage可以保存任何格式的信息。下面的兩個(gè)函數(shù)展示了如何使用HTML5 DOM storage保存游戲狀態(tài)以及ECMAScript5中的JSON功能：
functionsaveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
functionrestoreState() {
varstate =window.localStorage.getItem("gameState");
if(state) {
returnJSON.parse(state);
}else{
retrun null;
}
}
