未检测到 Matter.js 碰撞答案

【问题标题】：Matter.js Collision Not Detecting未检测到 Matter.js 碰撞
【发布时间】：2017-03-13 16:21:34
【问题描述】：

我正在尝试练习使用 matter.js 来创建自上而下的 Bomberman 风格。

现在我想要获得我的圆圈，该圆圈由箭头键控制以移动并撞到静态方块，但它只是通过它们。我是否设置不正确？我已经编码三个月了，所以我可能会很慢对不起！

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

var engine = Engine.create();
var world = engine.world;

var player;
var rocks = [];
var cols = 7;
var rows = 7;

function setup() {
    createCanvas(750, 750);
    Engine.run(engine);

    player = new Player(300, 300, 25);

    var spacing = width / cols;
    for (var j = 0; j < rows; j++) {
        for (var i = 0; i < cols; i++) {
            var r = new Rocks(i * spacing, j * spacing);
            rocks.push(r);
        }
    }
}

function draw() {
    background(51);
    Engine.update(engine);
    for (var i = 0; i < rocks.length; i++) {
        rocks[i].show();
    }
    player.show();
    player.move();
}

function Player(x, y, r) {
    this.body = Bodies.circle(x, y, r);
    this.r = r;
    World.add(world, this.body);

    this.show = function () {
        ellipse(x, y, this.r * 2);
    }

    this.move = function () {
        if (keyIsDown(RIGHT_ARROW))
            x += 10;
        if (keyIsDown(LEFT_ARROW))
            x -= 10;
        if (keyIsDown(UP_ARROW))
            y -= 10;
        if (keyIsDown(DOWN_ARROW))
            y += 10;
        x = constrain(x, this.r, height - this.r);
        y = constrain(y, this.r, width - this.r);
    }
}

function Rocks(x, y, w, h, options) {
    var options = {
        isStatic: true
    }
    this.body = Bodies.rectangle(x, y, h, w, options);
    this.w = w;
    this.h = h;
    this.size = player.r * 2;
    World.add(world, this.body);

    this.show = function () {
        rect(x, y, this.size, this.size);
    }
}

【问题讨论】：

标签： javascript collision matter.js

【解决方案1】：

我认为问题在于你的玩家没有被绘制在物理引擎认为的相同位置。

在初始化 x 和 y 之后的 Player 函数中，其余的都需要为 this.body.position.x 和 this.body.position.y。否则，您将更改图片的绘制位置，而不是玩家实际所在的位置。

我不完全确定除此之外你想让我指出什么，但我认为你想用engine.world.gravity.y = 0 禁用重力，我试图修复约束功能，因为我测试它不是工作，我无法修复它，但我建议只为墙壁制作静态边界对象，而不是绘制它们。

matter.js 还处理对象的中心位置。绘制对象时，您要么必须考虑到这一点，要么将模式切换为 ellipseMode(CENTER);、'rectMode(CENTER);` .. 等。

希望对你有帮助

【讨论】：