本文由 NTFusion 团队撰写。 它结合了他们在Google Chrome网上应用店发布的《Save PAPA》，与大家分享使用HTML5开发物理游戏的经验。
在阅读本文之前，您可以通过从 Chrome 网上应用店安装 Save PAPA 来尝试使用它。
构建物理世界
物理游戏中的所有对象都在设定的物理世界中运行。 为了创建物理世界，我们目前使用的是 Box2D 物理引擎的 Javascript 版本。 Box2D引擎中有一个非常好的功能DebugDraw，它可以模拟我们预设的物理世界并展示给我们，非常适合我们做快速的游戏原型开发。
下图是使用 DebugDraw 绘制的《Save PAPA》中的物理世界示例：
图1
在构建物理世界时，我们首先需要定义相关的物理对象，然后根据游戏的特点设置相关的物理参数。
// 创建物理世界实例
varworld=newb2World(newb2Vec2(0,9.8),true); varscale=1/30;/*Box2D中像素和长度单位之间的转换*/ //创建地面并设置其物理属性 varbodyDef=newb2BodyDef(); varbody=world.CreateBody(bodyDef); varfixtureDef=newb2FixtureDef(); FixtureDef.密度=10; FixtureDef.friction=0.3; FixtureDef.restitution=0.1； varpolygonShape=newb2PolygonShape(); PolygonShape.SetAsBox(800*scale,20*scale ); fixtureDef.shape=polygonShape;body.SetType(b2Body.b2_staticBody); body.CreateFixture(fixtureDef); body.SetPosition(newb2Vec2(400*scale,490*scale)); //创建PAPA块及其物理属性 Set varbodyDef=newb2BodyDef(); varbody=world.CreateBody(bodyDef); varfixtureDef=newb2FixtureDef(); fixtureDef.密度=10;/*密度为密度*/fixtureDef.friction=0.3;/*friction为摩擦系数*/fixtureDef.restitution=0.8;/*restitution为弹性系数*/varpolygonShape=newb2PolygonShape(); PolygonShape.SetAsBox(30*比例,30*比例); fixtureDef.shape=polygonShape; body.SetType(b2Body.b2_dynamicBody); 身体。 创建夹具（fixtureDef）； body.SetPosition(newb2Vec2(400*scale,100*scale));
物理世界搭建完成后，我们可以通过DebugDraw函数看到游戏的原型游戏动态，这样我们就可以在此基础上调整物体的参数、创建关卡等。 这些任务完成后，下一步就是将图片“粘贴”到实物上，让玩家看到真实的游戏画面。
同步显示对象
首先，我们需要创建一个DisplayObject类3D素材，它类似于Flash显示列表机制中的显示类。 该类有相应的x、y、旋转等属性，并且有自己的绘制方法，然后以数组的形式实现显示列表。
接下来我们将需要显示的DisplayObject添加到显示列表中，然后与Box2D中对应对象的位置和旋转角度进行同步：
var position =body.GetPosition();
varangle=body.GetAngle(); displayObject.x=position.x/scale; 显示对象.y=位置.y/比例； displayObject.rotation=角度*180/Math.PI;
根据图1的物理世界，我们画图后，可以看到下图：
图2
动画片
DisplayObject与物理对象的同步完成后物理游戏制作物理游戏制作，我们可以将需要显示的图片填充到其中，然后按照一定的时间间隔替换图片，从而达到动画效果。 通常，动画是由许多图片组成的。 为了减少读取次数，我们将动画中的所有图片合并为一张大图片，称为SpriteSheet。 图3是“Save PAPA”中1号工具的动画SpriteSheet：
图3
然后，我们可以根据SpriteSheet中的坐标获取当前帧要显示的图像：
var canvas = document.createElement("canvas");
canvas.width=width;/*width为绘制图案的宽度*/ canvas.height=height;/*height为绘制图案的高度*/ canvas.getContext('2d')。 drawImage( 工作表,x,y,宽度,高度,0,0,宽度,高度);
总结
HTML5技术还在逐步完善之中，我们的程序员也在不断努力，创作出更多优秀的作品。 本文讨论的物理世界的构建、显示对象和动画播放技术对于我们制作HTML5游戏非常有用。 我们期待看到HTML5技术的持续发展以及更多创新的HTML5网页游戏。
欢迎大家来尝试NTFusion团队制作的HTML5物理游戏《救援PAPA》！
文章来源:https://www.php1.cn/detail/ShiYong_HTML5_ZhiZuoWuLiYouXi.html
