javascript - 更新井字游戏

Question

我正在尝试使用对象构造函数在 vanilla javascript 中创建一个基本的井字游戏。对于每个新游戏，我都想创建一个新的井字游戏实例（例如 var game = new TicTacToe()）。这将是一个 2 人游戏，每次玩家想要将他们各自的标记放在棋盘上时，他们都会调用该对象实例 (game.play(spot))，该对象实例采用他们想要的棋盘上的插槽参数拿。每个玩家轮流交替（我做了一个计数器，所以奇数轮数为 X，偶数轮数为 O）

我在棋盘上实际放置任何标记时遇到问题，每当我调用 game.play 时，我的棋盘似乎都没有发生任何变化

// basic requirements
// var game = new TicTacToe();
// game.play(3) // 1 - 9
// keep track of if it's x or o's turn
// if someone wins, don't allow any more moves
// display winner
// display tie if neither player wins
// game.showBoard() 
// show the board 
// 1 2 3
// 4 5 6
// 7 8 9

// create an object constructor 
function TicTacToe() {
  //instance of TicTacToe board
  this.TicTacToe = TicTacToe;
  // creates a matrix (array with 3 subarrays
  // creates a new board instance 
  this.newBoard = [
      // creates a matrix (array with 3 subarrays
      // each subarray will have 3 indices
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ];
    this.currentBoard = this.newBoard;
  // declares players and their respective symbols
  // each player has separate variable so the winner can be declared at the end
  // and score can be recorded
  this.player1 = 'X';
  this.player2 = 'O';
  // this.currentPlayer;
  this.gameOver = false;
  // keeps track of turns
  this.turn = 1;
}

// create createBoard method
// creates a new Board whenever new instance of TicTacToe is created


  TicTacToe.prototype.boardState = function() {
    this.currentBoard;
  };

//  play method
TicTacToe.prototype.play = function(spot) {
  this.state = this.currentBoard;
  console.log(this.state);

  //what spot stands for
  if(spot === 1){
    this.boardSlot = this.state[0][0]
    console.log(this.boardSlot)
  } else if (spot === 2) {
    this.boardSlot = this.state[0][1]
    console.log(this.boardSlot)
  } else if (spot === 3) {
    this.boardSlot = this.state[0][2]
    console.log(this.boardSlot)
  } else if (spot === 4) {
    this.boardSlot = this.state[1][0]
    console.log(this.boardSlot)
  } else if (spot === 5) {
    this.boardSlot = this.state[1][1]
    console.log(this.boardSlot)
  } else if (spot === 6) {
    this.boardSlot = this.state[1][2]
    console.log(this.boardSlot)
  } else if (spot === 7) {
    this.boardSlot = this.state[2][0]
    console.log(this.boardSlot)
  } else if (spot === 8) {
    this.boardSlot = this.state[2][1]
    console.log(this.boardSlot)
  } else if (spot === 9) {
    this.boardSlot = this.state[2][2]
    console.log(this.boardSlot)
  }

  console.log(this.newBoard);

  //checks to see if spot chosen is valid or taken
  //return true if passes both tests
  var isValid = function() {
    // can only choose spots 1-9
    // create error if other number chosen
    if (spot < 1 || spot > 9) {
      return 'incorrect input, must choose between 1 and 9'
    }
    //checks to see if slot is taken
    // a) check if spot is available
    else if(typeof this.boardSlot !== number){
      console.log('please try another slot, this one is taken');
    }
    return true;
  }



  function setMark () {
    if(isValid === true){
          // keeps track of current player
    // if turn is odd, player is X
  if (this.turn % 2 !== 0) {
    this.currentPlayer = this.player1;
    this.boardSlot.pop().push('X');
    this.turn++
  }
  // if even, player is O
  else {
    this.currentPlayer = this.player2;
    this.boardSlot.pop().push('O');
    this.turn++
  }
    }
  }

//b) a player has won (has 3 repeating letters either vertically, horizontally, diagonally)
  function checkWin() {
    if(this.state[0][0] === 'X' && this.state[0][1] === 'X' && this.state[0][2] === 'X'){
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][0] === 'X' && this.state[1][0] === 'X' && this.state[2][0] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[1][0] === 'X' && this.state[1][1] === 'X' && this.state[1][2] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[2][0] === 'X' && this.state[2][1] === 'X' && this.state[2][2] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][0] === 'X' && this.state[1][1] === 'X' && this.state[2][2] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][2] === 'X' && this.state[1][1] === 'X' && this.state[2][0] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][1] === 'X' && this.state[1][1] === 'X' && this.state[2][1] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'   
    } else if(this.state[0][2] === 'X' && this.state[1][2] === 'X' && this.state[2][2] === 'X') {
      this.gameOver = true;
      return 'Player 1 wins!'  
    } else if(this.state[0][0] === 'O' && this.state[0][1] === 'O' && this.state[0][2] === 'O'){
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][0] === 'O' && this.state[1][0] === 'O' && this.state[2][0] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[1][0] === 'O' && this.state[1][1] === 'O' && this.state[1][2] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[2][0] === 'O' && this.state[2][1] === 'O' && this.state[2][2] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][0] === 'O' && this.state[1][1] === 'O' && this.state[2][2] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][2] === 'O' && this.state[1][1] === 'O' && this.state[2][0] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'
    } else if(this.state[0][1] === 'O' && this.state[1][1] === 'O' && this.state[2][1] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'   
    } else if(this.state[0][2] === 'O' && this.state[1][2] === 'O' && this.state[2][2] === 'O') {
      this.gameOver = true;
      return 'Player 1 wins!'  
    }
  }

