如何防止两个画布对象出现在同一个位置

Question

我正在构建一个 Snake 街机游戏，虽然游戏已经启动并且运行良好，但我正在尝试调整游戏，以便苹果永远不会出现在与蛇段之一相同的位置（对于那些不这样做的人） t know Snake，这是一款经典的街机游戏，其中一条蛇在屏幕上滑行，吃着随机出现的苹果，试图避免撞到自己或墙上，每次吃完一个苹果就变长）。下面是在屏幕上移动苹果的代码：

Apple.prototype.move = function() {
  var randomCol = Math.floor(Math.random()*(widthInBlocks-2)) +1;
  var randomRow = Math.floor(Math.random()*(heightInBlocks-2)) +1;

  this.position = new Block(randomCol, randomRow);

  for (i = 0; i < Snake.segments; i++) {
    if (this.position === Snake.segments[i].col && Snake.segments[i].row) {
      this.move();
    };
  };
}

蛇的构造函数如下：

var Snake = function() {
  this.segments = [
    new Block(7, 5),
    new Block(6, 5),
    new Block(5, 5)
  ];
  this.direction = "right";
  this.nextDirection = "right";
};

而绘制蛇的代码如下：

//function to toggle the colour of the snake's segments
function alternateColour(i) {
  var colours = ["limegreen", "yellow"];
  if (i % 2 === 0) {
    return colours[0];
  } else {
    return colours[1];
  };
};

//draw snake method
Snake.prototype.draw = function() {
  this.segments[0].drawSquare("blue"); //snake head will always be blue
  for (i = 1; i < this.segments.length; i++) {
      this.segments[i].drawSquare(alternateColour(i));
  };
};

对我来说，这一切看起来都不错，但我仍然是一个大新手，对 OOP 还是个新手。我不确定我是否正确地编写了Apple.prototype.move 方法，以便它永远不会将苹果放在蛇身体一部分的位置。它发生的可能性很低，所以为了确定我可能不得不坐下来玩几个小时的游戏。任何意见将不胜感激。

注意：使用以下代码将游戏区域划分为由 10x10 像素区域组成的行列网格系统：

var blockSize = 10;
var widthInBlocks = width/blockSize;
var heightInBlocks = height/blockSize;

谢谢。

Answer 1

在检查苹果位置是否与蛇段冲突时，您的 Apple.prototype.move 函数似乎有错误。

您正在计算苹果的位置（randomCol、randomRow），但在检查每个蛇段时没有使用这些值。

此外，当您预计会遇到冲突时，您可以致电this.move()。但在该函数返回后，您将继续完成前一个 for 循环中的所有剩余迭代。

可以通过以下更改解决这些问题：

for (i = 0; i < Snake.segments; i++) {
    if (randomCol === Snake.segments[i].col && randomRow === Snake.segments[i].row) {
        return this.move();
    };
};