javascript - 设置速度后未检测到 Matter.js 碰撞

Question

var Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;
  
var ground;
var engine;
var player = [];

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  world = engine.world;
  Engine.run(engine)
  var options = {
    isStatic: true
  }
  engine.world.gravity.y = 0
  my = new Cell(200, 200, 32)
  ground = Bodies.rectangle(200, height, width, 20, options)
  World.add(world, ground)

  //  engine.world.gravity.y = 0;
  console.log(player)
}

function keyPressed() {
  player.push(new Cell(mouseX, mouseY, 32));
}

function draw() {
  background(0);
  my.show();
  for (var i = 0; i < player.length; i++) {
    player[i].show();
  }
}

function Cell(x, y, r) {
  this.body = Matter.Bodies.circle(x, y, r, r);
  //   World.add(world,this.body);
  this.r = r;
  World.add(world, this.body)
  //  player[player.length] = this;
  this.show = function() {
    var pos = this.body.position;
    Body.setVelocity(this.body, {
      x: mouseX - pos.x,
      y: mouseY - pos.y
    })
    push();
    translate(pos.x, pos.y)
    //  noStroke()
    ellipseMode(CENTER);
    ellipse(0, 0, this.r * 2, this.r * 2)
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

如果我注释掉 Body.setVelocity，那么碰撞效果很好，但在使用 Body.setVelocity 时则不然。上面的代码有效，请帮助我进行损坏的碰撞检测。您可以通过按键4次以上来检查碰撞问题。

Answer 1

目前还不清楚您想要实现什么目标。但是代码

Body.setVelocity(this.body, {
      x: mouseX - pos.x,
      y: mouseY - pos.y
  })

在show中，设置主体的速度，该速度等于鼠标位置到主体的距离，在每一帧中重复。这会导致每个物体立即移动到鼠标位置并破坏碰撞检测。

你必须修改 body 的实际速度，修改一定的值，这取决于 body 到鼠标位置的距离。例如:

vx = this.body.velocity.x + (mouseX - pos.x) * 0.001
vy = this.body.velocity.y + (mouseY - pos.y) * 0.001
Body.setVelocity(this.body, {x: vx, y: vy } )  

var Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;
  
var ground;
var engine;
var player = [];

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  world = engine.world;
  Engine.run(engine)
  var options = {
    isStatic: true
  }
  engine.world.gravity.y = 0
  my = new Cell(200, 200, 32)
  ground = Bodies.rectangle(200, height, width, 20, options)
  World.add(world, ground)

  //  engine.world.gravity.y = 0;
  console.log(player)
}

function keyPressed() {
  player.push(new Cell(mouseX, mouseY, 32));
}

function draw() {
  background(0);
  my.show();
  for (var i = 0; i < player.length; i++) {
    player[i].show();
  }
}

function Cell(x, y, r) {
  this.body = Matter.Bodies.circle(x, y, r, r);
  //   World.add(world,this.body);
  this.r = r;
  World.add(world, this.body)
  //  player[player.length] = this;
  this.show = function() {
    var pos = this.body.position;
    
    vx = this.body.velocity.x + (mouseX - pos.x) * 0.001
    vy = this.body.velocity.y + (mouseY - pos.y) * 0.001
    Body.setVelocity(this.body, {x: vx, y: vy } )
    
    push();
    translate(pos.x, pos.y)
    //  noStroke()
    ellipseMode(CENTER);
    ellipse(0, 0, this.r * 2, this.r * 2)
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>