【发布时间】：2022-01-01 15:34:59
【问题描述】：
我通过 Matter.js 创建了如下两个矩形
我正在尝试将“a”框移到“b”框上方。
我想我此时应该写applyForce，如何计算合适的X、Y Force值来放入因子？
下面的代码是由粗略的近似值组成的代码。我如何计算它的适应性？
var Engine = Matter.Engine,
Render = Matter.Render,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composite = Matter.Composite,
Runner = Matter.Runner;
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var bodies = [];
canvas.width = 500;
canvas.height = 200;
var count = 0;
document.body.appendChild(canvas);
var engine = Engine.create();
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: canvas.width,
height: canvas.height,
showAngleIndicator: true,
showCollisions: true,
showVelocity: true
}
})
var world = engine.world
Render.run(render)
var runner = Runner.create();
Runner.run(runner, engine)
Composite.add(world, Bodies.rectangle(250, 180, 500, 20, { isStatic: true }));
// random position
var b = Bodies.rectangle(200, 80, 50, 25, { isStatic: true });
Composite.add(world, b);
var a = Bodies.rectangle(50, 50, 30, 30);
Composite.add(world, a);
setTimeout(function() {
// how to calculate it???
Body.applyForce(a, a.position, {x: 0.012, y: -0.032});
}, 1000)<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>【问题讨论】：
-
我很困惑......当我运行代码 sn-p 时，它似乎做了你想要的。究竟是什么你要求/你的代码不符合你的喜好？
-
是的，代码可以正常工作。但是代码中使用的力是硬编码的。我只想知道当目标位置发生变化时如何计算力值。
-
哦，有道理，我看看我以后能不能解决这个问题
-
我想知道你尝试了什么？ ...看起来您只是绘制了框，但您的代码没有尝试计算，您是否查看了 matter-js 代码？ ...在我下面的回答中，我指出这是一个大问题，您需要先将其分解并回答较小的问题
-
理解力是硬编码的。它是恒定的引力。如果您想获得这种逼真的效果，力将始终垂直指向并且始终保持恒定大小。要执行跳跃，您需要通过适当计算的初始速度添加动量。为此，您需要解决以下问题：给定第一个盒子的位置和您希望它着陆的位置，计算允许盒子从一个位置跳到另一个位置的初始速度的大小和角度。
标签： javascript html5-canvas physics matter.js