设置速度后未检测到 Matter.js 碰撞答案

【问题标题】：Matter.js collision not detecting after setting velocity设置速度后未检测到 Matter.js 碰撞
【发布时间】：2019-07-30 15:58:39
【问题描述】：

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 次以上来检查碰撞问题。

【问题讨论】：

标签： javascript processing collision p5.js matter.js

【解决方案1】：

您尝试实现的目标有点不清楚。但是代码

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

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

你必须修改身体的实际速度，通过某个值，这取决于身体到鼠标位置的距离。例如：

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>

【讨论】：