更改对象数组的数据

Question

我正在尝试通过 javaScript 创建一个国际象棋游戏。我的问题是当我移动国际象棋时，我改变了我的国际象棋对象的价值位置。棋子可以移动到新的位置，但渲染棋盘后，之前的棋子并没有被删除。这是我的代码：

    const switchCurrentSquare = (selector, curr) => {
      let position = chess.forEach(item => {
        if(JSON.stringify(item.currentSquare) == JSON.stringify(selector)){
            item.currentSquare = curr
            renderChessItems(chess)
        }
    })
}

我检查对象数组中的每个项目，如果它具有相同的位置值（当前方块），它将更改为新位置。这是我通过点击功能获取位置的代码：

    const allClass = document.querySelectorAll('div:not(.board)')
let chessSelector

allClass.forEach(item => {
    item.addEventListener("click", function () {

        const currentSquare = JSON.parse(this.getAttribute("id"))
        changeColorForSelectPiece(currentSquare)
        const pieceType = this.classList[2]
        const player = this.classList[3]
        
        if(chessSelector){
            switchCurrentSquare(chessSelector, currentSquare)
            removeClass()
            chessSelector = null
        }else{
            getNextStep(pieceType, currentSquare, player)
            if(player){
                chessSelector = currentSquare
            }
            else chessSelector = null
        }
    })
})

Answer 1

我会建议使用 OOP 方法，因为这在以后可能会变得非常复杂。

有了 OOP，这也很容易：

export class ChessBoard {
  private __state: string[][];

  constructor() {
    this.__state = new Array(8);

    for (let i = 0; i < 8; i++) {
      this.__state[i] = new Array(8);
    }
  }

  public render(): void {
    // Render the chessboard
  }
}

我是用 TypeScript 写的，对于这样的项目我也强烈推荐它。

您可以只更新您的当前状态和re-render您的棋盘，然后将其显示在网络上。

状态看起来像这样：

[
  [BlackRook], [BlackKnight], [BlackBishop], [BlackKing], [BlackQueen], [BlackKnight], [BlackBishop], [BlackRook],
  [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn],
  [WhiteRook], [WhiteKnight], [WhiteBishop], [WhiteKing], [WhiteQueen], [WhiteBishop], [WhiteKnight], [WhiteRook],
]

并且在每次移动之后，更新状态和 re-render ui:

[
  [BlackRook], [BlackKnight], [BlackBishop], [BlackKing], [BlackQueen], [BlackKnight], [BlackBishop], [BlackRook],
  [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [WhiteKnight], [], [], [], [], [],
  [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn],
  [WhiteRook], [], [WhiteBishop], [WhiteKing], [WhiteQueen], [WhiteBishop], [WhiteKnight], [WhiteRook],
]

编辑

这就是我将如何遍历状态：

for (let i = 0; i < this.__state.length; i++) {
  for (let j = 0; j < this.__state[i].length; j++) {
    if (this.__state[i][j] instanceof EmptyField) {
      // move
    }
  }
}

编辑 2

为此创建了一个 git 存储库：https://github.com/kmpizmad/js-chess

您可以使用 node ./build/index.js 运行它，您会看到初始状态。用它做任何你想做的事。 :D 如果结构对您不起作用，请随时重新构建uild。

层次结构：

Game：这个控制整个程序

Chessboard：这个控制方块

Graveyard：类似于Chessboard，但它控制掉落的碎片

Piece: 抽象class, 包含每件作品的每个道具。

其他所有内容都是 Piece

的 child

更改对象数组的数据

Change data for array of objects

javascript

chess