Question

我目前正在努力使用2d canvas编写JavaScript Snake游戏时进行碰撞检测。对我来说这是很新的。朝向边缘的碰撞检测按预期工作。但是，在检测蛇是否击中自己时遇到了麻烦。

我一直在寻找其他类似的主题，但没有发现它们直接适用于我的情况。

在下面，您将找到游戏循环，蛇对象和碰撞检测功能。我们将不胜感激为什么蛇撞到自己时为什么不触发碰撞检测的任何指示。

// Game loop

function GameLoop() {
  map.DrawMap();
  map.DrawSnake(snake);
  map.DrawFood(food);
  RenderScore();

  snake.IncrementTail();
  snake.DirectionChange(map);

  if (snake.EatFood(food, map)){
    IncrementScore();
    snake.maxLength++;
    food = Food.GetRandomFood(map);
  }

  if (!snake.isOutOfBounds(map) && !snake.IsTouchingItself()) {
  setTimeout(GameLoop, REFRESH_RATE);
  }
}

在GameLoop结束时，我应该检查snake.isOutOfBounds(map)和snake.IsTouchingItself()。其次，未按预期触发。

 // Snake object

  export class Snake {
  constructor(map) {
    this.positions = [{
      x: map.GetBlockSize() * 5,
      y: map.GetBlockSize() * 5
    },
    {
      x: map.GetBlockSize() * 4,
      y: map.GetBlockSize() * 5
    },
    {
      x: map.GetBlockSize() * 3,
      y: map.GetBlockSize() * 5
    }],
    this.colorBody = '#45b6fe',
    this.colorHead = '#0e2433',
    this.d,
    this.maxLength = 3,
    this.moves = 0

  }

  isOutOfBounds(map){
    if (   this.positions[0].x >= map.width
        || this.positions[0].x < 0
        || this.positions[0].y >= map.height
        || this.positions[0].y < 0
      ){
        console.log('Snake is attempting to flee.');
        return true;
      }
  }

  EatFood(food, map){
    if (  this.positions[0].x == food.x
       && this.positions[0].y == food.y){
         return true;
       } else {
         return false;
       }
   }

   IncrementTail(){
     var position = { x: this.positions[0].x,
                      y: this.positions[0].y };

     this.positions.unshift(position);
     if (this.positions.length > this.maxLength){
       this.positions.pop()
     }
   }

   IsTouchingItself(){
     for (var i = 2; i < this.positions.length; i++){
       if (this.positions[0].x === this.positions[i].x
        && this.positions[0].y === this.positions[i].y){
          console.log('Snake is touching itself!');
          return true;
        } else {
          console.log('Snake is well raised.');
          return false;
        }
     }
   }
}

Answer 1

尝试检查头部的位置是否与身体部位的位置相符。

//I guess the snake's head is the first element in this.positions (index 0)
isSnakeDead() {
    //Creating the variables for simplicity
    let headX = this.positions[0].x;
    let headY = this.positions[0].y;

    //The for loop starts from 1 because the head is index 0
    //and you don't want to check if the head collides with itself
    for (let i = 1; i < this.positions.length; ++i) {
        //Another variables for simplicity
        let currentX = this.positions[i].x;
        let currentY = this.positions[i].y;

        if (headX === currentX && headY === currentY) {
            //The head collides with the current body part
            return true;
        }
    }
    //If the function reaches here then 
    //the head does not collide with any of the other parts
    return false;
}

如何使蛇游戏能够检测到其尾巴碰撞？

1 个答案: