Warum funktioniert die Kollisionserkennung nicht? (p5 js frame work)

Question

Ich habe eine Kollisionserkennung zwischen Snake und BasicEnemy erstellt. Ich habe eine for-Schleife erstellt, um fünf verschiedene Gegner zu bilden, aber die Kollisionserkennung wird bei keinem der Gegner aufgerufen, die aus der for-Schleife erstellt wurden. Die Kollision funktioniert nur mit dem einen BasicEnemy-Objekt. Warum wird keine Kollisionsfunktion für alle Feinde innerhalb des Arrays aufgerufen? Vielen Dank.

Sketch.js

var snake; 
var food; 
var basicEnemy; 
var scl = 20; 
var enemies = []; 

function setup() { 
    createCanvas(600, 500); 
    snake = new Snake(); 
    basicEnemy = new BasicEnemy(); 

    //** CREATE FIVE ENEMIES ** 
    for (var i = 0; i < 5; i++) { 
    enemies[i] = new BasicEnemy(); 
    } 
} 

    // **FUNCTION WHEN SNAKE HITS ENEMY** 
    function collision() { 
    console.log("hit!"); 
    } 

    function draw() { 
    background(51); 

    //Draw snake 
    snake.update(); 
    snake.show(); 

    //Draw basicEnemy 
    basicEnemy.update(); 
    basicEnemy.show(); 

    //** LOOP THROUGH ENEMIES AND UPDATE AND SHOW ** 
    for (var i = 0; i < enemies.length; i++) { 
    enemies[i].show(); 
    enemies[i].update(); 

    if (enemies[i].hits(snake)) { 
     collision(); 
    } 
    } 
} 

    function keyPressed() { 
if (keyCode === UP_ARROW){ 
    snake.dir(0, -1); 
} else if (keyCode === DOWN_ARROW) { 
    snake.dir(0, 1); 
} else if (keyCode === LEFT_ARROW) { 
    snake.dir(-1 , 0); 
} else if (keyCode === RIGHT_ARROW) { 
    snake.dir(1 , 0); 
} 
} 

BasicEnemy.js

function BasicEnemy() { 
    this.x = random(700); 
    this.y = random(700); 
    this.velX = 15; 
    this.velY = 15; 
} 

//** FUNCTION TO CHECK IF ENEMY AND SNAKE ARE IN THE SAME LOCATION ** 
this.hits = function (pos) { 
    var = d = dist(this.x, this.y, pos.x, pos.y); 
    if(d < 1) { 
    return true; 
    } else { 
    return false; 
    } 
} 

this.show = function() { 
    fill(255, 0, 100); 
    rect(this.x, this.y, scl, scl); 
} 

Snake.js

function Snake() { 
    this.x = 0; 
    this.y = 0; 
    this.xspeed = 1; 
    this.yspeed = 0; 

    this.update = function() { 
    this.x = this.x + this.xspeed * scl; 
    this.y = this.y + this.yspeed * scl; 

    this.x = constrain(this.x, 0, width - scl); 
    this.y = constrain(this.y, 0, height - scl); 
    } 

    this.show = function() { 
    fill(255); 
    rect(this.x, this.y, scl, scl); 
    } 

    this.dir = function (x , y) { 
    this.xspeed = x; 
    this.yspeed = y; 
} 
} 

Answer 1

Weil Sie im Wesentlichen sind für den Abstand zwischen den oberen linken Ecken der Überprüfung Schlange und Feind, das wird nur dann wahr, wenn sie sich vollständig überschneiden.

eine AABB Kollisionserkennung verwenden statt:

return this.x + scl >= pos.x && this.x <= pos.x + scl && this.y + scl >= pos.y && this.y <= pos.y + scl; 

Diese true zurück, wenn das erste Rechteck das zweite Rechteck enthält.

MDN says:

eine der einfacheren Formen der Kollisionserkennung zwischen zwei Rechtecke, die Achse ausgerichtet sind - was bedeutet, keine Drehung. Der Algorithmus arbeitet, indem sichergestellt wird, dass keine Lücke zwischen den vier Seiten der Rechtecke vorhanden ist. Jede Lücke bedeutet, dass eine Kollision nicht existiert.