第二章又拖到现在才发布，话说本次更新离上次已经很久了。不知道大家还记得上一章讲的内容否？

在上一章中，我们创建了各式各样的地形，今天我们就在这个地形之上，创建一辆自行车，并让它受到我们的控制。首先放上一张截图：

没看过上一章的同学可以先移步到上一章。在了解上一章的内容之后，读起本章方可容易一些。

HTML5物理游戏开发 - 越野山地自行车（一）建立各式各样的地形

http://blog.csdn.net/yorhomwang/article/details/19710537

※再次声明，本次开发用到了lufylegend.js开源html5游戏引擎和box2dweb物理引擎，请到官方网站下载使用。官方网站地址已在第一章中说过了。

一，基础知识

首先我们来科普几个知识，只有了解这些知识之后，读起下面的内容才不会感觉头疼。

1，如何使刚体移动

在box2dweb中，要想使刚体移动，不能单纯地改变x、y坐标。其一，这样会使你的游戏失去了物理运动的效果；其二，在box2dweb中，直接调整刚体的位置是一个十分不好的方法，会违背物理运动原理，只有在刚体创建前的时候才用这个方法。所以在我们的自行车创建出来以后，想要移动刚体，最好的方法就是给刚体施加一个力。

在box2dweb中，施加力的方法有：ApplyForce、ApplyImpulse、SetLinearVelocity。本次使用的只有ApplyForce。其余的几种可以暂且不管。如果你确实想了解的话，可以看看ladeng6666的这篇文章：让刚体听我的——ApplyForce、ApplyImpulse、SetLinearVelocity

ApplyForce的用法如下：

ApplyForce(vec, pos)

这个函数的第个一个参数是给物体施加力的向量（b2Vec2）；第二个pos是施加的位置，一般不确定位置的时候就取物体的重心（可以用b2Body的GetWorldCenter获取）。

2，如何构造像自行车这样形状复杂的物体

如何构造像自行车这样形状复杂的物体确实是一个值得思考的话题。对我们而言，第一个出现在脑子里的想法就是创建一个多边形刚体。当然这样实现起来极其麻烦，而且不仅仅是麻烦，做到最后更扫兴的是使用这种方法弄出来的刚体碰撞检测有问题，换言之，一个原本是凹凸多边形的刚体，突然就成了柔体，碰在其他物体上就会渗入其他物体里，so qipa~

那到底应该怎么办呢？我们不妨假设自己就真正地在制作一辆自行车。首先，我们要把材料和工具准备好。材料就是几个木块，工具就是一个锤子，一把铁钉。接下来，我们要做的就是用锤子铁钉把几个木块组装起来就ok了。这样看起来虽然so easy，但是有朋友会问，在box2dweb里到哪里去找锤子铁钉呢？锤子铁钉在box2dweb里倒是真没有，不过有一个更先进的东西——关节（joint）。

在这里主要就是需要两种关节：旋转关节（用于把轮子和支架绑起来），焊接关节（用于把各个支架固定起来）。

这两个关节在box2dweb里的使用方法依然不是那么简单，因此同样用到了lufylegend.js的封装。接下来就对这几个关节的用法进行说明。

■setRevoluteJoint(b2BodyA, b2BodyB, limits, motors)

b2BodyA：表示物体A （b2Body对象，可以用LSprite的box2dBody属性获取）
b2BodyB：表示物体B（b2Body对象，可以用LSprite的box2dBody属性获取）
limits：表示旋转角度限制数组，这个数组的内容是：[最小角度,最大角度]，它在这里可以限制旋转关节旋转的角度（可以不传）
motors：表示马达数组，这个数组的内容是：[力度,速度]，马达可以有很多用途，在这里，它可以是关节自动进行旋转（可以不传）

示例：

var backLayer,cLayer;function main(){    LGlobal.setDebug(true); backLayer = new LSprite();  addChild(backLayer);    LGlobal.box2d = new LBox2d();cLayer = new LSprite();cLayer.x = 300;cLayer.y = 390;backLayer.addChild(cLayer);cLayer.addBodyPolygon(600,10,0,5,0.4,0.2);//加入一个动态的圆形物体1box01 = new LSprite();box01.x = 250;box01.y = 200;backLayer.addChild(box01);box01.addBodyCircle(100,0,0,1,1,0.4,0.2);box01.setBodyMouseJoint(true);//加入一个静态的圆形物体2box02 = new LSprite();box02.x = 250;box02.y = 150;backLayer.addChild(box02);box02.addBodyCircle(10,0,0,0,1,0.4,0.2);//加入一个旋转关节LGlobal.box2d.setRevoluteJoint(box01.box2dBody, box02.box2dBody ,[-360,720*5],[450,2]);
}

