物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。Box2D引擎里面有一个很好的功能DebugDraw，可以模拟出我们预设的物理世界并展示给我们看，非常适合我们做快速游戏原型开发。
下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界实例：
构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。
查看原始代码 物理世界构建完毕后，通过DebugDraw功能我们就可以看到游戏的原型，这样我们就可以在这个基础上调整物体的参数、制作关卡等等。这些工作完成以后，下一步我们需要在物理物体上“贴”上图片，这样玩家才可以看到真实的游戏画面。 END
sp; 首先，我们需要创建一个DisplayObject类，其类似于Flash显示列表机制中的显示类，该类有x、y和rotation等相应属性，并且有自身的绘图方法，再通过数组形式来实现显示列表。 下一步，我们将需要显示的DisplayObject加入显示列表，再将其与Box2D中对应的物体的位置，自身旋转角度进行同步：
查看原始代码根据图1中的物理世界，我们画上图片之后，就可以见到下图的画面：
END
DisplayObject与物理物体的同步处理好之后，我们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的效果。通常，动画是由很多张图片组成的，为了减少读取次数，我们将动画中的所有的图片合成为一张大图，称为SpriteSheet。图3为《拯救PAPA》中1号工具的动画SpriteSheet：
然后，我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片：
查看原始代码END
an>HTML5技术还在逐步自身完善当中，我们的程序员也正在不断的努力，创作更多的好作品。而本文所谈及的物理世界的构建，显示对象以及对动画播放等技术，对于我们制作HTML5的游戏中是非常有用的。我们期待看到HTML5技术的不断发展和更多创新的HTML5网页游戏。 END