javascript - 为什么包含在我的 javascript 蛇游戏中不工作

Question

我是一名 javascripot 初学者，正在学习 CSS 和 HTML。和许多人一样，我正在通过创建贪吃蛇游戏进行练习，但我没有遵循教程。所以我知道我的代码可能很糟糕并且没有遵循良好的实践，但我这样做只是为了好玩。

let playerXpos =0;
let playerYpos =0;

let coordArray = [[playerXpos, playerYpos]];

//player movement
document.addEventListener('keydown', (e) => playerMove(e.key));
function playerMove (key) {
    clearInterval(playerRightInterval);
    clearInterval(playerLeftInterval);
    clearInterval(playerUpInterval);
    clearInterval(playerDownInterval);
    switch(key) {
        case "ArrowRight":
            playerRightInterval = setInterval(function () {
                if (playerXpos > 67.5) {deathFunction();} else {
                    playerXpos += 1.5;
                    playerGrowth();
                }
            }, 90);
        break;     
        case "ArrowLeft":
            playerLeftInterval = setInterval(function () {
                if (playerXpos <= 0) {deathFunction();} else {
                    playerXpos -= 1.5;
                    playerGrowth();
                }
            }, 90);
        break;
        case "ArrowDown":
            playerDownInterval = setInterval(function () {
                if (playerYpos > 57.5) {deathFunction();} else {
                    playerYpos += 1.5;
                    playerGrowth();
                }
            }, 90);
            break;
        case "ArrowUp":
            playerUpInterval = setInterval(function () {
                if (playerYpos <= 0) {deathFunction();} else {
                    playerYpos -= 1.5;
                    playerGrowth();
                }
            }, 90);
            break;
    }
}

//player growing & more moving
function playerGrowth () {
    if (coordArray.includes([playerXpos, playerYpos])) {
        console.log("ya dead lol");
    }
    coordArray.unshift([playerXpos, playerYpos]);
    if (playerXpos == appleX && playerYpos == appleY) {
        playerArray.push(document.createElement("div"));
        playerArray[playerArray.length-1].className = "player";
        wholeSnake.appendChild(playerArray[playerArray.length-1]);
        playerArray[playerArray.length-1].style.backgroundColor = colourArray[(playerArray.length -1)-(Math.floor((playerArray.length -1)/6)*6)];
        appleMove();
    } else {
        coordArray.pop();
    }
    for (let i=0; i < coordArray.length; i++) {
        playerArray[i].style.marginLeft = coordArray[i][0] + "vh";
        playerArray[i].style.marginTop = coordArray[i][1] + "vh";
    }
}

我将“蛇 block ”的位置存储在一个数组中，该数组使用 .unshift 和 .pop 来更新蛇移动时的位置。我想检查蛇是否击中自己，我可以检查坐标数组是否包含蛇的下一个位置，如果包含，则运行死亡函数，但由于某种原因它无法工作。

我正在谈论的那句话就在评论标题“玩家成长和更加感动”下方

我被这个问题困扰了好久了，请帮忙!

Answer 1

if (coordArray.includes([playerXpos,playerYpos])) {

在 JavaScript 中，变量基本上可以保存两种类型的值。其中一些，如数字和字符串，被称为“基元”。其他 - 对象、函数和数组 - 是引用值。这里的关键区别在于，如果您尝试比较两个引用值，即使它们包含相同的数据，它们也不会看起来相同。

3 === 3; // true
[3] === [3]; // false

将数组和对象视为存储一个值可能会有所帮助，该值是内存中保存数据的位置的标签。

因此，在您的情况下， includes 不起作用，因为您正在构建一个新数组，尽管它包含与您正在查找的数据相同的数据，但实际上它并不是一样的。

为了解决这个问题，您本质上需要编写自己的函数来确定您的坐标信息是否相同。您可以使用不同的数组函数 find ，执行此操作。

例如:

if (coordArray.find(
  (coords) => 
    coords[0] === playerXpos &&
    coords[1] === playerYpos
) {

这样，您的代码将比较 x 和 y 坐标(它们是数字，因此可以直接比较)，而不是比较两个数组，因此它应该能够找到您需要的内容。

find 函数与 includes 略有不同，因为它不返回 true 或 false ，而是返回它找到的元素(如果找到)或 undefined。在这种情况下，这在您的 if 条件下也同样有效，因为如果它找到了 truthy 的内容。 ，而未定义是 falsy .

---

编辑: 或者，您可以使用 some方法，其工作方式与 find 类似，但返回 true 或 false。