名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
简介
网页hTML5教程技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让咱们在浏览器上开发建设游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，咱们可以轻松地完成休闲游戏的开发建设。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。
本文由NTFusion团队所作，结合了他们在Google Chrome Web Store上发布的《拯救PAPA》，和大家分享一下使用网页hTML5教程开发建设物理游戏的心得。
搭建物理世界
物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创见物理世界，咱们现在使用的是Box2D物理引擎的JavaScript版本。构建物理世界的时候，首先咱们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理具体参数。
// 创见物理世界具体相关 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)); // 创见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));
Box2D引擎里面有一个很好的功能DebugDraw，可以模拟出咱们预设的物理世界并展示给咱们看，非常适合咱们做快速游戏原型开发建设。物理世界构建完毕后，通过DebugDraw功能咱们就可以看到游戏的原型，这样咱们就可以在这个基础上调整物体的具体参数、制作关卡等等。
// DebugDraw需要一个canvas具体相关，所依咱们先创见b2DebugDraw具体相关，并设置相关具体参数
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
// 捆绑到物理世界具体相关
world.SetDebugDraw(debugDraw);
下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界具体相关：
这些工作完成以后，下一步咱们需要在物理物体上“贴”上图片，这样玩家才可以看到真实的游戏画面。
同步显示对象
首先，咱们需要创见一个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中的物理世界，咱们画上图片之后，就可以见到下图的画面：
动画
DisplayObject与物理物体的同步处理好之后，咱们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的具体效果。通常，动画是由很多张图片组成的，为了减少读取次数，咱们将动画中的所有的图片合成为一张大图，称为SpriteSheet。图3为《拯救PAPA》中1 号工具的动画SpriteSheet：
然后，咱们便可以在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教程 Canvas做在线图像处理
所谓的矩阵的卷积，就是如下图显示的那样，当计算红色框中的数值的时候，分别先提取周围绿框中8个数字，然后与施加的那个矩阵中对应位置相乘，然后把各个乘积加在一起，就得到了最终的值了。
