javascript - 在我作为练习创建的这个俄罗斯方 block 游戏中，我的旋转功能似乎正在将包含所有形状的对象更改为旋转。为什么？

Question

例如，我现在的 Tetromino 是一个“我”。当我旋转它并且下一个 Tetromino 也是一个“I”时，Tetromino 也会旋转，即使我不想要这种行为。我一直在调试，似乎我的棋子来自的对象在玩家轮换时发生了变化。为什么是这样？

下面的代码(未完成):

"use strict";

const board = document.getElementById("board");
const ctx = board.getContext("2d");

const tileCount = [10, 24];
const tileSize = [30, 30];
board.width = tileCount[0] * tileSize[0];
board.height = tileCount[1] * tileSize[1];

function square(x, y, color = "red") {
  ctx.fillStyle = color;
  ctx.fillRect(x * tileSize[0], y * tileSize[1], tileSize[0], tileSize[1]);
  ctx.strokeRect(x * tileSize[0], y * tileSize[1], tileSize[0], tileSize[1]);

  return true;
}
function squareStroke(x, y) {
  ctx.strokeRect(x * tileSize[0], y * tileSize[1], tileSize[0], tileSize[1]);

  return true;
}
const colors = ["white", "red"];

function clearBoard() {
  ctx.clearRect(0, 0, board.width, board.height);
}
function createGrid(x, y) {
  return [...Array(y)].map(_ => [...Array(x)].map(_ => 0));
}
function drawGrid(grid, coord = [0, 0]) {
  for (let [y, row] of grid.entries()) {
    for (let [x, item] of row.entries()) {
      if (item === 0) {
        squareStroke(x + coord[0], y + coord[1]);
      } else {
        square(x + coord[0], y + coord[1], colors[item]);
      }
    }
  }
}

const grid = createGrid(10, 24);
const pieces = Object.freeze({
  T: [
    [0, 1, 0],
    [1, 1, 1],
    [0, 0, 0]
  ],
  J: [
    [0, 1, 0],
    [0, 1, 0],
    [1, 1, 0]
  ],
  L: [
    [0, 1, 0],
    [0, 1, 0],
    [0, 1, 1]
  ],
  O: [
    [1, 1],
    [1, 1]
  ],
  I: [
    [0, 1, 0, 0],
    [0, 1, 0, 0],
    [0, 1, 0, 0],
    [0, 1, 0, 0]
  ],
  S: [
    [0, 0, 0],
    [0, 1, 1],
    [1, 1, 0]
  ],
  Z: [
    [0, 0, 0],
    [1, 1, 0],
    [0, 1, 1]
  ]
});

function choosePiece() {
  const choices = "OISZLJT";
  const chosenLetter = choices[~~(Math.random() * choices.length)];
  // const chosenPiece = pieces[chosenLetter].slice(0);
  const chosenPiece = pieces["I"].slice(0);

  return chosenPiece;
}

const player = [choosePiece(), [5, 0]];

function collideX(n = 2) {
  const grid1 = grid;
  const [grid2, [xC, yC]] = player;

  return [
    grid2.some((row, y) =>
      row.some((item, x) =>
        grid1[y + yC] && item !== 0
          ? [grid1[y + yC][x + xC - 1]].some(x => x === undefined || x !== 0)
          : false
      )
    ),
    grid2.some((row, y) =>
      row.some((item, x) =>
        grid1[y + yC] && item !== 0
          ? [grid1[y + yC][x + xC + 1]].some(x => x === undefined || x !== 0)
          : false
      )
    ),
    grid2.some((row, y) =>
      row.some((item, x) =>
        grid1[y + yC] && item !== 0
          ? [grid1[y + yC][x + xC + 1], grid1[y + yC][x + xC - 1]].some(
              x => x === undefined || x !== 0
            )
          : false
      )
    )
  ][n];
}
function collideY() {
  const grid1 = grid;
  const [grid2, [xC, yC]] = player;

  return grid2.some((row, y) =>
    row.some((item, x) => {
      if (item === 0) return false;
      return (
        (grid[y + yC + 1] && grid[y + yC + 1][x + xC] !== 0) ||
        grid1[y + yC + 1] === undefined
      );
    })
  );
}
function mergeGrids() {
  const gameBoard = grid;
  const [currentPiece, [xC, yC]] = player;
  for (let [y, row] of currentPiece.entries()) {
    for (let [x, item] of row.entries()) {
      if (!!gameBoard[y + yC] && gameBoard[y + yC][x + xC] === 0) {
        gameBoard[y + yC][x + xC] = item;
      }
    }
  }
  console.table(gameBoard);
}
function rotate(grid, num) {
  const piece = grid.slice(0);
  for (let [i] of piece.entries()) {
    for (let j = 0; j < i; j++) {
      [piece[i][j], piece[j][i]] = [piece[j][i], piece[i][j]];
    }
  }
  console.table(pieces["I"]);
  return num > 0 ? piece.map(x => x.reverse()) : piece.reverse();
}

function startNext() {
  mergeGrids();
  player[0] = choosePiece();
  player[1] = [5, 0];
}
function moveDown() {
  if (collideY()) {
    startNext();
  } else {
    player[1][1] += 1;
  }
}
function movePiece(num) {
  if ((!collideX(1) && num > 0) || (!collideX(0) && num < 0)) {
    player[1][0] += num;
  }
  return true;
}
function rotatePiece(num) {
  player[0] = rotate(player[0], num);
}

function clickEvent(e) {
  switch (e.key) {
    case "a":
      movePiece(-1);
      break;
    case "d":
      movePiece(1);
      break;
    case "s":
      moveDown();
      break;
    case "q":
      rotatePiece(-1);
      break;
    case "e":
      rotatePiece(1);
      break;
  }
}

const timers = [0, 0];
const moveRate = 2;

(function run(time = 0) {
  const diffTime = time - timers[0];
  timers[0] = time;
  timers[1] += diffTime;

  clearBoard();
  if (timers[1] >= 1000 / moveRate) {
    if (collideY()) startNext();
    moveDown();

    timers[1] = 0;
  }

  drawGrid(grid);
  drawGrid(...player);

  requestAnimationFrame(run);
})();

addEventListener("keydown", clickEvent);

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Snake.js</title>
    <style>
      html body {
        margin: 0;
        height: 100vh;
        width: 100%;
      }
      #holder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="holder">
      <canvas id="board"></canvas>
    </div>
  </body>
  <script src="Tetris.js"></script>
</html>

Answer 1

您已尝试在 pieces 中创建原始片段对象的克隆。通过做:

pieces[chosenLetter].slice(0);

但是， slice()创建一个浅克隆和你的 pieces [x] 包含一个具有更多数组的数组。
在 choosePiece() 里面有什么用:

const chosenPiece = JSON.parse(JSON.stringify(pieces[chosenLetter]));

如果此处关注性能，您也可以尝试重写代码以不创建多维数组。