Question

我找到了一个名为Rough.js的Javascript库。它用于在画布元素上绘制手绘外观。因此，我将其与Matter.js配对以进行简单的物理模拟。但是我很快发现了数量不合理的错误和小故障，但是没有控制台错误。它始于一半的地板不充当地板。很简单。我只是把地板的宽度加倍了。然后盒子开始彼此相移，消失在稀薄的空气中并随机出现。

我尝试查看Matter.js Wiki，但没有论坛。我试图找到遇到类似问题的人，但没有人。

代码太长，无法在此处放置，因此我将为您提供指向CodePen的链接。我还将提供一小段代码示例。

单击演示，它将生成框。观察盒子的行为。


Event Listener:


document.body.addEventListener("click", e => {

   height = (Math.random() * (50 - 10)) + 10

   width = (Math.random() * (50 - 10)) + 10

   color = colorArray[Math.floor(Math.random() * colorArray.length)]

   box = Bodies.rectangle(e.clientX, e.clientY, width, height)

   boxArray.push({height, width, color, box})

   World.add(engine.world, box)

})

Animate Loop:

function animateLoop () {

   c.clearRect(0, 0, canvas.width, canvas.height)

   groundPos = ground.position

   r.rectangle(groundPos.x, groundPos.y, innerWidth, 30, {roughness: 0.1, fillStyle: "dashed", fill: "gray"})

   boxArray.forEach(item => {

      boxPos = item.box.position

      r.rectangle(boxPos.x, boxPos.y, item.width, item.height, {roughness: 1, fill: item.color})

   })

   Engine.update(engine)

   requestAnimationFrame(animateLoop)

}

代码：https://codepen.io/BrianTheExpert/pen/JjjWyEN

演示：https://codepen.io/BrianTheExpert/full/JjjWyEN

我希望它会产生具有类似行为的盒子，但是在玩了几分钟之后，我意识到这是不现实的。

有没有办法解决Matter.js阶段问题？

0 个答案: