键盘移动在 matter.js 中很不稳定

如何解决键盘移动在 matter.js 中很不稳定

我是matter.js 的新手，我正在使用Body.applyForce 在我正在创建的平台游戏中移动我的盒子。我想知道是否有一个更容易使用的功能，它允许持续移动，而不是随机地从慢到快。

这是我所有的代码：

var Engine = Matter.Engine,Render = Matter.Render,Runner = Matter.Runner,Bodies = Matter.Bodies,Body = Matter.Body,World = Matter.World,Composite = Matter.Composite;
var engine = Engine.create();
var render = Render.create({
    element: document.body,engine: engine
});

var BoxA = Bodies.rectangle(400,200,80,80);
var BoxB = Bodies.rectangle(600,560,80);
var ground = Bodies.rectangle(435,630,810,60,{
    isstatic: true
});
var leftWall = Bodies.rectangle(0,800,{
    isstatic: true
});

Body.setStatic(BoxB,true)
Body.setInertia(BoxA,Infinity)

const cases = Object.assign(Object.create(null),{
    KeyD: (Body,BoxA) => {
        Body.applyForce(BoxA,{
            x: BoxA.position.x,y: BoxA.position.y
        },{
            x: 0.03,y: 0,})
    },KeyA: (Body,{
            x: -0.03,})

document.addEventListener("keydown",event => {
    cases[event.code]?.(Body,BoxA)
})

Composite.add(engine.world,[BoxA,BoxB,ground,leftWall]);
Render.run(render);
var runner = Runner.create();
Runner.run(runner,engine);

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>

解决方法

问题在于键处理程序和 Matter.js 事件循环之间没有间接层，如 Remove key press delay in Javascript 中描述的 MJS 不可知。这让您陷入了操作系统密钥重新触发机制的奇思妙想。

正如链接帖子中详细描述的那样，解决方案是仅使用 keydown 和 keyup 处理程序从一组当前按下的键中添加和删除键代码，而不是其他任何东西。您只会在 MJS 事件循环的正常流程中对主体采取行动，这涉及添加处理程序以触发 beforeUpdate 事件。

这是应用于您的示例的想法。请注意，我为 boxA（播放器框）添加了摩擦力。需要调整施加的力以及摩擦力和其他设置，才能让游戏感觉适合您。

const engine = Matter.Engine.create();
const render = Matter.Render.create({
  element: document.body,engine: engine
});

const boxA = Matter.Bodies.rectangle(400,200,80,{
  inertia: Infinity,friction: 0.1,});
const boxB = Matter.Bodies.rectangle(600,560,{
  isStatic: true,});
const ground = Matter.Bodies.rectangle(435,630,810,60,{
  isStatic: true
});
const leftWall = Matter.Bodies.rectangle(0,800,{
  isStatic: true
});

const keyHandlers = {
  KeyD: () => {
    Matter.Body.applyForce(boxA,{
      x: boxA.position.x,y: boxA.position.y
    },{x: 0.02,y: 0})
  },KeyA: () => {
    Matter.Body.applyForce(boxA,{x: -0.02,};

const keysDown = new Set();
document.addEventListener("keydown",event => {
  keysDown.add(event.code);
});
document.addEventListener("keyup",event => {
  keysDown.delete(event.code);
});

Matter.Events.on(engine,"beforeUpdate",event => {
  [...keysDown].forEach(k => {
    keyHandlers[k]?.();
  });
});

Matter.Composite.add(
  engine.world,[boxA,boxB,ground,leftWall]
);
Matter.Render.run(render);
const runner = Matter.Runner.create();
Matter.Runner.run(runner,engine);

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>