更改對象數組的數據

Question

我正在嘗試通過 javaScript 創建一個國際象棋游戲。 我的問題是當我下棋時，我改變了我的國際象棋 object 的值 position。 棋子可以移動到新的position，但是在渲染棋盤之后，之前的棋子沒有被刪除。 這是我的代碼：

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

我檢查對象數組中的每個項目，如果它具有相同的 position 值（當前方塊），它將更改為新的 position。 這是我通過單擊 function 獲得 position 的代碼：

    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 中寫了這個，我也強烈推薦這樣的項目。

您可以只更新您當前的 state 並重新渲染您的棋盤，然后將其顯示在 web 上。

state 看起來像這樣：

[
  [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],
]

每次移動后，更新 state 並重新渲染 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],
]

編輯

這就是我遍歷 state 的方式：

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運行它，你會看到初始的 state。 用它做任何你想做的事。 :D 如果它不適合您，請隨意重建結構。

等級制度：

Game ：這控制整個程序

Chessboard : 控制方塊

Graveyard ：類似於Chessboard ，但它控制的是落下的棋子

片段：抽象Piece ，包含每個片段具有的每個道具。

其他一切都是Piece的孩子