2013-07-29 75 views
1

使用box2d在javascript中学习游戏编码的一部分我正在尝试使用箭头键事件在4个方向上移动一个矩形主体(以汽车的方式思考)。使用ApplyForce使用箭头键移动对象不起作用

为此,我创建了一个静态物体(它是2个parlallel边)作为道路和一个动态物体(矩形)并使用ApplyImpulse函数的非重力世界。

但我看到它并没有移动矩形体。老实说,不知道为什么它不工作。

以下是我的完整代码。对不起,打扰完整密码

<html> 
<head>  
<style> 
    #gcrCanvas{ 
     border:1px #000000 solid; 
    } 
</style> 
</head> 

<body> 
<div id="canvasWrapper" > 
    <canvas id="gcrCanvas" width="900" height="400" tabindex="0"></canvas> 
</div> 

    <input type="button" onclick="gameObj.init()" /> 

</body> 
<script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script> 
<script type="text/javascript"> 

var box2dVars = { 
    b2Vec2:Box2D.Common.Math.b2Vec2, 
    b2BodyDef: Box2D.Dynamics.b2BodyDef, 
    b2Body: Box2D.Dynamics.b2Body, 
    b2FixtureDef: Box2D.Dynamics.b2FixtureDef, 
    b2Fixture: Box2D.Dynamics.b2Fixture, 
    b2World: Box2D.Dynamics.b2World, 
    b2MassData: Box2D.Collision.Shapes.b2MassData, 
    b2PolygonShape: Box2D.Collision.Shapes.b2PolygonShape, 
    b2CircleShape: Box2D.Collision.Shapes.b2CircleShape, 
    b2DebugDraw: Box2D.Dynamics.b2DebugDraw  
}; 

var gameObj = { 
     world:null,  
    canvasContext:null, 
    debugDraw:null, 
     carX:12, 
    carY:12, 
    scale: 30, 
    carBody:null, 

    init: function(){ 
    var cavnasDiv = document.getElementById("canvasWrapper"); 
    var canvas = document.getElementById("gcrCanvas"); 
    canvasContext = canvas.getContext("2d"); 

    cavnasDiv.addEventListener("keydown", gameObj.carMotionHandler); 

    gameObj.world = new box2dVars.b2World(
      new box2dVars.b2Vec2(0, 0) //gravity 
     , true     //allow sleep 
    ); 


    gameObj.debugDraw = new box2dVars.b2DebugDraw; 
    gameObj.debugDraw.SetSprite(canvasContext); 
    gameObj.debugDraw.SetDrawScale(gameObj.scale); 
    gameObj.debugDraw.SetFillAlpha(0.3); 
    gameObj.debugDraw.SetLineThickness(1.0); 
    gameObj.debugDraw.SetFlags(box2dVars.b2DebugDraw.e_shapeBit | 
      box2dVars.b2DebugDraw.e_jointBit); 
    gameObj.world.SetDebugDraw(gameObj.debugDraw); 

    gameObj.createRoad(); 
    gameObj.createCar(); 
    gameObj.game_loop(); 

    }, 

createRoad: function(){ 
    var roadBodyDef = new box2dVars.b2BodyDef(); 
    roadBodyDef.type = box2dVars.b2Body.b2_staticBody; 
    roadBodyDef.position.Set(0,0);    
     var roadFixDef = new box2dVars.b2FixtureDef;  
     roadFixDef.density = 1.0; 
     roadFixDef.friction = 0.5; 
     roadFixDef.restitution = 0.7; 

     roadFixDef.shape = new box2dVars.b2PolygonShape; 
     roadFixDef.shape.SetAsEdge(new box2dVars.b2Vec2(8,20), 
       new box2dVars.b2Vec2(8,0)); 
     gameObj.world.CreateBody(roadBodyDef).CreateFixture(roadFixDef); 
     roadFixDef.shape.SetAsEdge(new box2dVars.b2Vec2(20,20), 
      new box2dVars.b2Vec2(20,0)); 
    gameObj.world.CreateBody(roadBodyDef).CreateFixture(roadFixDef); 
    }, 

    createCar: function(){ 
     var carBodyDef = new box2dVars.b2BodyDef(); 
     carBodyDef.type = box2dVars.b2Body.b2_dynamicBody; 
     carBodyDef.position.Set(gameObj.carX, gameObj.carY); 

     var carFixDef = new box2dVars.b2FixtureDef; 
     carFixDef.density = 1.0; 
     carFixDef.friction = 0.5; 
     carFixDef.restitution = 0.7; 

     carFixDef.shape = new box2dVars.b2PolygonShape; 
     carFixDef.shape.SetAsBox(0.5, 0.5); 
     gameObj.carBody = gameObj.world.CreateBody(carBodyDef); 
     gameObj.carBody.CreateFixture(carFixDef); 
    }, 

updateCar: function(){ 
    **gameObj.carBody.ApplyImpulse(
      new box2dVars.b2Vec2(gameObj.carX*gameObj.scale, 
       gameObj.carY*gameObj.scale), 
     gameObj.carBody.GetWorldCenter());** 
    }, 


    game_loop:function(){ 
     var fps = 60; 
     var time_step = 1.0/fps; 
     gameObj.updateCar(); 
     gameObj.world.Step(time_step , 8 , 3);   
     gameObj.world.ClearForces(); 

     gameObj.drawCanvas(); 

     setTimeout('gameObj.game_loop', 1000/60); 
    }, 

    drawCanvas: function(){ 
     gameObj.world.DrawDebugData(); 
    }, 

    carMotionHandler: function(event){  
     console.log(gameObj.carBody.GetWorldCenter()); 
     switch(event.keyCode) 
     { 
      case 37: //left arrow key      
        break; 
      case 38: //up arrow key 
        gameObj.carX++;      
        break; 
      case 39: //right arrow key 
        break; 
      case 40: //left arrow key 
        break; 
     }   
    }  
    }; 

</script>  
</html> 

回答

0

第一个问题:您的游戏循环未运行。 setTimeout('gameObj.game_loop', 1000/60)只需访问每秒60次的值game_loop。如果您放弃报价,它将实际运行:setTimeout(gameObj.game_loop, 1000/60)

修复此问题可以让您的广场移动,但还有其他一些严重问题。

第二个问题:对于初始位置和加速度,您使用carXcarY

第三个问题:您在每个循环game_loop上应用加速度(通过ApplyImpulse),因此您的方格很快(即在几毫秒内)每秒传送几百个单位并立即离开屏幕。

+0

感谢您的回复。好吧,我在几个小时后就发现了这个问题,并修改了我的程序,但当我离开我的办公室时,我无法更新它。 – poddroid

+0

我现在正在进行其他更改。 – poddroid