为什么碰撞检测不起作用？ （p5 js框架工作）

Question

我在Snake和BasicEnemy之间创建了一个碰撞检测。我创建了一个for循环来创建5个不同的敌人，但碰撞检测不会被从for循环创建的任何敌人调用。碰撞只适用于一个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：

之一简单的形式碰撞检测的是矩形两者之间是轴线对准 - 这意味着不进行旋转。该算法通过确保矩形的四条边之间没有间隙来工作。任何差距意味着不存在碰撞。