让玩家轮流在 JavaScript 中玩井字游戏答案

【问题标题】：Make players take turns playing tic-tac-toe in JavaScript让玩家轮流在 JavaScript 中玩井字游戏
【发布时间】：2015-09-12 21:53:42
【问题描述】：

我刚刚学习了 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();

});

【问题讨论】：

我回答你的问题了吗？
嗨，迈克尔，我还在想办法解决这个问题。将尝试遵循您所说的并更新。谢谢！

标签： javascript jquery algorithm tic-tac-toe

【解决方案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;
}

【讨论】：