修改了所有对象的属性，而不是二维数组

Question

我正在尝试在P5.js中重新创建俄罗斯方块。我希望落下的形状在到达底部时能够传递其坐标。我想将对象的x / y坐标（转换为索引）传递给我名为Board的Board Class状态，该状态是Cell对象的2d数组。

奇怪的是，当我运行函数时，即使我瞄准了一个对象，它最终也会更改所有对象。

在分解它之前，我的数组照常工作，直到它运行更新功能。

在P5.js中，设置功能会在开始时自动运行，然后运行draw函数，但始终循环运行，直到被告知要停止。

sketch.js

let canvas, tetromino, gridSize, board;
let fallingShapes = new Array();

function setup() {
    canvas = createCanvas(400, 800);
    centerCanvas();
    frameRate(5); // Initial speed of level

    gridSize = 40;
    board = new Board(width / gridSize, height / gridSize);
    board.initialize();
    createShape();
}

function draw() {
    let fallingShape = fallingShapes[0];
    background(100);
    fallingShape.update();
    fallingShape.show();
    checkIfLanded(fallingShape);
    // board.show();
}

function checkIfLanded(fallingShape) {
    if (fallingShape.hasLanded()) {
        board.update(fallingShape.x, fallingShape.y);
        // TODO gotta move this tetromino object to the board object
        fallingShapes.pop(1);
        noLoop();
        // createShape();
    }
}

tetromino.js

class Tetromino {
    constructor(x, y, height, width) {
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
        this.xDir = 0;
        this.yDir = gridSize;
    }

    setDir(x, y) {
        this.xDir = x;
        this.yDir = y;
    }

    show() {
        fill(0);
        rect(this.x, this.y, this.height, this.width);
    }

    update() {
        this.x += this.xDir;
        this.xDir = 0;
        this.y += this.yDir;
        this.yDir = gridSize;
        this.constrainToBorders();
        this.hasLanded()
            ? new Tetromino(width / 2 - gridSize, 0, gridSize, gridSize)
            : null;
    }

    hasLanded() {
        return this.y >= height - this.height;
    }
}

board.js

class Board {
    constructor(columns, rows) {
        this.columns = columns;
        this.rows = rows;
        this.grid;
    }

    initialize() {
        let cell = new Cell();
        let colsArray = new Array(this.columns).fill(cell);
        this.grid = new Array(this.rows).fill(colsArray);
    }

    update(cellX, cellY) {
        let indexX = cellX / gridSize;
        let indexY = cellY / gridSize;
        console.log(indexX, indexY, this.grid, this.grid[indexY][indexX]);
        this.grid[indexY][indexX].isTaken = true;
        console.log(this.grid);
    }

    show() {
        this.grid.map((row, rowIndex) => {
            row.map((singleCell, colIndex) => {
                singleCell.isTaken ? fill(255) : noFill();
                rect(
                    colIndex * gridSize,
                    rowIndex * gridSize,
                    gridSize,
                    gridSize
                );
            });
        });
    }
}

cell.js

class Cell {
    constructor() {
        this.taken = false;
        this.top = false;
    }
}

预期结果将是只有一个Cell对象具有this.taken = true

此图像是我使用控制台来测试代码的当前行为。

如果需要，完整代码为here。