脚本宝典收集整理的这篇文章主要介绍了html5教程-使用HTML 5制作物理游戏，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。

本文由NTFusion团队所作，结合了他们在Google Chrome Web Store上发布的《拯救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。

在阅读本文之前，您可以从Chrome Web Store安装《拯救PAPA》来尝个鲜儿。

搭建物理世界

物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。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》!

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-使用HTML 5制作物理游戏全部内容，希望文章能够帮你解决html5教程-使用HTML 5制作物理游戏所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。