今天我們釋出了Firefox 31，它具有一些可以幫助HTML5遊戲開發者編寫並除錯複雜遊戲的新特性。並且Mozilla用部落格記錄了用asm.js做的首款商業遊戲，像Dungeon Defenders Eternity 和Cloud Raiders這兩款遊戲都是用Emscripten編譯器交叉編譯到JavaScript中的。像這樣的遊戲意味著HTML5已經是一個遊戲平臺了。
如果你對Emscripten感興趣你可以在Emscripten wiki瞭解更多詳細資訊，也可以在github page上面獲得程式碼。另外一個很好的資源是MDN上的 Emscripten tutorial。如果你想知道的asm.js效能，可以從這篇文章中獲得更多細節asm.js performance improvements in the latest version of Firefox make games fly! 。
在這篇文章中我們會介紹給你一些Mozilla開發者所創造的資源，利用這些資源你可以編寫並除錯基於HTML5的遊戲。這不是一個非常詳盡的列表，我們歡迎大家提供在這方面任何有價值的反饋，請在評論中告訴我們。
從何處開始
當開發一個基於HTML5的遊戲時，你可以有很多種選擇。從選擇哪種編輯器，到遊戲中根據使用的渲染框架和遊戲引擎決定的是否會用到Canvas 2d、 WebGL、SVG 或者 CSS。大多數這種決定都會根據開發者的經驗或者是遊戲釋出的平臺來決定。沒有任何一篇文章可以回答這些問題，不過我們想要把材料集合在一起，這樣可以幫助你立刻起步。
對遊戲開發者來說，MDN上最關鍵的資源之一就是 Games Zone.MDN的這一部分包括遊戲開發的文章，演示，外部資源以及例項。它也包括一些對於開發者完成HMTL5需要了解的API的詳細描述，包括聲音管理，網路，儲存和圖形渲染。我們現在正在對這部分內容進行新增和補充。我們希望將來有大多數普通場景，框架和工具鏈的內容和例項。
同時這裡也有一些帖子和MDN上面的文章可以幫助遊戲開發者進行工作。
工具
作為一名HTML5開發者，你並不會缺少可隨意使用的工具。在Mozilla社群中我們一直致力於擴充套件Firefox開發者工具。這些包括一個功能全面的JavaScrip偵錯程式，樣式編輯器，頁面探測器，暫存器，分析器，網路監測和網頁控制檯。
除了這些，最近也引進和更新了一些著名的工具，它們可以為遊戲開發者提供很好的功能。
偵錯程式
在最新推出的Firefox中，我們為瀏覽器增加了一個Canvas偵錯程式。
這個Canvas偵錯程式可以追蹤所有用來生成框架的canvas指令，有些特別的指令都會用顏色標註出來比如畫一個部件或者使用特定的著色程式。這個Canvas偵錯程式不僅可以用來開發基於WebGL的遊戲，同時也可以用來除錯基於Canvas 2D的遊戲。在下面的遊戲用你可以在動畫中看到每個影象都被畫到畫布上。你可以點選任意一行直接跳到控制這個動作的JavaScript部分。
Canvas偵錯程式最常報的兩個錯誤是 setInterval instead of requestAnimationFrame和inspecting canvas elements in an iFrame。
如果想要了解關於Canvas偵錯程式的更多的詳細資訊，請閱讀Introducing the Canvas Debugger in Firefox Developer Tools。
Shader編輯器
當開發基於WebGL的遊戲時，當應用執行時能夠測試並且改變著色程式是非常有幫助的。使用開發者工具裡面的Shader編輯器可以實現這一功能。頂點和分片著色程式都不用重新載入頁面就可以修改，或者直接可以檢視對輸出有何影響。
如果你想要對Shader編輯器有更多瞭解，請看這個帖子 Live editing WebGL shaders with Firefox Developer Tools，也可以看看這篇 MDN 文章，它包含了一些展示實時編輯的視訊。
網路音訊編輯器
現在的版本Firefox Aurora (32)有一個網路音訊編輯器。這個編輯器用圖形展示了所有的音訊節點以及它們在現有的AudioContext中的聯絡。你可以詳細查詢每個節點的屬性並監測它們。
Web Audio API提供了比HTML5的 Audio tag更加複雜和強健的聲音創造，操控和處理的功能。當使用網路音訊API時記得讀一下 Writing Web Audio API code that works in every browser，它包含了支援多種音訊節點的相關資訊。
如果你想要對網路音訊編輯器有更多瞭解，記得讀這篇介紹網路編輯器的文章，以及MDN 上的這篇文章。
網路監測器
當開發一個基於HTML5遊戲的網站時，這個網站對於手機使用者來說是非常麻煩和非常耗費時間的。使用這個網路檢測器你可以直觀地監測所有請求地址的網路請求，操作所花費的時間，以及終端的大小和型號。
另外使用網路監測器你可以看到一個你的app在快取和未快取情況下的表現的分析。
如果你想要知道更多關於網路監測器的詳細資訊請看MDN 網頁。
Web IDE
當開始開發遊戲時你首先要選擇使用哪個編輯器。這裡有很多編輯器（Sublime, Eclipse, Dreamweaver, vi等）。在大多數情況下，你已經有一個最喜歡的編輯器了。如果你對在瀏覽器內進行開發感興趣的話你應該會想要試一下Firefox Nightly最新推出的Web IDE。
Web IDE不僅提供了一個功能全面的編輯器，也可以作為很多本地和遠端平臺，偵錯程式，模板框架和應用管理的釋出代理。並且，支援Web IDE的框架提供了API，使得其它編輯器可以使用它提供的函式。想要了解這方面的更多細節，請看一下這個帖子。
想要同步看Firefox Developer Tools的更多新聞，請看他們在Hacks部落格上的系列文章。想要最新的最穩定的開發者工具特性，可以看他們在MDN上的文件。
API
MDN Games Zone列出了很多可以幫助開展遊戲開發的API和文章。
除了這些資源你可能對額外的對開發有幫助的文章也感興趣。
如果你的遊戲支援使用WebRTC或WebSockets的多媒體互動，你可能對Together.js也感興趣，它提供了web app的協作特定。想要了解可以實現什麼可以看一看Introducing TogetherJS。
很多遊戲需要儲存空間，IndexedDB可以滿足這一需求。想要了解擴充套件IndexedDB的效能，可以讀Breaking the Borders of IndexedDB。你可能也對 localForage感興趣，它提供了和瀏覽器無關的簡單儲存支援。想要知道更多詳細資訊可以讀這個 Hacks post。
遊戲優化
現在的HTML5遊戲給尤其開發者提供了很大的力量。很多遊戲將會在移動裝置上執行，這和在桌面執行相比效果會差很大。所以如果你想要你的遊戲在多種平臺上都取得成功，優化你的程式碼非常重要。 Optimizing your JavaScript Game for Firefox OS 這個帖子提供了很多可以幫助你開發出在低端移動裝置上也能良好執行的遊戲的技巧。
本地化
為了你的遊戲有更多的使用者，你可能想要你的遊戲提供對多種語言的支援。由於部分開發者將本地化也考慮在遊戲的製作中，我們做了很多的招募翻譯的工作來幫助你翻譯遊戲。想要了解這方面的更多資訊請看這裡。
你的聲音
Mozilla是一個關於開發者和使用者的社群，我們需要你的幫助和反饋。如果你有一些想要在未來產品中看到的特性，請加入irc.mozilla.org的討論，或者通過 mailing lists聯絡。你也可以記錄bugzilla.mozilla.org的bug。另外，我們也在DevTools 和Open Web Apps上有額外的反饋渠道。