为什么没有碰撞检测工作？ （p5 js框架工作）

Question

我在Snake和BasicEnemy之间创建了碰撞检测。我创建了一个for循环来制作五个不同的敌人，但是没有在从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：

  

一种较简单的碰撞检测形式是两个轴对齐的矩形 - 意味着没有旋转。该算法通过确保矩形的任何4个边之间没有间隙来工作。任何间隙都意味着不存在碰撞。