在while循环中时浏览器冻结(蛇游戏)

Question

我正在为js家庭作业制作流行的蛇游戏。我有一个功能，旨在确保苹果被吃掉后，它会移动到画布上的不同位置，而不是蛇的任何部位，没有循环的函数运行良好(尽管苹果也放在蛇上(：

move() {
let onSnake = true;
let x = this.getRandomNumber(0, canvas.width - 1); //UnitSize);;
let y = this.getRandomNumber(0, canvas.height - 1); //UnitSize);;

this.x = x;
this.y = y;
this.draw();
}

尽管循环的功能在吃了几个苹果后(正好在打苹果之前(最终会冻结：

move() {
let onSnake = true;
let x = this.getRandomNumber(0, canvas.width - 1); //UnitSize);;
let y = this.getRandomNumber(0, canvas.height - 1); //UnitSize);;
while (onSnake) {
onSnake = false;
x = this.getRandomNumber(0, canvas.width - 1); //UnitSize);
y = this.getRandomNumber(0, canvas.height - 1); //UnitSize);
for (let index = 0; index < snake.parts.length; index++) {
if (x === snake.parts[index].x || y === snake.parts[index].y) {
onSnake = true;
break;
}
}
}
this.x = x;
this.y = y;
this.draw();
}

getRandomNumber为：

getRandomNumber(min, max) {
let r = Math.floor(Math.random() * (max - min + 1)) + min;
r = r - (r % UnitSize);
return r;
}

这是我关于SO的第二个问题，请不要炒我。。。。

Answer 1

我没有时间进行测试，但我怀疑它就像下面的评估一样简单。

if (x === snake.parts[index].x || y === snake.parts[index].y) {
onSnake = true;
break;
}

您正在接受X或Y碰撞。这意味着苹果不能与任何蛇块共享任何X或Y坐标。相反，你想要的是和我相信。这就像是说我们都住在同一栋房子里，因为我们住在同一条街上。不，我们也需要有相同的地址。

作为一种安全措施，你可以对循环的迭代次数进行限制，以防苹果没有剩余空间。

let counter = 0;
while (onSnake && counter < 5000) {
onSnake = false;
x = this.getRandomNumber(0, canvas.width - 1); //UnitSize);
y = this.getRandomNumber(0, canvas.height - 1); //UnitSize);
for (let index = 0; index < snake.parts.length; index++) {
if (x === snake.parts[index].x && y === snake.parts[index].y) {
onSnake = true;
break;
}
}
counter += 1;
}
if (counter == 5000)    {
alert("Could not find space for any more apples!");
}