让玩家在 JavaScript 中轮流玩井字棋

Question

我刚拿起 JavaScript 并想让我的井字游戏面向对象。现在我很难让我的球员轮流上场。下面我创建了一个全局变量 turn，它以 true 开始，然后随着玩家在棋盘上的点击在 true 和 false 之间交替。 HTML这里不提供，但是3x3棋盘中的每个格子都是一个表格。

如果turn === true，应该轮到player_1，否则player_2，但它不起作用。关于我应该做些什么才能使它正确的任何想法？我知道底部的 "if...else if" 语句只运行一次，这就是它不起作用的原因。关于我的条件语句应该在什么地方工作，有什么想法吗？

$(document).ready(function() {

 var turn = true;

  var Player = function(id,symbol){
    this.symbol = symbol;
    this.id = id;

  function playerMove(player){
    $("#tictac").on("click", function(event){
      event.preventDefault();
      var $button = $(event.target);
      $button.val(symbol);
      turn = turn ? false : true;
      console.log(checkIfWinner());
      console.log("turn:"+turn);
      })
    };
    this.playerMove = playerMove;

  function checkIfWinner(player) {
    var $board = $("#tictac").children();

    if ($board.find("#cell0").children().val() == symbol &&
       $board.find("#cell1").children().val() == symbol &&
       $board.find("#cell2").children().val() == symbol)
    return true;

    if ($board.find("#cell2").children().val() == symbol &&
       $board.find("#cell5").children().val() == symbol &&
       $board.find("#cell8").children().val() == symbol)
    return true;

    if($board.find("#cell0").children().val() == symbol &&
      $board.find("#cell3").children().val() == symbol &&
      $board.find("#cell6").children().val() == symbol)
    return true;

    if ($board.find("#cell0").children().val() == symbol &&
      $board.find("#cell4").children().val() == symbol &&
      $board.find("#cell8").children().val() == symbol)
    return true;

    if ($board.find("#cell2").children().val() == symbol &&
      $board.find("#cell4").children().val() == symbol &&
      $board.find("#cell6").children().val() == symbol)
    return true;

    if ($board.find("#cell3").children().val() == symbol &&
      $board.find("#cell4").children().val() == symbol &&
      $board.find("#cell5").children().val() == symbol)
    return true;

    if ($board.find("#cell6").children().val() == symbol &&
      $board.find("#cell7").children().val() == symbol &&
      $board.find("#cell8").children().val() == symbol)
    return true;

    if ($board.find("#cell1").children().val() == symbol &&
      $board.find("#cell4").children().val() == symbol &&
      $board.find("#cell7").children().val() == symbol)
    return true;

  return false;
  }
  this.checkIfWinner = checkIfWinner;
};

  var startGame = function(player_1,player_2){
    this.player_1 = player_1;
    this.player_2 = player_2;
    setMessage('<p>'+ player_1.symbol + ' starts the game</p>');

  function setMessage(msg){
    $("#message").html(msg);
  };

};

var player_1 = new Player(1,"X");
var player_2 = new Player(2,"O");
var game = new startGame(player_1,player_2);

if (turn === true){
  game.player_1.playerMove();
}
else if (turn === false){
  game.player_2.playerMove();   
}

game.player_1.playerMove();

});

Answer 1

这还不够：

if (turn === true){
  game.player_1.playerMove();
}
else if (turn === false){
  game.player_2.playerMove();   
}

你必须否定turn。此外，您可以简化 if ... else 条件：

if (turn) {
  game.player_1.playerMove();
} else {
  game.player_2.playerMove();
}
turn = !turn;  // Negate the value to alternate moves.

如果你愿意，你可以写得更简洁：

game['player_' + (turn ? '1' : '2')].playerMove();

不要忘记将玩家移动置于某种循环中：

while (true) {
  // Make the player move.
  // Check if the game is over.
  // Has the player won? Is the board full? Display an appropriate message.
  if (gameOver) {
    break;  // Break out of the loop if the game is over.
  }
  turn = !turn;
}

让玩家在 JavaScript 中轮流玩井字棋

Make players take turns playing tic-tac-toe in JavaScript

javascript

algorithm

jquery

tic-tac-toe