问题描述
我是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>