如果是想学HTML5游戏开发，技能树怎么点？-H5教程

回复内容：

Js -> canvas/webGL -> fireball-x, 以下是详细解释:

假定题主已经有一定的游戏开发基础, 如果没有的话, 我建议题主做一些游戏开发的基础学习. 那么要最快时间点出 HTML5 游戏开发的技能树, 按照上述路线即可.

Javascript: 这个不用说了, 这是 H5 开发的入门语言, 题主完全不用在意目前 H5 领域的其他语言变种, 比如 CoffeeScript, TypeScript. 这些变种只会给你的学习带来混乱, 我们只需要专注掌握 Javascript 即可.

canvas/webGL: 要做 H5 游戏自然少不了在上面画东西, 那么根据自己的情况选择一种绘制方案. 如果是初学者, 我推荐 Canvas , H5 的 canvas 2d context 已经包含了比较完备的 2d graphics 绘制 API, 这可以让我们画东西更加快捷. 而如果题主励志要做高效的游戏, 3D 绘制 或者更高阶的绘制技巧, 那么掌握 webGL 是必不可少的. 如果你没有 openGL 方面的知识, 也不用害怕, 因为 webGL 正好是一次让你补习的机会, 他的 API 设计和 openGL ES 非常类似, 其内在的知识点也都是相同的, 而且上手更方便简单, 在这样的环境下, 比起过去学习 openGL 的开发者来说要迅速很多, 也容易获得成就感, 所以我是非常推荐在 canvas 学习的基础上在进一步学习 webGL 的.

fireball-x: http://fireball-x.com 是一个类似 Unity3D 的游戏引擎, 他的初衷便是让前端开发人员可以在已有的基础上, 方便地开发 H5 游戏. 目前引擎处于非常早期的内测阶段, 但是已经是一个功能相对完备的开发工具了. 对于以学习为目的的 H5 游戏开发人员, 我非常推荐这个引擎工具. 他不仅提供给你从脚本编写到场景编辑的无缝环境, 而且引入了现在主流游戏开发中的 Entity-Component 的设计体系, 和同类引擎相比, fireball-x 提供了非常好的脚本编写和调试环境, 并且省去了初学者上手设置页面和测试页面等诸多恼人且费时的事情, 所以是入门学习 H5 游戏的好帮手!

也欢迎各位加入我们的 fireball-x 开发QQ交流群: 246239860 (搜索不到群可以暂时去官网上面的加群按钮加入, 正在修复中...), 和我们一起设计定制 Fireball :D

三个阶段后, 我们可以再来看看其他一些技能树:

css: 对于游戏开发不是必要的, 如果你不做页面排版, 单纯只是做 h5 游戏开发, 那么掌握 css 对你的帮助更多的是思路上的开阔. css 作为一门较为成熟的排版 DSL, 他归纳了许多优秀的思想, 这些设计思想可以帮助你应用在其他领域, 包括你自己设计的游戏 UI 系统.

Dom Event: 你需要掌握一些简单的 Dom Event, 用他们来做 Input 响应. 那么更深入的 Dom Event 学习是否有必要呢? 答案是肯定的, 了解 bubble phase, capture phase 和一些常用消息不会消耗你多少时间, 但是他却能够在你整个 h5 开发过程中解释非常多的疑问, 所以花点时间去学习, 也就一天就搞定的事情.

Web Audio: 简单的说, 目前的主流浏览器对这个东西的支持都是渣, 往远处看 Web Audio 确实很好的归纳了声效编程的一些基础知识点. 所以有多余时间就好好的学习一下.

题主到了这里, 技能树的基础点大概就点的差不多了, 自己根据需要继续就是了. html5 游戏开发很有趣, 主要是快捷, 写点代码开个 devtools debug 非常的轻松愉快, 题主选了个好方向. HTML5 2D游戏引擎研发系列 第一章 兄弟，其实没那么麻烦，我现在和一个同事业余时间在做h5游戏，我们用的是cocos2dx-js，很简单，你只需要js和了解cocos2dx框架就行！ 加一个技能树路线 c++ -＞ emscripten webgl 找一家做HTML5游戏的公司，问免费打工加学习要不要，要的话就OK了，不但有经验还学到了东西并且是免费的。