// c) if all the spots are filled
 // turns can only go up to 9
// console log that the players have tied
// if either a or b occur, console log the game is over
// no more moves accepted

if(this.turns === 9) {
  this.gameOver = true
  return "Cat's game! Both players have tied"
} else if (this.gameOver === true) {
  return "This game is over. Please start another."
}


}

var game = new TicTacToe();
game.play(9);
game.play(4);

Answer 1

问题是你在 play 函数中声明了一些函数，但你没有调用它们，所以板子永远不会改变。除此之外，当你这样做this.boardSlot = this.state[0][0] 时，你会丢失对数组的引用，如果你重新分配它，它不会改变数组。如果您在play 中声明setMark、isValid 等函数，它们将不会共享相同的this。我稍微修改了您的代码以使其正常工作，您可以在下面查看。

// basic requirements
// var game = new TicTacToe();
// game.play(3) // 1 - 9
// keep track of if it's x or o's turn
// if someone wins, don't allow any more moves
// display winner
// display tie if neither player wins
// game.showBoard()
// show the board
// 1 2 3
// 4 5 6
// 7 8 9

// create an object constructor
function TicTacToe() {
    //instance of TicTacToe board
    this.TicTacToe = TicTacToe;
    // creates a matrix (array with 3 subarrays
    // creates a new board instance
    this.newBoard = [
        // creates a matrix (array with 3 subarrays
        // each subarray will have 3 indices
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ];
    this.currentBoard = this.newBoard;
    // declares players and their respective symbols
    // each player has separate variable so the winner can be declared at the end
    // and score can be recorded
    this.player1 = 'X';
    this.player2 = 'O';
    // this.currentPlayer;
    this.gameOver = false;
    // keeps track of turns
    this.turn = 1;
}

// create createBoard method
// creates a new Board whenever new instance of TicTacToe is created

TicTacToe.prototype.boardState = function() {
    this.currentBoard;
};


//checks to see if spot chosen is valid or taken
//return true if passes both tests
TicTacToe.prototype.isSlotValid = function(row, col) {
  //checks to see if slot is taken
  // a) check if spot is available
  if (typeof this.currentBoard[row][col] != 'number') {
      console.log('please try another slot, this one is taken');
      return false;
  }

  return true;
}

TicTacToe.prototype.setMark = function(row, col) {
    if (this.isSlotValid(row, col) === true) {
        // keeps track of current player
        // if turn is odd, player is X
        if (this.turn % 2 !== 0) {
            this.currentPlayer = this.player1;
            this.currentBoard[row][col] = 'X';
            this.turn++
        }
        // if even, player is O
        else {
            this.currentPlayer = this.player2;
            this.currentBoard[row][col] = 'O';
            this.turn++
        }
    }
}

TicTacToe.prototype.checkWin = function() {
    if (this.state[0][0] === 'X' && this.state[0][1] === 'X' && this.state[0][2] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][0] === 'X' && this.state[1][0] === 'X' && this.state[2][0] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[1][0] === 'X' && this.state[1][1] === 'X' && this.state[1][2] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[2][0] === 'X' && this.state[2][1] === 'X' && this.state[2][2] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][0] === 'X' && this.state[1][1] === 'X' && this.state[2][2] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][2] === 'X' && this.state[1][1] === 'X' && this.state[2][0] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][1] === 'X' && this.state[1][1] === 'X' && this.state[2][1] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][2] === 'X' && this.state[1][2] === 'X' && this.state[2][2] === 'X') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][0] === 'O' && this.state[0][1] === 'O' && this.state[0][2] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][0] === 'O' && this.state[1][0] === 'O' && this.state[2][0] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[1][0] === 'O' && this.state[1][1] === 'O' && this.state[1][2] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[2][0] === 'O' && this.state[2][1] === 'O' && this.state[2][2] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][0] === 'O' && this.state[1][1] === 'O' && this.state[2][2] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][2] === 'O' && this.state[1][1] === 'O' && this.state[2][0] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][1] === 'O' && this.state[1][1] === 'O' && this.state[2][1] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    } else if (this.state[0][2] === 'O' && this.state[1][2] === 'O' && this.state[2][2] === 'O') {
        this.gameOver = true;
        console.log('Player 1 wins!');
    }
}

//  play method
TicTacToe.prototype.play = function(spot) {
    this.state = this.currentBoard;

    var row = Math.floor((spot - 1) / 3);
    var col = (spot - 1) % 3;

    this.setMark(row, col);
    console.log(this.currentBoard);

    //b) a player has won (has 3 repeating letters either vertically, horizontally, diagonally)
    this.checkWin();

    // c) if all the spots are filled
    // turns can only go up to 9
    // console log that the players have tied
    // if either a or b occur, console log the game is over
    // no more moves accepted

    if (this.turns === 9) {
        this.gameOver = true
        console.log("Cat's game! Both players have tied");
    } else if (this.gameOver === true) {
        console.log("This game is over. Please start another.");
    }


}

var game = new TicTacToe();
game.play(9);
game.play(4);