我是 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, 80);
var ground = Bodies.rectangle(435, 630, 810, 60, {
isStatic: true
});
var leftWall = Bodies.rectangle(0, 200, 60, 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, boxA) => {
Body.applyForce(boxA, {
x: boxA.position.x,
y: boxA.position.y
}, {
x: -0.03,
y: 0,
})
},
})
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 事件循环之间没有间接层,如“删除 Javascript 中的按键延迟”中与 MJS 无关的描述。这让您可以随心所欲地使用操作系统按键重新触发机制。 正如链接文章详细描述的那样,解决方案是仅使用 keydown 和 keyup 处理程序在一组当前按下的键中添加和删除键代码,而不使用其他任何东西。您只会在 MJS 事件循环的正常流程中对主体执行操作,其中涉及添加一个处理程序以在
beforeUpdateboxA
(玩家框)添加了摩擦力。需要调整施加在其上的力以及摩擦力和其他设置,以使游戏感觉适合您。
const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({
element: document.body,
engine: engine
});
const boxA = Matter.Bodies.rectangle(400, 200, 80, 80, {
inertia: Infinity,
friction: 0.1,
});
const boxB = Matter.Bodies.rectangle(600, 560, 80, 80, {
isStatic: true,
});
const ground = Matter.Bodies.rectangle(435, 630, 810, 60, {
isStatic: true
});
const leftWall = Matter.Bodies.rectangle(0, 200, 60, 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: boxA.position.x,
y: boxA.position.y
}, {x: -0.02, y: 0})
},
};
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);
Matter.Runner.run(runner, engine);
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>