如何在国际象棋游戏中为父函数修改JavaScript代码

我正在创建一个国际象棋游戏,但无法让父类在文件之间工作。

我目前有一个为每种棋子类型指定的文件(例如,rook,king,pawn),并希望有一个名为gamePieces的父类,该类跟踪每个棋子的位置并具有可继承的方法,例如move(),draw()和showMoves()。

我检查了几个论坛,但无法使其正常工作。几个小时后,我感到沮丧,决定只在每个文件中分别创建每个函数,但是现在我要遍历每个文件,我意识到这是多么耗时和低效的。因此,对于本游戏以及我以后的游戏,我希望我可以让父函数正常工作。

谁能告诉我如何修改我的代码以包含gamePieces的父类?

这是我的pawn类中的代码。我敢肯定,代码本身可以大大改善,但是对于编码我还是陌生的,因此,如果您发现冗余或简化代码的方法,我很乐意听取反馈。

export class Pawn {
  constructor(game, color, startPosition) {

    this.game = game;
    this.turn = game.turn;
    this.color = color;
    this.startPosition = startPosition;
    this.position = startPosition;

    this.isActive = false;
    this.moveChosen = false;
    this.markedForDeletion = false;
    this.lastToMove = false;
    this.enPassant = false;
    this.enPassantCapture = false;
    this.moveInProgress = false;
    this.firstMove = true;

    this.moveNumber = 1;

    this.moveX;
    this.moveY;
    this.moveTurn;

    this.moveChosenPosition = '';
    this.moves = [];

    this.img = {
      whitePawn: document.getElementById('whitePawn'),
      blackPawn: document.getElementById('blackPawn'),
      activeWhitePawn: document.getElementById('activeWhitePawn'),
      activeBlackPawn: document.getElementById('activeBlackPawn'),

    }
  }

  update(deltaTime) {
    this.moves = [];
    if (this.moveNumber === 2 && this.game.turn === this.moveTurn + 1) this.enPassant = true;
    else this.enPassant = false;

    if (!this.isActive) return;
    else if (this.isActive && this.game.activeColor === this.color) this.moves = this.showMoves();
  }

  draw(ctx) {

    if (this.moveInProgress) return;
    if (!this.isActive) {
      if (this.color === 'white') ctx.drawImage(this.img.whitePawn, this.game.board.position[`${this.position}`].x + 31, this.game.board.position[`${this.position}`].y + 25, 48, 64);
      else ctx.drawImage(this.img.blackPawn, this.game.board.position[`${this.position}`].x + 31, this.game.board.position[`${this.position}`].y + 25, 48, 64);
    } else if (this.isActive) {
      if (this.color === 'white') ctx.drawImage(this.img.activeWhitePawn, this.game.board.position[`${this.position}`].x + 31, this.game.board.position[`${this.position}`].y + 25, 48, 64);
      else ctx.drawImage(this.img.activeBlackPawn, this.game.board.position[`${this.position}`].x + 31, this.game.board.position[`${this.position}`].y + 25, 48, 64);


      ctx.fillStyle = 'rgba(100,100,100,.5)';

      if (this.moves) {
        for (let i = 0; i < this.moves.length; i++) {
          ctx.fillRect(this.game.board.position[`${this.moves[i]}`].x + 25, this.game.board.position[`${this.moves[i]}`].y + 25, 64, 64)
        }
      }

    }

  }

  moveDraw(ctx, xVal, yVal) {
    if (this.color === 'white') ctx.drawImage(this.img.whitePawn, xVal - 31, yVal - 25, 48, 64);
    else ctx.drawImage(this.img.blackPawn, xVal - 31, yVal - 25, 48, 64);
  }


  capturedDraw(ctx, i) {
    if (this.color === 'white') {
      if (i < 3) ctx.drawImage(this.img.whitePawn, 700 + (i - 3) * 48, 25, 40, 48);
      else if (i < 6) ctx.drawImage(this.img.whitePawn, 700 + (i - 6) * 48, 75, 40, 48);
      else if (i < 9) ctx.drawImage(this.img.whitePawn, 700 + (i - 9) * 48, 125, 40, 48);
      else if (i < 12) ctx.drawImage(this.img.whitePawn, 700 + (i - 12) * 48, 175, 40, 48);
      else if (i < 15) ctx.drawImage(this.img.whitePawn, 700 + (i - 15) * 48, 225, 40, 48);
    } else if (this.color === 'black') {
      if (i < 3) ctx.drawImage(this.img.blackPawn, 700 + (i - 3) * 48, 360, 40, 48);
      else if (i < 6) ctx.drawImage(this.img.blackPawn, 700 + (i - 6) * 48, 410, 40, 48);
      else if (i < 9) ctx.drawImage(this.img.blackPawn, 700 + (i - 9) * 48, 460, 40, 48);
      else if (i < 12) ctx.drawImage(this.img.blackPawn, 700 + (i - 12) * 48, 510, 40, 48);
      else if (i < 15) ctx.drawImage(this.img.blackPawn, 700 + (i - 15) * 48, 560, 40, 48);
    }
  }

