如何在 p5.js 中使用箭头键移动 Matter.js 主体？

Question

我目前正尝试在 JavaScript 中为一个学校项目制作一个 2d 坦克游戏，并处理我正在使用物理库 matter.js 以及 p5.js 用于渲染。

到目前为止，我有一个基本的 canvas，在墙壁和地板上有边界，这样物体就不会离开屏幕，但是，下一个任务是能够移动一个盒子（那将稍后成为坦克）左右方向键。我以前在纯 JS 中做过类似的事情，只需使用事件侦听器来判断何时按下左箭头键或右箭头键，然后将对象向左或向右重绘 5 个像素。然而，这种方法在 Matter.js 中并没有奏效，这让我非常困惑。

这是 draw() 函数，我目前正在尝试用不同的方法来解决这个问题：

function draw() {
    background(51);
    Engine.update(engine);
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].show();
    }
     if(rightPressed) {
         box1.position.x += 7
     }
    if(leftPressed) {
        Body.applyForce(box1, {x: box1.position.x, y: box1.position.y}, {x: 0.05, y: 0});
    }
    for (var i = 0; i < boundaries.length; i++) {
      boundaries[i].show();
    }
    for (var i = 0; i < circles.length; i++) {
        circles[i].show();
        if (circles[i].isOffScreen()) {
            circles[i].removeFromWorld();
            circles.splice(i, 1)
            i--;
        }
    }
}

setInterval(draw, 10)

非常感谢任何帮助。

Answer 1

使用 keyIsDown() 函数检查特定的键输入。一个例子是：

draw(){

   if(keyIsDown(LEFT_ARROW)){
      //code xyz
     }

}

如何在 p5.js 中使用箭头键移动 Matter.js 主体？

How do I move a Matter.js body with arrow keys in p5.js?

javascript

p5.js

matter.js