なぜ衝突検出が機能しないのですか？ （p5 js frame work）

Question

私はSnakeとBasicEnemyの間で衝突検出を作成しました。私は5つの異なる敵を作るためにforループを作成しましたが、衝突検出はforループから作成された敵のいずれにも呼び出されません。衝突は、1つのBasicEnemyオブジェクトでのみ機能します。配列内のすべての敵に対して衝突関数が呼び出されないのはなぜですか？ありがとうございました。

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

あなたは、本質的に左上の角の間の距離をチェックしているので蛇と敵、完全に重なる場合、これは真実に戻ります。

ではなく、AABBの衝突検出を使用します。

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

を最初の矩形が第二の四角形が含まれている場合、これは、trueを返します。

MDN says：衝突検出の単純な形態の

つの軸に整列された2つの長方形の間である - ない回転を意味しません。このアルゴリズムは、矩形の4つの辺の間に隙間がないことを保証することによって機能する。ギャップは、衝突が存在しないことを意味します。