HTML5游戏开发,驴子跳.pdfVIP

JavaScriptHTML5canvasHTML5游戏开发驴子跳

在线演示：

/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的方式来实现呢？因为这会降低开发

的复杂度、工作量和成本，更重要的是，在性能上会有更好的体现（关于性能上

的问题，后面会详细讨论）。

假设你对这些知识都已经非常了解了，下一步要做的，就是全面了解Canvas

画布。

刚开始了解它时，你会发现它并非你想象中的那么完美，它只提供了一系列

“简陋”的方法，你甚至会怀疑使用它们真的能开发出效果绚丽的游戏吗？不过

仔细想想，只要在这套API上稍作扩展，还有什么事情是我们办不到的呢？