javascript - 通过修改arr[1][0]多个单元格被修改

Question

我正在尝试制作一款三消游戏(类似《糖果粉碎传奇》)。我有一个对象 level ，它具有 tiles 属性，它是一个二维数组。在进行一些操作后，我想使用这个简单的行将特定元素的类型更改为 -1 (我将使用 for，但现在我已经出于演示目的而变得简单)

level.tiles[1][0].type = -1;

这是代码

var level = {
    x: 250,         // X position
    y: 113,         // Y position
    columns: 8,     // Number of tile columns
    rows: 8,        // Number of tile rows
    tilewidth: 40,  // Visual width of a tile
    tileheight: 40, // Visual height of a tile
    tiles: [],      // The two-dimensional tile array
    selectedtile: {selected: false, column: 0, row: 0}
};

var tileTypes = [
    {
        type: "red",
        colors: [255, 128, 128]
    },
    {
        type: "green",
        colors: [128, 255, 128]
    },
    {
        type: "darkBlue",
        colors: [128, 128, 255]
    },
    {
        type: "yellow",
        colors: [255, 255, 128]
    }
];
function createLevel() {
    for (var i = 0; i < level.columns; i++) {
        level.tiles[i] = [];
    }

    for (var i = 0; i < level.columns; i++) {
        for (var j = 0; j < level.rows; j++) {
            level.tiles[i][j] = getRandomTile();
        }
    }
}

function getRandomTile() {
    return tileTypes[Math.floor(Math.random() * tileTypes.length)];
}

createLevel();
level.tiles[1][0].type = -1;

不幸的是，不仅tiles[1][0]被修改，多个单元格也被修改。有趣的是，每次随机细胞都会受到影响

Answer 1

出现这种情况是因为 getRandomTile() 返回对图 block 类型的引用，而不是其副本。

即简化这种情况:

var a = {x: 1};
var b = [a, a, a, a];
b[0].x = 2;
console.log(a, b);

将输出

{x: 2} [{x: 2}, {x: 2}, {x: 2}, {x: 2}]

如果您希望图 block 可修改，请让 getRandomTile 返回一个副本 - 在本例中为浅副本，因此 colors 仍然是一个引用，而不是副本 -随机选择的图 block 类型。

function getRandomTile() {
    const tileType = tileTypes[Math.floor(Math.random() * tileTypes.length)];
    // Idiom for shallow copy, i.e. assign all properties of tileType
    // into a new, unique object.
    return Object.assign({}, tileType);
}