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

Question

I just picked up JavaScript and want to make my tic-tac-toe game object-oriented. Right now I'm having trouble making my players take turns. Below I've made a global variable turn that starts off as true, then alternates between true and false as a player clicks on the board. The HTML is not provided here, but each grid in the 3x3 board is a form.

If turn === true, it should be player_1's turn, and player_2 otherwise, but it isn't working. Any ideas on what I should be doing to get it right? I understand that the "if...else if" statement at the bottom runs only once, which is why it isn't working. Any ideas on what and where my conditional statement should be for it to work?

$(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

This is not enough:

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

You have to negate turn. Also, you can simplify the if ... else conditions:

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

You can write the player move even more succinctly, if you wish:

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

Don't forget to put the player moves inside a loop of some kind:

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;
}