Matter.js Collision ne détectant pas

Question

J'essaie de m'entraîner en utilisant matter.js pour créer des niveaux haut en bas de style Bomberman.

En ce moment, je veux obtenir mon cercle, qui est contrôlé par les touches fléchées pour se déplacer et se cogner dans les cases statiques, mais il est juste en train de les traverser. L'ai-je mal configuré? J'ai codé pendant trois mois, donc je pourrais être assez lent désolé!

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); 
    } 
} 

Answer 1

Je pense que le problème est que votre lecteur n'est pas dessiné dans la même position que le moteur physique pense.

dans votre fonction Lecteur après l'initialisation de x et y le reste tous doivent être this.body.position.x et this.body.position.y. Sinon, vous changez d'endroit où l'image est dessinée, mais pas où le joueur est réellement. Je ne suis pas tout à fait sûr de ce que tout ce que vous voulez me faire remarquer à part ça mais aussi je pense que vous voulez désactiver la gravité avec engine.world.gravity.y = 0 et j'essayais de réparer la fonction contrainte parce que comme je l'ai testé ça ne fonctionnait pas , Je n'ai pas été capable de le réparer, mais je recommanderais simplement de créer des objets frontières statiques pour les murs et de ne pas les dessiner.

De même, matter.js traite les emplacements des objets à partir de leurs centres. Lors de l'élaboration des objets que vous devez soit prendre cela en considération ou changer le mode ellipseMode(CENTER);, « rectMode (CENTRE);` .. etc.

J'espère que cette aide