时间戳

首页 > 解决方案 > 更改对象数组的数据

javascript - 更改对象数组的数据

问题描述

我正在尝试通过 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
        }
    })
})

标签： javascriptchess

解决方案

我建议采用 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 写了这个，我也强烈推荐这样的项目。

您可以更新当前状态并重新渲染棋盘，然后将其显示在网络上。

状态看起来像这样：

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

每次移动后，更新状态并重新渲染 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 如果它不适合您，请随意重建结构。

等级制度：

Game：这控制整个程序

Chessboard：这控制正方形

Graveyard: 类似，Chessboard但它控制倒下的碎片

Piece：抽象类，包含每件作品的每个道具。

其他一切都是孩子Piece

推荐阅读