Question

我试图在matter.js网站上复制一个例子，我无法让它工作。我试图将我的代码设置为与工作但没有工作的项目相同......

    var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

    var world;

    var engine;
    var particles=[];

function Particles(x,y,r){
  this.x=x;
  this.y=y;
  this.d=r*2;
  this.body=Bodies.circle(x,y,r);
  World.add(world,this.body);
  this.disp=function(){
    fill(255);
    ellipse(x,y,this.d, this.d);
  }

}



function setup() {
createCanvas(600,400);
engine = Engine.create();
world=engine.world;
Engine.run(engine);
rect1=Bodies.rectangle(width/2,height/2,10,150);
World.add(world,rect1);



}

function mousePressed(){
  particles.push(new Particles(mouseX,mouseY,5));
}

function draw() {
  background(51);

Engine.update(engine);
  push();
  rectMode(CENTER);
  rect(width/2,height/2,10,150);
  pop();

  for (var i = 0; i < particles.length; i++) {
    particles[i].disp();



}}

所以基本上问题是我用鼠标创建的粒子不会移动（以及矩形），但它们在world.body中被引用（当我在chrome中使用控制台时）。我不知道为什么它不起作用......我使用p5.js作为javascipt环境（它有点像Processing）

Answer 1

请在发布之前尝试正确格式化您的代码。至少使用适当的缩进。

但问题是这一行：

ellipse(x,y,this.d, this.d);

每当您绘制粒子时，您都会使用传递给构造函数的原始x和y变量。您永远不会更改这些值，因此您的粒子永远不会移动。

您正在使用物理引擎，但您永远不会从物理引擎获取粒子的位置。要解决您的问题，您需要查阅matter.js库的文档。

具体来说，body documentation包含有关body.position字段的信息，其中包含正在由物理引擎更新的正文位置。

ellipse(this.body.position.x, this.body.position.y, this.d, this.d);

无法动画问题.js

1 个答案: