html5技术为现今web应用程序在中提供了非常广阔的发挥空间，其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用canvas和强大的javascript引擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。
本文由ntfusion团队所作，结合了他们在google chrome web store上发布的《拯救papa》和大家分享一下使用html5开发物理游戏的心得。
在本文之前，您可以从chrome web store安装《拯救papa》来尝个鲜儿。
搭建物理世界
物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是版本。box2d引擎里面有一个很好的功能debugdraw，可以模拟出我们预设的物理世界并展示给我们看，非常适合我们做快速游戏原型开发。
下图就是使用debugdraw绘制出来的《拯救papa》中的物理世界实例：
图1
构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。
// 创建物理世界实例
var world = new b2world(new b2vec2(0, 9.8), true);
var scale = 1 / 30; /*像素与box2d里的长度单位的转换*/
// 创建地面和其物理性质的设定
var bodydef = new b2bodydef();
var body = world.createbody(bodydef);
var fixturedef = new b2fixturedef();
fixturedef.density = 10;
fixturedef.friction = 0.3;
fixturedef.restitution = 0.1;
var polygonshape = new b2polygonshape();
polygonshape.setasbox(800 * scale, 20 * scale);
fixturedef.shape = polygonshape; body.settype(b2body.b2_staticbody);
body.createfixture(fixturedef);
body.setposition(new b2vec2(400 * scale, 490 * scale));
www.2cto.com
// 创建papa方块和其物理性质的设定
var bodydef = new b2bodydef();
var body = world.createbody(bodydef);
var fixturedef = new b2fixturedef();
fixturedef.density = 10; /* density 为密度*/
fixturedef.friction = 0.3; /* friction 为摩擦系数*/
fixturedef.restitution = 0.8; /* restitution 为弹性系数*/
var polygonshape = new b2polygonshape();
polygonshape.setasbox(30 * scale, 30 * scale);
fixturedef.shape = polygonshape;
body.settype(b2body.b2_dynamicbody);
body.createfixture(fixturedef);
body.setposition(new b2vec2(400 * scale, 100 * scale));
物理世界构建完毕后，通过debugdraw功能我们就可以看到游戏的原型，这样我们就可以在这个基础上调整物体的参数、制作关卡等等。这些工作完成以后，下一步我们需要在物理物体上“贴”上图片，这样玩家才可以看到真实的游戏画面。
同步显示对象
首先，我们需要创建一个displayobject类，其类似于flash显示列表机制中的显示类，该类有x、y和rotation等相应属性，并且有自身的绘图方法，再通过数组形式来实现显示列表。
下一步，我们将需要显示的displayobject加入显示列表，再将其与box2d中对应的物体的位置，自身旋转角度进行同步：
var position =body.getposition();
var angle =body.getangle();
displayobject.x = position.x / scale;
displayobject.y = position.y / scale;
displayobject.rotation = angle * 180 / math.pi;
根据图1中的物理世界，我们画上图片之后，就可以见到下图的画面：
图2
动画
displayobject与物理物体的同步处理好之后，我们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的效果。通常，动画是由很多张图片组成的，为了减少读取次数，我们将动画中的所有的图片合成为一张大图，称为spritesheet。图3为《拯救papa》中1号工具的动画spritesheet：
图3
然后，我们便可以在spritesheet中根据坐标获取当前帧所需要显示的图片：
var canvas = document.createelement("canvas");
canvas.width = width;/*width为所画图案的宽度*/
canvas.height = height;/* height为所画图案的高度*/
canvas.getcontext('2d').drawimage(sheet, x, y, width, height, 0, 0, width, height);
总结
html5技术还在逐步自身完善当中，我们的程序员也正在不断的努力，创作更多的好作品。而本文所谈及的物理世界的构建，显示对象以及对动画播放等技术，对于我们制作html5的游戏中是非常有用的。我们期待看到html5技术的不断发展和更多创新的html5网页游戏。
欢迎大家来试玩ntfusion团队制作的html5物理游戏《拯救papa》!
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论