■setWeldJoint (b2BodyA, b2BodyB)

b2BodyA：表示捆绑对象物体A（b2Body对象，可以用LSprite的box2dBody属性获取）
b2BodyB：表示捆绑对象物体B（b2Body对象，可以用LSprite的box2dBody属性获取）

示例：

var backLayer,cLayer;
function main(){    LGlobal.setDebug(true); backLayer = new LSprite();  addChild(backLayer);    LGlobal.box2d = new LBox2d();cLayer = new LSprite();cLayer.x = 300;cLayer.y = 390;backLayer.addChild(cLayer);cLayer.addBodyPolygon(600,10,0,5,0.4,0.2);//加入一个动态的圆形物体1box01 = new LSprite();box01.x = 200;box01.y = 100;backLayer.addChild(box01);box01.addBodyCircle(50,0,0,1,1,0.4,0.2);box01.setBodyMouseJoint(true);//加入一个动态的圆形物体2box02 = new LSprite();box02.x = 250;box02.y = 100;backLayer.addChild(box02);box02.addBodyCircle(50,0,0,1,1,0.4,0.2);box02.setBodyMouseJoint(true);//加入一个焊接关节LGlobal.box2d.setWeldJoint(box01.box2dBody, box02.box2dBody);
}

ok，基础知识差不多讲完了。进入正题吧。

二，修改Main类

上一章中的Main类大家还记得否？上次我没有加入真正的自行车，而是拿一个圆形小球在那里充当着，主要是给大家看看镜头跟随效果和各式各样的地形。这次既然要实现一个自行车，那么就要先把小球换掉，于是更改addBicycle函数，更新后如下：

Main.prototype.addBicycle = function(){var s = this;//创建自行车对象s.bicycleObj = new Bicycle(50,385);s.addChild(s.bicycleObj);
};

这里明显用到了Bicycle这个类。那么，我就立刻把笔尖指向Bicycle类吧，这个类是本章的重点内容，前面的基础讲解就是为这个类作铺垫的。

三，自行车类（Bicycle）

先看看构造器：

function Bicycle(sx,sy){var s = this;base(s,LSprite,[]);/**初始坐标*/s.sx = sx;s.sy = sy;/**刚体所属LSprite对象列表*/s.bodyList = new Array();/**添加左右移动力度向量*/s.moveVec = new LStage.box2d.b2Vec2();/**添加拉压操作力度向量*/s.tcVec = new LStage.box2d.b2Vec2();/**添加事件*///键盘按下事件LEvent.addEventListener(window,LKeyboardEvent.KEY_DOWN,function(e){s.onKeydown(e,s);});//键盘松开事件LEvent.addEventListener(window,LKeyboardEvent.KEY_UP,function(e){s.onKeyup(e,s);});//初始化s.init();
}

构造器代码加入了详细的注释，所以我们直接进入讲解Bicycle的init函数。这是代码：

Bicycle.prototype.init = function(){var s = this;var sx = s.sx;var sy = s.sy; /**轮子半径*/var wheelR = 20;/**轮子之间的距离*/var gapBetweenWheelAndWheel = 100;/**车手柄到轮子的距离*/var gapBetweenWheelAndHandlebar = 50;/**车把尺寸*/var handlebarWidth=20,handlebarHeight=5;/**座椅到轮子支架的距离*/var gapBetweenWheelFrameAndSeat = 30;/**座椅尺寸*/var seatWidth=30,seatHeight=5;/**支架尺寸*/var frameSize = 10;/**加入支架*///轮子上的支架var frameAObj = new LSprite();frameAObj.x = sx+gapBetweenWheelAndWheel/2;frameAObj.y = sy+frameSize/2;frameAObj.addBodyPolygon(gapBetweenWheelAndWheel,frameSize,1,5);world.addChild(frameAObj);s.bodyList.push(frameAObj);//车把到轮子的支架var frameBObj = new LSprite();frameBObj.x = sx+gapBetweenWheelAndWheel-frameSize/2;frameBObj.y = sy-gapBetweenWheelAndHandlebar/2;frameBObj.addBodyPolygon(frameSize,gapBetweenWheelAndHandlebar,1,2);world.addChild(frameBObj);s.bodyList.push(frameBObj);/**加入车把*/var handlebarObj = new LSprite();handlebarObj.x = sx+gapBetweenWheelAndWheel-handlebarWidth/2-frameSize;handlebarObj.y = sy-gapBetweenWheelAndHandlebar+handlebarHeight/2;handlebarObj.addBodyPolygon(handlebarWidth,handlebarHeight,1,.5);world.addChild(handlebarObj);s.bodyList.push(handlebarObj);/**加入座椅*///座椅到轮子支架的支架var seatFrameObj = new LSprite();seatFrameObj.x = sx+30;seatFrameObj.y = sy-gapBetweenWheelFrameAndSeat/2;seatFrameObj.addBodyPolygon(frameSize,gapBetweenWheelFrameAndSeat,1,1);world.addChild(seatFrameObj);s.bodyList.push(seatFrameObj);//座椅var seatObj = new LSprite();seatObj.x = sx+30;seatObj.y = sy-gapBetweenWheelFrameAndSeat-seatHeight/2;seatObj.addBodyPolygon(seatWidth,seatHeight,1,.5);world.addChild(seatObj);s.bodyList.push(seatObj);/**加入轮子*///左边轮子Avar wheelAObj = new LSprite();wheelAObj.x = sx-wheelR;wheelAObj.y = sy;wheelAObj.addBodyCircle(wheelR,wheelR,wheelR,1,2.5,.2,.4);world.addChild(wheelAObj);s.bodyList.push(wheelAObj);//右边轮子Bvar wheelBObj = new LSprite();wheelBObj.x = sx+gapBetweenWheelAndWheel-wheelR;wheelBObj.y = sy;wheelBObj.addBodyCircle(wheelR,wheelR,wheelR,1,2.5,.2,.4);world.addChild(wheelBObj);s.bodyList.push(wheelBObj);/**添加关节*///轮子A和轮子支架的旋转关节LStage.box2d.setRevoluteJoint(frameAObj.box2dBody, wheelAObj.box2dBody);//轮子B和轮子支架的旋转关节LStage.box2d.setRevoluteJoint(frameAObj.box2dBody, wheelBObj.box2dBody);//车把到轮子的支架和轮子支架的焊接关节LStage.box2d.setWeldJoint(frameAObj.box2dBody, frameBObj.box2dBody);//车把到轮子的支架和车把的焊接关节LStage.box2d.setWeldJoint(handlebarObj.box2dBody, frameBObj.box2dBody);//轮子的支架和座椅的焊接关节LStage.box2d.setWeldJoint(seatFrameObj.box2dBody, frameAObj.box2dBody);//座椅的支架和座椅的焊接关节LStage.box2d.setWeldJoint(seatFrameObj.box2dBody, seatObj.box2dBody);/**遍历所有自行车零件刚体*/for(var key in s.bodyList){var obj = s.bodyList[key];//加入鼠标拖动if(obj.box2dBody)obj.setBodyMouseJoint(true);//设置对象名称obj.name = "bicycle";}/**设置主刚体*/s.mainBody = frameAObj.box2dBody;/**设置拉压操作刚体*/s.tcBody = wheelBObj.box2dBody;
};

这个函数看上去超长，但是逻辑却异常简单，大部分是重复的代码，再通过上面的基础讲解外加注释，看上去应该是无压力了吧，当然如果有不懂的，欢迎在本文下方留言。其中，我为了大家测试时的简化操作，给每一块刚体都设置了鼠标拖动，但是又由于刚体有很多，所以我把它们统统装在bodyList这个数组了，然后最后用遍历的方式给每一个刚体都设置了鼠标拖动。
最后来看看如何实现键盘操作。不难发现，在构造器里有这么一段代码：

/**添加事件*/
//键盘按下事件
LEvent.addEventListener(window,LKeyboardEvent.KEY_DOWN,function(e){s.onKeydown(e,s);
});
//键盘松开事件
LEvent.addEventListener(window,LKeyboardEvent.KEY_UP,function(e){s.onKeyup(e,s);
});

