matter.js 矩形不会碰撞

Question

我使用 matter.js 进行物理处理，p5.js 进行渲染。当您单击 canvas 时，我试图简单地创建盒子，然后当盒子到达 canvas 的末端时，它会与地面碰撞，但地面不会检测到与盒子的碰撞。我假设问题是地面定位正确。

这是代码

// module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

var x = 0;

var engine;

let frame = document.getElementById('frames');

var ground;

var boxs = [];
function setup()
{
 //put setup code here
 createCanvas(640,480);

 engine = Engine.create();
 // run the engine
 Engine.run(engine);
 ground = Bodies.rectangle(0, height/2, width, 10);
 World.add(engine.world, ground);

}

function mousePressed()
{
 boxs.push(new Box(mouseX, mouseY, 20, 20) );

}

function draw()
{

    x = x + 1;
   background(0);


 for (var i = 0; i < boxs.length; i++) {
  boxs[i].show();

 }


 
 

}

var Box = function(x, y , width, height){
 this.box = Bodies.rectangle(x, y, width, height);
 this.h = height;
 this.w = width;
 World.add(engine.world, this.box);

 this.show = function (){
     push();
     fill(255);
     let pos = this.box.position;
     let angle = this.box.angle;
     translate(pos.x, pos.y);
     rotate(angle);
     rect(0, 0, this.w, this.h);
     rectMode(CENTER);
     pop();
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<html>
 <head>
  <title>Ball Clash</title>
 </head>
 <body>
  <p id="frames"></p>
  <!-- <canvas id="myCanvas" height="480" width="640" style="border:1px solid black;"></canvas> -->
 </body>
 
 
 
</html>

Answer 1

你应该养成 debugging your code 的习惯。（该教程适用于处理，但许多相同的想法适用于 P5.js。）

i am assuming the problem is that ground is positioned correctly.

那你为什么不直接检查一下地面的位置呢？我在任何地方都没有看到你在画地面，你为什么不开始呢？

或者您可以将此行添加到 draw() 函数中：

console.log(ground.position);

无论哪种方式，您都会注意到地面在下落，这是有道理的，因为它是一个矩形，就像其他正在下落的盒子一样。

要解决您的问题，您需要弄清楚如何创建一个不动的固定框。我确信谷歌搜索 "matter.js stationary rectangle" 会 return 大量结果，或者您可以查阅他们的文档。

matter.js 矩形不会碰撞

matter.js rectangle won't collide

javascript

game-physics

p5.js

matter.js