2013-07-29 73 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