  move(moveX, moveY) {
    let moved = false;
    if (!moved) {
      for (let i = 0; i < this.moves.length; i++) {
        let optionX = this.game.board.position[`${this.moves[i]}`].x + 25;
        let optionY = this.game.board.position[`${this.moves[i]}`].y + 25;

        if (moveX >= optionX &&
          moveX <= optionX + 64 &&
          moveY >= optionY &&
          moveY <= optionY + 64) {

          this.startPosition = this.moves[i];
          this.isActive = false;
          this.lastToMove = true;

          this.moveNumber++;
          moved = true;
          this.moveTurn = this.game.turn;


        }
      }
    }
    if (moved) return true;

  }
  showMoves() {


    if (!this.isActive && this.game.activeColor !== this.color) return;

    let currentPos = this.position;
    let row = Number(currentPos[1]);
    let columnLetter = currentPos[0];
    let availableMoves = [];
    let occupiedSquares = [];
    let unoccupiedSquares = [];
    let potentialMoves = [];

    function columnToNum(letter) {
      let colNum;
      if (letter === 'A') colNum = 1;
      else if (letter === 'B') colNum = 2;
      else if (letter === 'C') colNum = 3;
      else if (letter === 'D') colNum = 4;
      else if (letter === 'E') colNum = 5;
      else if (letter === 'F') colNum = 6;
      else if (letter === 'G') colNum = 7;
      else if (letter === 'H') colNum = 8;
      return colNum;
    }

    function numToColumn(number) {
      let colLet;
      if (number === 1) colLet = 'A';
      else if (number === 2) colLet = 'B';
      else if (number === 3) colLet = 'C';
      else if (number === 4) colLet = 'D';
      else if (number === 5) colLet = 'E';
      else if (number === 6) colLet = 'F';
      else if (number === 7) colLet = 'G';
      else if (number === 8) colLet = 'H';

      return colLet;
    }

    const curNum = columnToNum(columnLetter);



    //Find occupied squares

    [...this.game.gamePieces].forEach((piece) => {
      piece.position.toString;
      occupiedSquares.push(piece.position);
    });


    //Find unoccupied squares
    for (let i = 1; i < 9; i++) {
      let col = numToColumn(i);

      for (let j = 1; j < 9; j++) {
        let square = `${col + j}`;
        if (occupiedSquares.indexOf(square) === -1 && unoccupiedSquares.indexOf(square) === -1) {
          unoccupiedSquares.push(square)
        };
      }
    }

    //Pawn specific movement

    //pawn promotion needed

    let nextRow;
    if (this.color === 'white') nextRow = row + 1;
    else nextRow = row - 1;
    nextRow.toString();
    let arr = [-1, 0, 1];

    for (let i = 0; i < 3; i++) {
      if (curNum + arr[i] > 0 && curNum + arr[i] < 9) {
        potentialMoves.push(`${numToColumn((curNum + arr[i]))}${nextRow}`);
      }
    }

    if (this.moveNumber === 1) {
      if (this.color === 'white') potentialMoves.push(`${numToColumn((curNum))}${row + 2}`);
      else potentialMoves.push(`${numToColumn((curNum))}${row - 2}`);

    }

    potentialMoves.forEach((move) => {

      let isCounted = false;

      move.toString();

      if (!isCounted) {

        //capture diagonal
        if (occupiedSquares.includes(move)) {
          this.game.gamePieces.forEach((piece) => {
            if (piece.position === move && this.position !== move) {
              if (move[0] !== columnLetter) {
                if (this.color === 'white' && move[1] > this.position[1] && piece.color != 'white') isCounted = true;
                else if (this.color === 'black' && move[1] < this.position[1] && piece.color != 'black') isCounted = true;
              }
            }
          });
        }

        //move forward
        else if (move[0] === columnLetter && unoccupiedSquares.includes(move)) {
          if (!occupiedSquares.includes(`${columnLetter}${nextRow}`)) {
            if (this.color === 'white' && move[1] > this.position[1] ||
              this.color === 'black' && move[1] < this.position[1]) isCounted = true;
          }
        }

        //en passant 
        else if (move[0] !== columnLetter && unoccupiedSquares.includes(move)) {
          this.game.gamePieces.forEach((piece) => {
            if (piece.enPassant && columnToNum(piece.position[0]) === columnToNum(move[0])) {
              if (piece.position[1] === '5' && this.color === 'white' && this.position[1] === '5' && piece.moveTurn === this.game.turn - 1) {
                this.enPassantCapture = true;
                isCounted = true;
              } else if (piece.position[1] === '4' && this.color === 'black' && this.position[1] === '4' && piece.moveTurn === this.game.turn - 1) {
                this.enPassantCapture = true;
                isCounted = true;
              }
            }
          })
        }
      }

      if (isCounted) return availableMoves.push(move);
      else return false;
    })

    return availableMoves;

  }

} //end