Question

使用box2d在javascript中学习游戏编码的一部分我试图使用箭头键事件在4个方向上移动一个矩形体（思考为汽车）。

为此我创建了一个无重力世界，静态体（两个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>

Answer 1

第一个问题：你的游戏循环没有运行。 setTimeout('gameObj.game_loop', 1000/60)只需每秒访问game_loop 60次。如果您删除引号，它将实际运行：setTimeout(gameObj.game_loop, 1000/60)。

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

第二个问题：您对初始位置和加速率使用carX和carY。

第三个问题：你在ApplyImpulse的每个循环中应用加速度（通过game_loop），所以你的方格非常快（即几毫秒内）每秒传播数百个单位并立即离开屏幕。

使用ApplyForce使用箭头键移动对象不起作用

1 个答案: