我想在按下按钮时创建 matter.js 主体，但我遇到了错误

如何解决我想在按下按钮时创建 matter.js 主体，但我遇到了错误

我想创建一个基本的物理沙盒应用程序，使用 matter.js 作为物理引擎和 p5.js 进行渲染。我的想法是在按下特定按钮时产生身体（左键用于弹性体，右键用于重体等）。我使用此代码进行密钥控制：

if (keyIsDown(LEFT_ARROW)) {
    rubber2 = new Rubber(100,40,15) 
    rubber2.display()
}

rubber2.display();

这是 Rubber 类：

class Rubber {
  constructor(x,y,r) {
    var options = {
      'restitution': 1.5,'density': 0.9,'friction': 1
    }
    this.x = x;
    this.y = y;
    this.r = r
    this.body = Bodies.circle(this.x,this.y,(this.r - 20) / 2,options)
    World.add(world,this.body);
  }
  
  display() {
    var rubberpos = this.body.position;
    push()
    translate(rubberpos.x,rubberpos.y);
    rectMode(CENTER)
    strokeWeight(4);
    stroke("green");
    fill("yellow");
    ellipse(0,this.r)
    pop()
  }
}

这给我带来了错误，例如 rubber2 is not defined 或 rubber2 主体仅在按住键时显示，并且没有任何物理特性。根本不显示球确实会创建身体，但不可见。

解决方法

您展示的代码看起来很合理，因此仍然不足以真正重现您可能遇到的问题。经过清理并将其转换为可运行的示例后，我可以提供：

class Rubber {
  constructor(x,y,r,engine) {
    const options = {
      restitution: 1.5,density: 0.9,friction: 1,};
    this.body = Matter.Bodies.circle(x,options);
    Matter.World.add(engine.world,this.body);
  }
  
  display() {
    const {position: {x,y},circleRadius: r} = this.body;
    push();
    translate(x,y);
    strokeWeight(4);
    stroke("green");
    fill("yellow");
    ellipse(0,r);
    pop();
  }
}

let rubbers = [];
let engine;

function setup() {
  createCanvas(500,200);
  engine = Matter.Engine.create();
  //engine.world.gravity.y = 0;
}

function draw() {
  if (keyIsDown(LEFT_ARROW)) {
    rubbers.push(new Rubber(mouseX,mouseY,15,engine));
  }

  background(30);
  
  rubbers = rubbers.reduce((nextGen,e) => {
    const {position: {x,circleRadius} = e.body;
    
    if (y + circleRadius <= height) {
      nextGen.push(e);
      e.display();
    }
    
    return nextGen;
  },[]);
  
  Matter.Engine.update(engine);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<p>Press the left arrow key to create a ball where the mouse is</p>