在 Tic Tac Toe JavaScript 中创建“绘制”条件

Question

在我的 Tic Tac Toe 游戏中使用 JavaScript 编程“绘制”条件时遇到问题。我将获胜条件作为函数“checkWin1-7”输入，我正在努力了解如何输入“平局”条件。我会去使用 else if 语句吗？当我尝试使用它时，代码停止工作。在这方面，我将不胜感激。

let state;

const gameState = {
  players: ['x', 'o'],
  board: [
    null, null, null,
    null, null, null,
    null, null, null
  ]
}

const gameArea = document.getElementById('gameBoard');

let playerXTurn = true;

function checkWin1(playerIcon) {
  let gameWon = true; //diagonal L to R
  for(let i=0; i<3; i++){
    if(gameState.board[i*4]!=playerIcon){
      gameWon = false;
      break;
    }
  } return gameWon
}

function checkWin2(playerIcon){
  gameWon = true; //diagonal R to L
  for(let i=0; i<3; i++){
    if(gameState.board[(i*2)+2]!=playerIcon){
      gameWon = false;
      break;
    }
  } return gameWon
}

function checkWin3(playerIcon){
  gameWon = true; //0 3 6 down
  for(let i=0; i<3; i++){
    if(gameState.board[(i*3)]!=playerIcon){
      gameWon = false;
      break;
    }
  } return gameWon
}

function checkWin4(playerIcon){
  gameWon = true; //0 1 2 across
    for(let i=0; i<3; i++){
      if(gameState.board[i]!=playerIcon){
        gameWon = false;
        break;
      }
    } return gameWon
}

function checkWin5(playerIcon){
  gameWon = true; //3 4 5 across
    for(let i=0; i<3; i++){
      if(gameState.board[(i+2)+1]!=playerIcon){
        gameWon = false;
        break;
      }
    } return gameWon
}

function checkWin6(playerIcon){
  gameWon = true; //6 7 8 across
    for(let i=0; i<3; i++){
      if(gameState.board[(i+5)+1]!=playerIcon){
        gameWon = false;
        break;
      }
    } return gameWon
}

function checkWin7(playerIcon){
  gameWon = true; //1 4 7 down
    for(let i=0; i<3; i++){
      if(gameState.board[(i*3)+1]!=playerIcon){
        gameWon = false;
        break;
      }
    } return gameWon
}

function checkWin8(playerIcon){
  gameWon = true; //2 5 8 down
    for(let i=0; i<3; i++){
      if(gameState.board[(i*2)+2+i]!=playerIcon){
        gameWon = false;
        break;
      }
    } return gameWon
}



function onBoardClick(event){
const cellClass = event.target.classList;
  if(cellClass.contains('X_BoardPiece')||cellClass.contains('O_BoardPiece')){
    return;
  } 

  let cellId = event.target.id.substring(5);
 

  if (playerXTurn) {
    event.target.classList.add('X_BoardPiece')
  
    console.log(event.target.id.substring(5))
  
    gameState.board[cellId-1] = 'x'
    const isWinner = checkWin1('x') || checkWin2('x') || checkWin3('x') || checkWin4('x') || checkWin5('x') || checkWin6('x') || checkWin7('x') || checkWin8('x')
    if (isWinner) {
      alert ("player x is the winner")
    }
 
  }
  else {
    event.target.classList.add('O_BoardPiece')
    console.log(event.target.id.substring(5))
    gameState.board[cellId-1] = 'o'
    const isWinner = checkWin1('o') || checkWin2('o') || checkWin3('o') || checkWin4('o') || checkWin5('o') || checkWin6('o') || checkWin7('o') || checkWin8('o')
    if (isWinner) {
      alert ("player o is the winner")
    }
  }

  console.log(gameState.board)
  playerXTurn = !playerXTurn
}

gameArea.addEventListener('click', onBoardClick);