在线演示：http://yujianshenbing.w108.mc-test.com/game/donkeyjump/index.html（如果无法访问，请大家暂时先直接下载源码运行）

源码下载：请查看附件

操作方法：游戏开始后，按键盘“A”或“D”控制左右方向，也可以通过方向键控制。

　　（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考。本文所有内容及结论均属个人意见，如有不同见解，欢迎指正。）

　　经过两个多月断断续续的开发，我的第一款游戏《驴子跳》终于完成了，此时，我已经迫不及待地想跟大家分享这个过程，包括学习方法、游戏源码、和经验心得；本文的目的，是希望能帮助更多的人快速地加入到HTML5的大团队，同时也希望能得到各种大侠的指点。

　　本文所有内容基于个人的学习过程和经验，因此在整理文章的过程中，我也假设你目前对游戏开发一无所知，甚至对HTML和JavaScript也不太了解。

　　我将文章分为5个部分：

?

1. 我将会告诉你如何学习游戏开发，如何入门HTML5
2. 以我的游戏框架为例，初步了解游戏模型和组成
3. 通过讲解我的“游戏逻辑结构”，让你真正可以开始动手创建HTML5游戏
4. 分享诸多亲身体验的性能问题和解决方案
5. 一些其它的东西

一、如何学习HTML5游戏开发？

　　如果是刚接触HTML5，也是第一次开发游戏，过程中难免会遇到这样那样的问题，我所遇到的第一个问题就是：我对HTML5还不是很了解。因此我首先要分享的就是学习方法和路线：

　　如果你还不是很熟悉HTML、CSS、和JavaScript，请不要急于求成，只要打好基础，一切都会变得容易起来。

　　如何才算是“熟悉”？

?

1. HTML常用标签你全都认识并能说出它们相同、和不同的特性吗？
2. CSS中所有属性是否熟悉？特别是CSS3中的新特性和动画？
3. 是否已经完全明白JavaScript面向对象、闭包、原型链、作用域等概念，并能熟练运用？
4. 是否掌握了一系列JavaScript性能优化的方法和经验？

?

　　如果你在回答这些问题时还不是很有信心，我建议先补充下这方面的知识。

　　也许你会问：做HTML5游戏不是主要使用Canvas画布和JavaScript吗？为什么对HTML和CSS还有这么多要求？最开始，我也是这样以为的，不过后来我发现HTML5游戏中并非只有Canvas，其实CSS仍然显得非常重要，Canvas应该只做一些它更擅长的事，比如动画和特效，而其它的事情交给其它方式来实现吧。

　　（题外话：这就像前几年流行web2.0时，不少公司和客户，都明确规定页面不允许出现table标签，于是乎我们写了一堆UL标签和CSS代码，来实现类似于表格的效果，并担心各浏览器的差异。我至今仍在怀疑，这种做法除了符合所谓的“标准”，还有什么明显的优势？）

　　言归正传，例如我们要开发一个游戏“热血传奇”，首先分析下图：图中蓝色背景的部分应该使用Canvas来绘制，而红色背景的部分则应该使用普通的HTML标签和CSS来开发。

　　判定标准主要是依据该模块的效果复杂度、和刷新频率，在“热血传奇”中，界面包含人物、地图、技能效果等主场景（蓝色背景部分）；还有状态工具栏、人物属性窗口、物品窗口、技能窗口等（红色背景部分）。

　　很明显，主场景中的人物、技能效果、地图等随时都在发生变化，这种场景才能体现出Canvas的优势；而其它的例如状态工具栏、人物属性窗口等，更新的频率很低，只有在用户驱动下才会发生改变，且不包含复杂的效果，因此我们可以把它当成是一个普通页面的一部分，使用普通的HTML结构和CSS样式，再加上一些控制逻辑，即可实现。

　　为什么一定要尽量使用HTML结构和CSS的方式来实现呢？因为这会降低开发的复杂度、工作量和成本，更重要的是，在性能上会有更好的体现（关于性能上的问题，后面会