检查阵列的变化

Question

在开发 Javascript/HTML5-canvas 游戏时，我试图通过将数组 waterTilesCheck 设置为等于原始 waterTiles 数组来在水填满区域后停止功能在函数的开头，然后在结尾比较它们。如果对原始水数组进行了更改，我希望再次使用函数运行，但是如果在运行ning 函数结束时没有任何变化，我希望它停止运行ning通过说 waterComplete = true。 waterTiles数组中的每个对象都有x、y、width、height和tag属性，但是tag属性是唯一需要比较的。

function fillWater (modifier) {
    waterTilesCheck = waterTiles;
    for (var i = 0; i < waterTiles.length; i++) {
        //get tiles to the left, right, above and below of i
        var l = i - (worldDim.height + 1);
        var r = i + (worldDim.height + 1);
        var u = i + 1;
        var d = i - 1;
        //just a sample of some of the logic used to move water
        if (tiles[i].tag != "none"
            && u < tiles.length
            && waterTiles[i].tag == "water"
            && waterTiles[u].y >= worldDim.top * X * 2) {
            waterTiles[u].tag = "water";
            waterTiles[i].tag = "none";
        }
    };
    for (var i = 0; i < waterTiles.length; i++) {
        if (waterTiles[i].tag == "water") {
            worldWaterCount++;
        } else {
            waterTiles[i].tag = "none";
        }
    };
    waterCheck();
    console.log(waterComplete);
};

waterCheck 是我尝试比较数组的函数：

function waterCheck () {
    for (var i = 0; i < waterTiles.length; i++) {
        var check = Object.is(waterTiles[i].tag, waterTilesCheck[i].tag);
        if (!check) {
            waterComplete = false;
            return;
        }
    };
    waterComplete = true;
    return;
};

Object.is 似乎是个绝妙的把戏，但没有用，只是比较 waterTiles[i].tag == waterTilesCheck[i].tag 似乎也没有用，这让我很困惑。所以现在我陷入困境并愿意接受建议......

完整代码：https://gist.github.com/TuckerFlynn/3d73d0d6d8e636743ff9

运行在浏览器里看是什么游戏，流水功能在500行左右

Answer 1

所以，您实际上并没有将 waterTilesCheck 设置为 waterTiles 的快照。您将其设置为指向同一个数组。因此，您对 waterTiles 所做的任何更改也会影响 waterTilesCheck。（如果您只是一个一个地复制元素，您将运行在对象级别遇到同样的问题——您需要在不可变元素（字符串、整数等）级别进行复制）。试试这个：

var originalTags = [];
for (var i = 0; i < waterTiles.length; i++) {
  originalTags.push(waterTiles[i].tag);
  ...
}
waterCheck(originalTags);

在 waterCheck 中：

function waterCheck(originalTags) {
  for (var i = 0; i < waterTiles.length; i++)
    if (waterTiles[i].tag !== originalTags[i]) {
      waterComplete = false;
      return;
    }
  waterComplete = true;
  return;
}

检查阵列的变化

Check Array for Changes

javascript

arrays

compare

object

html5-canvas