2014 年 08 月 20 日 21:50:47前端技术字数 1620阅读5分24秒阅读模式2022 年 03 月 15 日

摘要在这篇文章中，我们会向你介绍由Mozilla基金会创建的一些开发和调试HTML5游戏的资源。我们会以介绍为主，如果有什么问题，希望你可以在评论中给我们反馈。

一个月前火狐发布了最新版本Firefox 31，新增了很多关于帮助游戏开发者开发和调试HTML5游戏的功能。除了Mozilla基金会目前依靠asm.js开发HTML5游戏外，其它游戏制作公司比如Dungeon Defenders Eternity和Cloud Raiders都在javascript中使用交叉编译器Emscripten编写游戏。总而言之，到目前为止HTML5已经是一个很成熟的游戏平台了。

如果你对Emscripten感兴趣，你可以在Emscripten的wiki中了解到更多信息，MDN也提供了Emscripten的教程。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

在这篇文章中，我们会向你介绍由Mozilla基金会创建的一些开发和调试HTML5游戏的资源。我们会以介绍为主，如果有什么问题，希望你可以在评论中给我们反馈。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

开始

当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器？是否用到Canvas 2d、WebGL？采用什么样的呈现框架和游戏引擎？这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。没有一篇文章能回答所有的问题，但我们希望这篇文章能为你提供一条捷径。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

工具

作为一个HTML5游戏开发者，你必须了解很多很酷的开发工具，在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具，包括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

下面我们会介绍一引起最近更新的工具。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

Canvas Debugger

在最新版本的firefox中，我们在浏览器中添加了Canvas调试。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

HTML5游戏开发必备资源-图片2 文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

Canvas Debugger允许你跟踪所有的canvas上下文调用，像绘制元素和使用特定的调色器一样，它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用，它同时也可以用来测试基于Canvas 2D的游戏。在下面的游戏中，你可以看到动画被分解成很多个静态图，你可以点击任意一行直接查看那一部分的响应。文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html

HTML5游戏开发必备资源-图片3 文章源自陈学虎-https://chenxuehu.com/article/2014/08/3039.html