javascript - tic tac toe boardを更新する

Question

私は、オブジェクトコンストラクタを使用して、バニラのjavascriptで基本的なtic tac toeゲームを作成しようとしています。新しいゲームのたびにtic tac toeボードの新しいインスタンスを作成したいと思います（例：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

を起動するたびに一切変更することで、問題は、あなたがプレイ機能にいくつかの関数を宣言しているが、あなたはそれらを呼び出すされていないということですので、ボードが変更されることはありません。それ以外に、これを行うと、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);