html5游戏开发案例大全VeloMaze

　　html5游戏的生命力非常的短暂，为了满足广大游戏玩家的需求和不会让游戏玩家感到厌烦，必须要对进行html5游戏开发。那么，下面给大家介绍一些html5游戏开发案例中比较出名的——VeloMaze。一起来了解一些VeloMaze游戏开发的相关知识吧。

　　那什么是VeloMaze呢?VeloMaze是被许多点状恐龙(迅猛龙)占据的迷宫。迅猛龙希望小球能一直在迷宫中移动。由于迷宫的连续性，它可以说是没有终点的。但是每当你通过一级关卡，就会给你之后的玩家造成更多麻烦，因为他(她)会获得另一个小球!是不是很有趣?这就是迷宫中的生活。

　　读取加速度计数据非常简单，不过标准的缺失使得该过程比预想的更加难以实现。首先，快速调查了小组内现有的各种不同的平台和浏览器组合，为适应各种组合方式，编写了如下代码：

　　/*这里检查游览器是否支持DeviceOrientationEvent事件(链接到W3C)。*/

　　if(window.DeviceOrientationEvent){

　　window.addEventListener('deviceorientation',function(e){

　　//我们从事件“e”中获取角度值并转化成弧度值。

　　leftRightAngle=e.gamma/90.0*Math.PI/2;

　　frontBackAngle=e.beta/90.0*Math.PI/2;

　　},false);

　　}elseif(window.OrientationEvent){//另一个选项是Mozilla版本同样的东西

　　window.addEventListener('MozOrientation',function(e){

　　//在这里将长度值当做一个单位，并转换成角度值，看起来运行的不错。

　　leftRightAngle=e.x*Math.PI/2;

　　frontBackAngle=e.y*Math.PI/2;

　　},false);

　　}else{

　　//自然地，没有浏览器支持的大多数人会获取这个。

　　setStatus('Yourdevicedoesnotsupportorientationreading.PleaseuseAndroid4.0orlater,iOS(MBPlaptop

　　isfine)orsimilarplatform.');

　　}

　　结果是，代码可以在版本较新的Chrome中正常运行，也有人反馈说说它也可以运行在较新版本的iOS上的Safari浏览器当中(但是我手头上的Safari并不支持)。我决定不再试图寻找那种能读取所有可能用的浏览器中加速度计数据的普适性解决方案，因为现实是我们在Node淘汰赛的编码环节中个只有48小时的时间，而当时游戏的架构还没有完成。

　　我决定使用Sylvester，它是一个碰撞检测的向量和矩阵数学库。其实我也可以使用Box2DJS来节省时间，但是由于有过Sylvester的使用经验，并且所需的碰撞检测比较简单，我还是决定使用Sylvester。检查小球是否落到洞里去的代码如下所示：

　　functioncheckBallHole(ball,hole,dropped){

　　//用Sylvester定义洞和求的位置为矢量对象

　　varholeVector=$V([hole.x,hole.y]);

　　varballVector=$V([ball.x,ball.y]);

　　//在Sylvester中用向量简单的计算距离

　　if(ballVector.distanceFrom(holeVector)

　　//用球的位置作为变量执行回调函数

　　dropped(ballVector);

　　}

　　}

　　所以事实上这里没有什么复杂的：如果你的小球的中心位于洞内，那么就会触发“dropped”的函数。这段代码在每帧运行一次，那么以前开发过游戏的朋友都知道，这种实现方式可能会造成小球在这一帧内飞跃洞穴而没有掉进去。然而，在日常生活中我们知道，如果你用足够快的速度将小球推向洞穴，它是可以滑过而不掉落的，所以这不是个问题。

　　这个游戏中也有墙体，所以碰撞检测也是必须要做的。Sylvester提供了一种目标与计算线状对象的放发，我用的就是这个。简单的代码如下：

　　//计算球和墙壁碰撞时的冲击矢量数据

　　functionimpactBallByWall(ball,wall){

　　varballVector=$V([ball.x,ball.y]);

　　//定义墙体为线段(x1,y1)(x2,y2)

　　varwallSegment=Line.Segment.create(

　　$V([wall.sx,wall.sy]),

　　$V([wall.dx,wall.dy]));

　　//计算墙与球的最近点(几乎就要撞上的那个位置)

　　varcollisionPoint=wallSegment.pointClosestTo(ballVector)

　　.to2D();//neededbysylvestertoconvert3Dto2Dvector

　　//sylvester将矢量数据从3D转化成2D所需的变量，然后看这个距离在当前框架内为多少(并不是在两个框架之间差距多少)

　　vardist=collisionPoint.distanceFrom(ballVector);

　　//天真的假设碰撞只发生在球和墙的距离小于球的半径的情况下

　　if(dist

　　//调整到一个合适的值。较大的逆质量值意味着更大的影响(和较小的质量)

　　varinverseMassSum=1/100.0;

　　//从球心到碰撞点的向量

　　vardifferenceVector=collisionPoint.subtract(ballVector);

　　varcollisionNormal=differenceVector.multiply(1.0/dist);

　　//球陷下去的部分相当于在墙内

　　varpenetrationDistance=ball.r-dist;

　　//碰撞时球的速率

　　varcollisionVelocity=$V([ball.vx,ball.vy]);

　　//从点属性中我们获得冲击速度

　　varimpactSpeed=collisionVelocity.dot(collisionNormal);

　　if(impactSpeed>=0){

　　//计算冲击量。运动能量在每次碰撞是以2-1-0.4=0.6的倍率递减

　　varimpulse=collisionNormal.multiply(

　　(-1.4)*impactSpeed/(inverseMassSum));

　　//冲击只会作用在球上，因为墙被设计为固定的

　　varnewBallVelocity=$V([ball.vx,ball.vy]).add(

　　impulse.multiply(inverseMassSum));

　　//把值传回原来的对象

　　ball.vx=newBallVelocity.e(1);

　　ball.vy=newBallVelocity.e(2);

　　}

　　}

　　}

　　在实现小球和墙体的碰撞过程时我做了许多并非真实的假设(但是跟现实足够接近)。首先，墙体的厚度为零(而不是实际上的5像素)，而且，我没有计算两帧之间发生了什么。很明显，这会导致游戏中球体有能力穿越墙体。通过创建球体在不同帧之间的运动线段并找出球体三角与墙体之间是否有交叉，就很可以容易的测试到是否会发生碰撞。那么我们就必须要计算小球和墙体发生碰撞的位置。在上文的代码段中，这个位置数据就存在变量“collisionPoint”内(见下图)。

　　html5游戏开发案例大全是有很多的，根据不同的游戏html5游戏开发案例也是会不一样，因此建议人们要具体化而言。一品威客网有提供html5游戏开发案例大全、html5游戏开发环境、html5游戏开发等服务，如果您需要游戏开发的话，那就到一品威客网发布任务需求吧。