纯HTML5+JS制作 物理 拖拽 山地车~！

朋友做了一个纯HTML5+JS的物理山地车，挺好玩的，完了一下午。

演示地址点我

先上截图

游戏开始

停在吊桥上

游戏结束

使用了Box2dWeb-2.1.a.3.min.js，lufylegend-1.8.7.min.js框架

初始化代码

init(50,"mylegend",800,450,gameInit);var world;var JS_FILE_PATH = "./main/";var LEVEL_FILE_PATH = "./data/"var loadData = [{path:JS_FILE_PATH+"Main.js",type:"js"},{path:JS_FILE_PATH+"Road.js",type:"js"},{path:JS_FILE_PATH+"BridgeGround.js",type:"js"},{path:JS_FILE_PATH+"Bicycle.js",type:"js"},{path:JS_FILE_PATH+"SmoothGround.js",type:"js"},{path:JS_FILE_PATH+"HillGround.js",type:"js"},{path:JS_FILE_PATH+"SlopeGround.js",type:"js"},{path:LEVEL_FILE_PATH+"level01.js",type:"js"}];function gameInit(){LStage.setDebug(true);LStage.box2d = new LBox2d();if(LStage.canTouch == true){document.body.style.margin = "0px";document.body.style.padding = "0px";LStage.stageScale = LStageScaleMode.SHOW_ALL;LSystem.screen(LStage.FULL_SCREEN);}LLoadManage.load(loadData,null,function(){world = new Main();addChild(world);world.init();});}

其中引用JS的片段是

var loadData = [{path:JS_FILE_PATH+"Main.js",type:"js"},{path:JS_FILE_PATH+"Road.js",type:"js"},{path:JS_FILE_PATH+"BridgeGround.js",type:"js"},{path:JS_FILE_PATH+"Bicycle.js",type:"js"},{path:JS_FILE_PATH+"SmoothGround.js",type:"js"},{path:JS_FILE_PATH+"HillGround.js",type:"js"},{path:JS_FILE_PATH+"SlopeGround.js",type:"js"},{path:LEVEL_FILE_PATH+"level01.js",type:"js"}];

动态引用的JS代码

下面的代码是游戏场景设置代码

function Main(){var s = this;base(s,LSprite,[]);s.type="Main";/**设置场景大小*/s.sceneWidth = 8500;s.sceneHeight = LStage.height+1000;/**关节列表*/s.jointList = new Array();/**游戏结束控制器*/s.gameOverController = false;}Main.prototype.init = function(){var s = this;/**加入边框*/s.addBorder();/**加入路面*/s.addRoad();/**加入自行车*/s.addBicycle();/**加入河流*///s.addRiver();/**加入刚体碰撞事件*/LStage.box2d.setEvent(LEvent.POST_SOLV,s.postSolve);/**加入循环事件*/s.addEventListener(LEvent.ENTER_FRAME,s.loop);};Main.prototype.addBorder = function(){var s = this;/**创建边框*///设置边框尺寸var borderSize = 10;//顶部边框var topBorder = new LSprite();topBorder.x = s.sceneWidth/2;topBorder.y = 5;topBorder.addBodyPolygon(s.sceneWidth,borderSize,0);s.addChild(topBorder);//右部边框var rightBorder = new LSprite();rightBorder.x = s.sceneWidth-5;rightBorder.y = s.sceneHeight/2;rightBorder.addBodyPolygon(borderSize,s.sceneHeight,0);s.addChild(rightBorder);//底部边框var bottomBorder = new LSprite();bottomBorder.name = "wall";bottomBorder.x = s.sceneWidth/2;bottomBorder.y = s.sceneHeight-5;bottomBorder.addBodyPolygon(s.sceneWidth,borderSize,0);s.addChild(bottomBorder);//左部边框var leftBorder = new LSprite();leftBorder.x = 5;leftBorder.y = s.sceneHeight/2;leftBorder.addBodyPolygon(borderSize,s.sceneHeight,0);s.addChild(leftBorder);};Main.prototype.addRoad = function(){var s = this;/**创建路面*/var roadObj = new Road(0,450);s.addChild(roadObj);};Main.prototype.addBicycle = function(){var s = this;//创建自行车对象s.bicycleObj = new Bicycle(50,385);//585s.addChild(s.bicycleObj);};Main.prototype.addRiver = function(){var s = this;//设置河流深度var riverDepth = 300;//河流显示坐标var posY = s.sceneHeight-riverDepth;//浮力效果初始化    var buoyancyController = new LStage.box2d.b2BuoyancyController();    buoyancyController.normal.Set(0,-1);    buoyancyController.offset = -posY/LStage.box2d.drawScale;    buoyancyController.density = 40;    buoyancyController.linearDrag = 10;    buoyancyController.angularDrag = 30;    buoyancyController.velocity = 2;    LStage.box2d.world.AddController(buoyancyController);//显示水面var riverObj = new LSprite();riverObj.y = posYriverObj.graphics.drawRect(1,"#ffffff",[0,0,s.sceneWidth,riverDepth],true,"#000000");riverObj.alpha = 0.2;s.addChild(riverObj);//将自行车悬浮在水面for(var key in s.bicycleObj.bodyList){var obj = s.bicycleObj.bodyList[key].box2dBody;if(obj)buoyancyController.AddBody(obj);}var box = new LSprite();box.x = 350;box.y = 585;s.addChild(box);box.addBodyPolygon(100,100,1,1,.4,.2);buoyancyController.AddBody(box.box2dBody);};Main.prototype.postSolve = function(contact){var l = world.jointList;if(l.length == 0)return;//获取碰撞的LSprite对象var cA = contact.GetFixtureA().GetBody().GetUserData();var cB = contact.GetFixtureB().GetBody().GetUserData();//判断是否摧毁自行车if(//--------------------------------------------//条件一：当自行车和墙碰撞时//--------------------------------------------((cA.name=="wall" && cB.name=="bicycle")||(cA.name=="bicycle" && cB.name=="wall"))||//--------------------------------------------//条件二：当自行车的车把、车把到轮子的支架或者车座碰到其他物体时//--------------------------------------------((cA.trigger=="destroy_bicycle" && cB.name!="bicycle")||(cA.name!="bicycle" && cB.trigger=="destroy_bicycle"))){//去掉自行车上的所有关节以达到催毁自行车for(var i in l){var jo = l[i];//去掉关节LStage.box2d.world.DestroyJoint(jo);//从自行车关节列表中移除该关节l.splice(i,1);//将游戏结束控制器设置为游戏结束world.gameOverController = true;//添加游戏结束提示var gameOverText = new LTextField();gameOverText.text = "Game Over";gameOverText.size = 50;gameOverText.alpha = 0;gameOverText.x = (LStage.width-gameOverText.getWidth())*0.5;gameOverText.y = (LStage.height-gameOverText.getHeight())*0.5;addChild(gameOverText);LTweenLite.to(gameOverText,3,{delay:2,alpha:1});}}};Main.prototype.loop = function(event){var s = event.target;var bo = s.bicycleObj.mainBody.GetUserData();/**设置场景位置*/s.x = LStage.width*0.5 - (bo.x + bo.getWidth()*0.5);s.y = LStage.height*0.5 - (bo.y + bo.getHeight()*0.5);/**处理位置*/if(s.x > 0){s.x = 0;}else if(s.x < LStage.width - s.sceneWidth){s.x = LStage.width - s.sceneWidth;}if(s.y > 0){s.y = 0;}else if(s.y < LStage.height - s.sceneHeight){s.y = LStage.height - s.sceneHeight;}//计算刚体坐标LStage.box2d.synchronous();};