个人中心
gpt4 book ai didi

javascript - 使用 ApplyForce 通过箭头键移动对象不起作用

转载 作者：行者123 更新时间：2023-11-28 08:59:34 24 4
gpt4 key购买 nike

使用 box2d 在 javascript 中学习游戏编码的一部分，我尝试使用箭头键事件在 4 个方向上移动矩形体(想象为汽车)。

为此，我创建了一个无重力世界，其中静态物体(即 2 个平行边)作为道路，一个动态物体(矩形)并使用 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>

最佳答案

第一个问题:你的游戏循环没有运行。 setTimeout('gameObj.game_loop', 1000/60) 只需每秒访问 game_loop 的值 60 次。如果去掉引号，它实际上会运行:setTimeout(gameObj.game_loop, 1000/60)。

修复此问题将使您的方 block 能够移动，但还有一些其他严重问题。

第二个问题:您使用 carX 和 carY 作为初始位置和加速度。

第三个问题:您在 game_loop 的每个循环中应用加速(通过 ApplyImpulse)，因此您的方 block 非常快(即在几毫秒内)移动数百次每秒单位并立即离开屏幕。

关于javascript - 使用 ApplyForce 通过箭头键移动对象不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17929388/

24 4 0
文章推荐： javascript - 在没有特定目标的情况下触发JavaScript中的全局触摸/点击事件
文章推荐： html - 我的 CSS 导航菜单上的工具提示不起作用
文章推荐： swift - 如何创建一个具有固定顶行内容和数据库中其余行的表
文章推荐： javascript - 替换 anchor 元素中的 href 属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com