HTML5物理游戏开发 - 越野山地自行车（一）建立地行
制作一个越野自行车小游戏，让一个小自行车在各种地形之间来回颠簸。今天就先来看看越野自行车里的地形是如何实现的。
一，准备工作
首先你需要下载lufylegend和box2dweb 这两个引擎。
box2dweb可以到这里下载：
http://code.google.com/p/box2dweb/downloads/list
lufylegend可以到这里：
http://lufylegend.com/lufylegend
关于lufylegend怎么用，可以到这里看看API文档：
http://lufylegend.com/lufylegend/api
Box2dWeb怎么用？其实我也不太清楚，这次主要用lufylegend封装的API，所以掌握lufylegend对box2dweb的操作就可以了。
在此之后，我们创建一个项目，就叫box2dBicycle吧，然后在里面分别建立data，lib，main文件夹和index.html。如下：
box2dBicycle
|---data
|---lib
|---main
|---index.html
接下来，我们来介绍一下这些文件夹是用来装什么的。data文件夹是用来装游戏中的关卡数据的，我准备把游戏中的关卡用json装起来，这些json就放在这个文件夹里。lib文件夹是装引擎用的，也就是box2dweb和lufylegend.js。main就是放我们源代码文件的。好了，介绍完了准备工作，我们来看看具体的代码。
二，初始游戏
既然是html5游戏，那么一定要有html代码，这些代码就在index.html中放着好了，代码如下：
中间有一大段是js代码，这些代码就是游戏中的数据加载和lufylegend初始化，游戏全屏设置等。
接下来逐句解释一下这个js里的代码。首先是
也许你在纳闷这个init函数是啥，让我来告诉大家好了，这个函数是初始化lufylegend，也就是说是lufylegend中定义的。我这么写一行就说明要在id为"mylegend"的div中创建一个宽800，高450的canvas，游戏界面刷新次数为50ms一次，当界面初始完成后，调用gameInit函数。当然，具体用法还是看lufylegend.js api文档吧。
接着是一些变量：
这些变量各有所用，打头的那个world是用于保存整个界面对象用的，现在暂时没有赋值，但在后面大家会看到他是一个Main类的实例，Main类是啥？在后面慢慢讲吧。然后JS_FILE_PATH和LEVEL_FILE_PATH是用来保存公共路径用的。loadData是装有需要加载资源的数组，这个数组里的内容写法有点特殊，不过是个lufylegend的固定写法，所以必须遵循库件规范。其中，每一条就是一个资源，可以是图片，可以是js文件，txt文件，mp3文件……在这里我用的是加载js，为什么不加载图片呢？因为没有用到图片呗……加载js文件时，需要设置path属性（也就是js文件路径），type属性（用于识别加载方式，加载js则填写为"js"，txt就是"txt"）。当然加载图片时的写法就不一样了，可以参考我以前写的文章，里面有加载图片时的资源列表的写法。
好了，这些变量解释完了，就来看gameInit部分了：
首先，因为我们的游戏中暂时没有图片，所以为了看到物理刚体我们就要设置debug模式，也就是通过LStage.setDebug(true)来实现。然后初始lufylegend中的box2d，所以用到了LStage.box2d = new LBox2d()。再来看看接下来的这段代码：
这些代码有啥用呢？还是让我来告诉你吧，首先开头的if是为了限制平台用的，LStage这个静态类有一个canTouch属性，用来判断是否是移动端。如果是（true），那么就进入if中的代码，if中的代码是为了设置全屏用的，前两行是把body元素位置归0，然后通过LSystem.screen(LStage.FULL_SCREEN)来设置全屏，改LStage.stageScale属性是为了设置全屏模式，除了LStageScaleMode.SHOW_ALL之外，还有其他的几种，具体的还是看API文档吧。
最后到了加载资源这一步骤：
LLoadManage这个类功能挺强大的，主要是可以将多个数据一起加载到游戏中（这里所说的“多个数据”就是上面我们写的那个名叫loadData的数组，也就是传给LLoadManage.load的第一个参数）。详细用法请移步API文档。这里只介绍最后一个参数，这个参数是一个function，这个function是在所有资源被加载完成之后调用的。所以说我们游戏一切的开始都应该是在这个函数中调用的，要不然加载的图片和js文件就使用不上了呢。当然在这里这个函数里的内容就是实例一个Main类出来，然后用addChild这个lufylegend中的方法把他加入到界面中，并调用init这个成员函数来初始化游戏，这个Main类会在下文作详细解释。关于addChild(obj)，这个函数是用来添加显示对象到底层用的，也有对应的spriteObj.addChild(obj)，也就是把obj添加到spriteObj里，这个spriteObj必须是一个LSprite，具体的解释还是看API文档吧，讲得绝对比我详细。
ok，游戏代码中的index.html讲完了。接下来切换主题，蹦到很基础的lufylegend添加刚体讲解。
三，基础讲解
1，什么是刚体
说实话，这个刚体是什么我也不是很清楚，我们不妨把它当成一个现实生活中的物体？刚体其实还有一个比较详细的解释，这个解释来自《HTML5 Canvas游戏开发实战》一书：刚体表示十分坚硬的物质，它上面任意两点的位置都是完全不变的，它就像“钻石”那样“坚硬”。
2，在lufylegend中，如何创建刚体
在lufylegend中，可以通过box2dweb创建圆形，方形，凸多边形（凹多边形也可以，但是box2dweb中对凹多边形碰撞处理有一些问题，所以不推荐使用）这几种刚体。
创建圆形刚体
addBodyCircle(radius, cx, cy, type, density, friction, restitution)
■参数：
radius：半径
cx：圆心坐标x
cy：圆心坐标y
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
创建方形刚体
addBodyPolygon(width, height, type, density, friction, restitution)
■参数：
width：矩形宽
height：矩形高
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
创建多边形刚体
addBodyVertices(v, cx, cy, type, density, friction, restitution)
■参数：
v：顶点数组
cx：中心坐标x
cy：中心坐标y
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
ok，有了上面的介绍就可以进入下一个研究环节了。
四，建立各式各样的地形
1，Main类详解
首先来看看类的构造器。
打头的那句var s = this;可能就会懵住许多同学，疑问不在于var的使用，而在于为什么要这么写。其实在这里不这么写，把s换成this应该也可以，但是出于习惯，我还是加上了，原因在于如果以后在构造器里面出现了多个对象的使用，那么用this的指向就会出错。比如说我想在构造器里面加一个调用事件的函数，然后在这个调用的函数里面想访问类的一个属性，那么在这个事件监听函数中用this，指向的应该事件监听函数，而取不到类这个对象。这时候，用s把this代换掉，在事件监听函数中用s就可以来访问类了。第一行代码解释了这么久，相信熟悉js中class的朋友都看得不耐烦了吧。ok，咱们继续看下一行代码。
类里面第二行代码是base函数的运用。这个函数也是lufylegend里的全局函数，用于继承某个类。这里我选择继承了LSprite类。说实话，一般在lufylegend中用到继承，通常都是用的继承LSprite。继承了LSprite之后，我们就可以用到LSprite的一系列函数了，包括添加刚体的函数。
接下来的几行代码就是添加用于控制场景大小用的属性。这里显得它们很酱油，不过在后面还是用到了的。这两个属性顾名思义+注释，所以，不解释……（猛然看到LStage.height这个属性，这个是取canvas大小的属性，当然，还有LStage.width）
很简单的构造器代码就这样地解释完毕了。刚才我们说到Main有个init函数，看看吧？
在这个函数里面，全部都是函数的调用。前三个是我自己拓展的，最后一个addEventListener是lufylegend中LSprite拥有的函数。（按理说应该是LInteractiveObject里才有addEventListener函数，但是LSprite继承自这个类，所以我才说到LSprite拥有这个函数）。这里的addEventListener和原始js中的不同，不过都是加事件用的，这个是仿照ActionScript设计的，参数依此是：[ 事件名称， 事件触发函数 ]。在这里触发的是loop这个成员函数，这个函数在现在没有任何作用，不过，过一阵子后，就必须要在里面做一些处理。
接下来我们来到addBorder这个函数：
从这里开始，我们就已经开始用到lufylegend加物理box2d刚体了。在上面的基础讲解中，我们都已经了解了这些，所以再加上注释，这些代码就不难看懂了。不过也许有朋友会问，加入这些边框是干什么用的？解释起来很简单，如果不加边框，当你加入动态的刚体时，刚体会落到显示范围之外，所以为了防止这一点发生，我们给这个世界加一个限制，把刚体“关”在里面。
然后是addRoad这个函数：
在这里面我们又用到了Road类，这个类一样是以后讲解，先把Main讲完再说吧。
然后是addBicycle这个函数
由于暂时没有写关于自行车方面的代码，所以就先搞个圆形刚体给大家玩玩吧，当然本章重点不在自行车，在地形呢……上面的代码有一行没有介绍过，那就是setBodyMouseJoint这个函数。这个函数是让刚体可以进行鼠标拖拽用的。因为没有加入按键控制，所以就先来个鼠标操控。
最后到了loop函数。这个函数是在讲addEventListener时提到过的，忘记了的朋友不妨回忆一下那段代码。可以看到，我给的事件名称是LEvent.ENTER_FRAME，这个是哪里定义的呢？其实你知道了也没用，我是不会告诉你这个LEvent.ENTER_FRAME的值只是一个字符传而已。这个LEvent.ENTER_FRAME是lufylegend中的事件轴事件，时间轴事件是个啥？这个虽然问得很好，但是我在很多文章中都讲过，所以这里不讲……想了解更多的朋友不妨移步到《HTML5游戏引擎Lufylegend.js深入浅出》
【基础篇】-引擎介绍&原理 里面有详细的解释呢。回归正题，看看loop里的代码吧：
首先我们通过时间轴事件触发时传给监听函数的event参数的target成员获取到自身这个对象（Main对象），然后，接下来的处理就是为了达到跟随镜头的效果。我们知道，在这种同类型的游戏中，场景通常都很大，如果不把镜头跟随自行车，那么，自行车开跑了，那就会直接跑到屏幕外去了，看不着了，所以在这里要处理一下。中间部分代码很简单，就是设置一些坐标罢了。只有最后一行LStage.box2d.synchronous()可能使大家有点懵。这个是lufylegend中用来重新计算刚体坐标用的。我们知道，把刚体加入到界面上后，刚体会进行物理运动，所以我们把刚体所在的LSprite改变了，刚体位置是会不变的，所以我们要把它们的位置重新计算一下好了。
好了，Main讲完了，该讲Road类了。
2，Road类
这个类顾名思义，就是用来创建各种地形的。先看构造器中的代码：
同样是一些属性的设置，很简单。值得注意的是，roadData这个属性是赋值level01，这个前面所说的地形数据文件，也就是在data文件夹下的文件。我们先创建一个简单的地形，所以在level01.js中加入如下代码：
这个很明显是一个数组套json的数据格式，其中数组中每一条都是一个地形区，比如说Road.TYPE.Ground就是代表地面，然后地面又分地形，比如说Road.TERRAIN.Smooth代表平地。每一种不同的地形就会有不同的数据名称，比如说平地中有groundWidth和groundHeight，而吊桥（Road.TYPE.Bridge）中有plankWidth，plankHeight，plankAmount。至于其他的地形，我们以后再说吧。
回到Road类中，我们在上面的level01.js中看到了Road.**.**，这是在哪里定义的呢？看这里吧：
我们暂时先定义这么多，以后有其他的地形再拓展吧。在Road类的构造器中调用过init这个函数，这个函数的代码如下：
在这个函数中，我们用到for和switch来加入不同的地形。接下来是addGround和addBridge以及addSpacing里的代码：
这看上去是一大串很长的代码，其实结构相似，主要是需要注意newObjPosX和newObjPosY这个属性的变换。当这个属性是用于确定下一个物体出现时的位置。在addSpacing时，没有其他的什么物体要加入，所以直接把newObjPosX和newObjPosY改变了就能达到效果。在addBridge中，出现这个类：BridgeGround。这个类就是在上一篇文章中所说的铁锁桥类。具体实现过程就看上一篇文章吧：【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果
介绍完addSpacing和addBridge，我们来到了addGround函数，这个函数和上面两个有点区别，因为地面会分很多种地形，所以我们首先要用switch来区分到底添加哪个地形。我打算分成平地路面、斜坡路面、山坡路面。在平地路面中，我们用到了SmoothGround类，在斜坡路面用到了SlopeGround类，山坡路面用的是HillGround。接下来我们依此来看看这些类中的代码，先是SmoothGround：
这个类是最简单的，所以就不加以分析了。接下来轮到SlopeGround类了：
这个类和上一个类很类似，但是唯一不同的是我们在这个类中设置了刚体旋转，并且在取尺寸用到的函数getGroundHeight、getGroundWidth都用了sin和cos进行处理。设置刚体旋转用的是setRotate，参数是旋转的弧度（角度a转成弧度公式：a*Math.PI/180）。除了这几点之外，其他就和第一个讲的SmoothGround类没有什么区别了呢。
最后是HillGround，这个类很特殊，需要详细一点讲：
这个类最特别的是init函数部分。在这个函数中，我们为了添加小山丘，所以要画一个三角形刚体，实现三角形刚体可以用画多边形刚体用的函数addBodyVertices()，这个函数在上面的基础讲解部分提到过，参数需要一个顶点数组，所以我们在init中计算了每个顶点的坐标，然后把它们加入到顶点数组中。至于为什么要用for，那是因为考虑到会有连续的小山丘添加的情况。
好了，到了这一步算是成功了一大半。
最后拓展level01.js：
一，准备工作
首先你需要下载lufylegend和box2dweb 这两个引擎。
box2dweb可以到这里下载：
http://code.google.com/p/box2dweb/downloads/list
lufylegend可以到这里：
http://lufylegend.com/lufylegend
关于lufylegend怎么用，可以到这里看看API文档：
http://lufylegend.com/lufylegend/api
Box2dWeb怎么用？其实我也不太清楚，这次主要用lufylegend封装的API，所以掌握lufylegend对box2dweb的操作就可以了。
在此之后，我们创建一个项目，就叫box2dBicycle吧，然后在里面分别建立data，lib，main文件夹和index.html。如下：
box2dBicycle
|---data
|---lib
|---main
|---index.html
接下来，我们来介绍一下这些文件夹是用来装什么的。data文件夹是用来装游戏中的关卡数据的，我准备把游戏中的关卡用json装起来，这些json就放在这个文件夹里。lib文件夹是装引擎用的，也就是box2dweb和lufylegend.js。main就是放我们源代码文件的。好了，介绍完了准备工作，我们来看看具体的代码。
二，初始游戏
既然是html5游戏，那么一定要有html代码，这些代码就在index.html中放着好了，代码如下：
中间有一大段是js代码，这些代码就是游戏中的数据加载和lufylegend初始化，游戏全屏设置等。
接下来逐句解释一下这个js里的代码。首先是
也许你在纳闷这个init函数是啥，让我来告诉大家好了，这个函数是初始化lufylegend，也就是说是lufylegend中定义的。我这么写一行就说明要在id为"mylegend"的div中创建一个宽800，高450的canvas，游戏界面刷新次数为50ms一次，当界面初始完成后，调用gameInit函数。当然，具体用法还是看lufylegend.js api文档吧。
接着是一些变量：
这些变量各有所用，打头的那个world是用于保存整个界面对象用的，现在暂时没有赋值，但在后面大家会看到他是一个Main类的实例，Main类是啥？在后面慢慢讲吧。然后JS_FILE_PATH和LEVEL_FILE_PATH是用来保存公共路径用的。loadData是装有需要加载资源的数组，这个数组里的内容写法有点特殊，不过是个lufylegend的固定写法，所以必须遵循库件规范。其中，每一条就是一个资源，可以是图片，可以是js文件，txt文件，mp3文件……在这里我用的是加载js，为什么不加载图片呢？因为没有用到图片呗……加载js文件时，需要设置path属性（也就是js文件路径），type属性（用于识别加载方式，加载js则填写为"js"，txt就是"txt"）。当然加载图片时的写法就不一样了，可以参考我以前写的文章，里面有加载图片时的资源列表的写法。
好了，这些变量解释完了，就来看gameInit部分了：
首先，因为我们的游戏中暂时没有图片，所以为了看到物理刚体我们就要设置debug模式，也就是通过LStage.setDebug(true)来实现。然后初始lufylegend中的box2d，所以用到了LStage.box2d = new LBox2d()。再来看看接下来的这段代码：
这些代码有啥用呢？还是让我来告诉你吧，首先开头的if是为了限制平台用的，LStage这个静态类有一个canTouch属性，用来判断是否是移动端。如果是（true），那么就进入if中的代码，if中的代码是为了设置全屏用的，前两行是把body元素位置归0，然后通过LSystem.screen(LStage.FULL_SCREEN)来设置全屏，改LStage.stageScale属性是为了设置全屏模式，除了LStageScaleMode.SHOW_ALL之外，还有其他的几种，具体的还是看API文档吧。
最后到了加载资源这一步骤：
LLoadManage这个类功能挺强大的，主要是可以将多个数据一起加载到游戏中（这里所说的“多个数据”就是上面我们写的那个名叫loadData的数组，也就是传给LLoadManage.load的第一个参数）。详细用法请移步API文档。这里只介绍最后一个参数，这个参数是一个function，这个function是在所有资源被加载完成之后调用的。所以说我们游戏一切的开始都应该是在这个函数中调用的，要不然加载的图片和js文件就使用不上了呢。当然在这里这个函数里的内容就是实例一个Main类出来，然后用addChild这个lufylegend中的方法把他加入到界面中，并调用init这个成员函数来初始化游戏，这个Main类会在下文作详细解释。关于addChild(obj)，这个函数是用来添加显示对象到底层用的，也有对应的spriteObj.addChild(obj)，也就是把obj添加到spriteObj里，这个spriteObj必须是一个LSprite，具体的解释还是看API文档吧，讲得绝对比我详细。
ok，游戏代码中的index.html讲完了。接下来切换主题，蹦到很基础的lufylegend添加刚体讲解。
三，基础讲解
1，什么是刚体
说实话，这个刚体是什么我也不是很清楚，我们不妨把它当成一个现实生活中的物体？刚体其实还有一个比较详细的解释，这个解释来自《HTML5 Canvas游戏开发实战》一书：刚体表示十分坚硬的物质，它上面任意两点的位置都是完全不变的，它就像“钻石”那样“坚硬”。
2，在lufylegend中，如何创建刚体
在lufylegend中，可以通过box2dweb创建圆形，方形，凸多边形（凹多边形也可以，但是box2dweb中对凹多边形碰撞处理有一些问题，所以不推荐使用）这几种刚体。
创建圆形刚体
addBodyCircle(radius, cx, cy, type, density, friction, restitution)
■参数：
radius：半径
cx：圆心坐标x
cy：圆心坐标y
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
创建方形刚体
addBodyPolygon(width, height, type, density, friction, restitution)
■参数：
width：矩形宽
height：矩形高
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
创建多边形刚体
addBodyVertices(v, cx, cy, type, density, friction, restitution)
■参数：
v：顶点数组
cx：中心坐标x
cy：中心坐标y
type：是否动态(1或0)
density：密度
friction：摩擦
restitution：弹性
ok，有了上面的介绍就可以进入下一个研究环节了。
四，建立各式各样的地形
1，Main类详解
首先来看看类的构造器。
打头的那句var s = this;可能就会懵住许多同学，疑问不在于var的使用，而在于为什么要这么写。其实在这里不这么写，把s换成this应该也可以，但是出于习惯，我还是加上了，原因在于如果以后在构造器里面出现了多个对象的使用，那么用this的指向就会出错。比如说我想在构造器里面加一个调用事件的函数，然后在这个调用的函数里面想访问类的一个属性，那么在这个事件监听函数中用this，指向的应该事件监听函数，而取不到类这个对象。这时候，用s把this代换掉，在事件监听函数中用s就可以来访问类了。第一行代码解释了这么久，相信熟悉js中class的朋友都看得不耐烦了吧。ok，咱们继续看下一行代码。
类里面第二行代码是base函数的运用。这个函数也是lufylegend里的全局函数，用于继承某个类。这里我选择继承了LSprite类。说实话，一般在lufylegend中用到继承，通常都是用的继承LSprite。继承了LSprite之后，我们就可以用到LSprite的一系列函数了，包括添加刚体的函数。
接下来的几行代码就是添加用于控制场景大小用的属性。这里显得它们很酱油，不过在后面还是用到了的。这两个属性顾名思义+注释，所以，不解释……（猛然看到LStage.height这个属性，这个是取canvas大小的属性，当然，还有LStage.width）
很简单的构造器代码就这样地解释完毕了。刚才我们说到Main有个init函数，看看吧？
在这个函数里面，全部都是函数的调用。前三个是我自己拓展的，最后一个addEventListener是lufylegend中LSprite拥有的函数。（按理说应该是LInteractiveObject里才有addEventListener函数，但是LSprite继承自这个类，所以我才说到LSprite拥有这个函数）。这里的addEventListener和原始js中的不同，不过都是加事件用的，这个是仿照ActionScript设计的，参数依此是：[ 事件名称， 事件触发函数 ]。在这里触发的是loop这个成员函数，这个函数在现在没有任何作用，不过，过一阵子后，就必须要在里面做一些处理。
接下来我们来到addBorder这个函数：
从这里开始，我们就已经开始用到lufylegend加物理box2d刚体了。在上面的基础讲解中，我们都已经了解了这些，所以再加上注释，这些代码就不难看懂了。不过也许有朋友会问，加入这些边框是干什么用的？解释起来很简单，如果不加边框，当你加入动态的刚体时，刚体会落到显示范围之外，所以为了防止这一点发生，我们给这个世界加一个限制，把刚体“关”在里面。
然后是addRoad这个函数：
在这里面我们又用到了Road类，这个类一样是以后讲解，先把Main讲完再说吧。
然后是addBicycle这个函数
由于暂时没有写关于自行车方面的代码，所以就先搞个圆形刚体给大家玩玩吧，当然本章重点不在自行车，在地形呢……上面的代码有一行没有介绍过，那就是setBodyMouseJoint这个函数。这个函数是让刚体可以进行鼠标拖拽用的。因为没有加入按键控制，所以就先来个鼠标操控。
最后到了loop函数。这个函数是在讲addEventListener时提到过的，忘记了的朋友不妨回忆一下那段代码。可以看到，我给的事件名称是LEvent.ENTER_FRAME，这个是哪里定义的呢？其实你知道了也没用，我是不会告诉你这个LEvent.ENTER_FRAME的值只是一个字符传而已。这个LEvent.ENTER_FRAME是lufylegend中的事件轴事件，时间轴事件是个啥？这个虽然问得很好，但是我在很多文章中都讲过，所以这里不讲……想了解更多的朋友不妨移步到《HTML5游戏引擎Lufylegend.js深入浅出》
【基础篇】-引擎介绍&原理 里面有详细的解释呢。回归正题，看看loop里的代码吧：
首先我们通过时间轴事件触发时传给监听函数的event参数的target成员获取到自身这个对象（Main对象），然后，接下来的处理就是为了达到跟随镜头的效果。我们知道，在这种同类型的游戏中，场景通常都很大，如果不把镜头跟随自行车，那么，自行车开跑了，那就会直接跑到屏幕外去了，看不着了，所以在这里要处理一下。中间部分代码很简单，就是设置一些坐标罢了。只有最后一行LStage.box2d.synchronous()可能使大家有点懵。这个是lufylegend中用来重新计算刚体坐标用的。我们知道，把刚体加入到界面上后，刚体会进行物理运动，所以我们把刚体所在的LSprite改变了，刚体位置是会不变的，所以我们要把它们的位置重新计算一下好了。
好了，Main讲完了，该讲Road类了。
2，Road类
这个类顾名思义，就是用来创建各种地形的。先看构造器中的代码：
同样是一些属性的设置，很简单。值得注意的是，roadData这个属性是赋值level01，这个前面所说的地形数据文件，也就是在data文件夹下的文件。我们先创建一个简单的地形，所以在level01.js中加入如下代码：
这个很明显是一个数组套json的数据格式，其中数组中每一条都是一个地形区，比如说Road.TYPE.Ground就是代表地面，然后地面又分地形，比如说Road.TERRAIN.Smooth代表平地。每一种不同的地形就会有不同的数据名称，比如说平地中有groundWidth和groundHeight，而吊桥（Road.TYPE.Bridge）中有plankWidth，plankHeight，plankAmount。至于其他的地形，我们以后再说吧。
回到Road类中，我们在上面的level01.js中看到了Road.**.**，这是在哪里定义的呢？看这里吧：
我们暂时先定义这么多，以后有其他的地形再拓展吧。在Road类的构造器中调用过init这个函数，这个函数的代码如下：
在这个函数中，我们用到for和switch来加入不同的地形。接下来是addGround和addBridge以及addSpacing里的代码：
这看上去是一大串很长的代码，其实结构相似，主要是需要注意newObjPosX和newObjPosY这个属性的变换。当这个属性是用于确定下一个物体出现时的位置。在addSpacing时，没有其他的什么物体要加入，所以直接把newObjPosX和newObjPosY改变了就能达到效果。在addBridge中，出现这个类：BridgeGround。这个类就是在上一篇文章中所说的铁锁桥类。具体实现过程就看上一篇文章吧：【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果
介绍完addSpacing和addBridge，我们来到了addGround函数，这个函数和上面两个有点区别，因为地面会分很多种地形，所以我们首先要用switch来区分到底添加哪个地形。我打算分成平地路面、斜坡路面、山坡路面。在平地路面中，我们用到了SmoothGround类，在斜坡路面用到了SlopeGround类，山坡路面用的是HillGround。接下来我们依此来看看这些类中的代码，先是SmoothGround：
这个类是最简单的，所以就不加以分析了。接下来轮到SlopeGround类了：
这个类和上一个类很类似，但是唯一不同的是我们在这个类中设置了刚体旋转，并且在取尺寸用到的函数getGroundHeight、getGroundWidth都用了sin和cos进行处理。设置刚体旋转用的是setRotate，参数是旋转的弧度（角度a转成弧度公式：a*Math.PI/180）。除了这几点之外，其他就和第一个讲的SmoothGround类没有什么区别了呢。
最后是HillGround，这个类很特殊，需要详细一点讲：
这个类最特别的是init函数部分。在这个函数中，我们为了添加小山丘，所以要画一个三角形刚体，实现三角形刚体可以用画多边形刚体用的函数addBodyVertices()，这个函数在上面的基础讲解部分提到过，参数需要一个顶点数组，所以我们在init中计算了每个顶点的坐标，然后把它们加入到顶点数组中。至于为什么要用for，那是因为考虑到会有连续的小山丘添加的情况。
好了，到了这一步算是成功了一大半。
最后拓展level01.js：