javascript - 更新tic tac toe board

Question

我试图使用对象构造函数在vanilla javascript中创建一个基本的tic tac toe游戏。对于每个新游戏，我想创建一个新的tic tac toe board实例（例如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);

// 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

问题是你在播放功能中声明了一些功能，但你没有调用它们，所以电路板永远不会改变。除此之外，执行此操作时this.boardSlot = this.state[0][0]会丢失对数组的引用，如果重新分配，则不会更改数组。如果您在setMark内声明isValid，play等函数，则它们将不会共享相同的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);