在段代码里，我们还用到了onKeydown和onKeyup这两个函数。代码如下：

Bicycle.prototype.onKeydown = function(e,s){var force = 50;switch(e.keyCode){//向右case 39:s.moveVec.x = force;break;//向左case 37:s.moveVec.x = -force;break;//向上case 38:s.tcVec.y = -force;break;//向下case 40:s.tcVec.y = force;break;default:return;}/**施加移动的力*/s.mainBody.ApplyForce(s.moveVec,s.mainBody.GetWorldCenter());/**施加拉压的力*/s.tcBody.ApplyForce(s.tcVec,s.tcBody.GetWorldCenter());
};
Bicycle.prototype.onKeyup = function(e,s){/**清空力度相量*/s.moveVec.SetZero();s.tcVec.SetZero();
};

在这里我们用到了之前讲过的ApplyForce。之前讲的时候，没有具体讲第一个参数是因为没有实际用到讲了等于徒劳。现在可以看到，这个b2Vec2有x，y属性，这两个属性可以控制力的方向。x<0向左，x>0向右，y>0向下，y<0向上。

当然，tcVec和moveVec是两个不同的向量，也就是说控制的不是同一个效果。moveVec是控制移动自行车的，这个不用多说。而tcVec是用于拉、压自行车的，我们知道，当在游戏中要开翻车的时候，往往可以用拉、压的方式来操控自行车，使其重新平衡，这个tcVec就是干这活儿的。

BTW，如果你不知道tcBody和mainBody是什么，可以看看Bicycle里init函数的代码。

添加完键盘事件后，我们就可以通过方向键来控制自行车了。操作方式为：上-拉，下-压，左-后退，右-前进。大家可以打开本文最下方的测试链接进行测试。

ok，至此，运行一下代码，得到的就是本文最上方图片所示的效果了。（什么？太丑了？你指的是我还是这个游戏？这个游戏啊，没贴图当然丑呢。）

奉上源代码下载地址：http://files.cnblogs.com/yorhom/box2dBicycle%282%29.rar

测试地址：http://www.cnblogs.com/yorhom/articles/box2dweb_bike2.html

下一章预告：目前，咋们的自行车是金刚不坏之身，你怎么摔它，它就是摔不碎（除非你把显示器抱起来，然后使劲往地上摔）。但是这不科学对吧……所以在下一章，我们就来看看，如何把这个自行车摔得支离破碎，体无完肤。哈哈，尽情期待~

本章就先到这里了。如果文章有任何疏漏之处，欢迎指正。当然，有不懂之处也欢迎各位在本文下方留言，我会尽力回复大家的。

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

HTML5物理游戏开发 - 越野山地自行车（二）创建一辆可操控的自行车相关推荐

HTML5物理游戏开发 - 越野山地自行车（三）粉碎自行车
自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了. ...
Html5 Egret游戏开发成语大挑战（二）干净的eui项目和资源准备
Html5 Egret游戏开发成语大挑战(二)干净的eui项目和资源准备现在我们使用egret来起步开发一个名叫<成语大挑战>的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去 ...
HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
《HTML5完美游戏开发》——1.2 为什么要关注Open Web Game
本节书摘来自异步社区<HTML5完美游戏开发>一书中的第1章,第1.2节,作者: [白]Egor Kuryanovich , 等更多章节内容可以访问云栖社区"异步社区" ...
Html5 Egret游戏开发成语大挑战（五）界面切换和数据处理
Html5 Egret游戏开发成语大挑战(五)界面切换和数据处理经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备 ...
《MFC游戏开发》笔记二建立工程、调整窗口
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9300383 作者:七十一雾央新浪微博:http:// ...
游戏开发入门（二）游戏中的设计模式
视频链接:游戏开发入门(二)游戏中的设计模式(3节课时常:约2小时40分钟) 该视频主要围绕游戏中常见的设计模式展开讲解并实践,需要大家多多实践与理解笔记与总结(请先学习视频内容): 1.有必要深 ...
Html5 Egret游戏开发成语大挑战（一）开篇
最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...

HTML5物理游戏开发 - 越野山地自行车（二）创建一辆可操控的自行车