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