TicTacToe - javascript

Question

HTML:

<table border="1" cellpadding="4">
    <tbody>
        <tr>
            <td id="c1">-</td>
            <td id="c2">-</td>
            <td id="c3">-</td>
        </tr>
        <tr>
            <td id="c4">-</td>
            <td id="c5">-</td>
            <td id="c6">-</td>
        </tr>
        <tr>
            <td id="c7">-</td>
            <td id="c8">-</td>
            <td id="c9">-</td>
        </tr>
    </tbody>
</table>

Javascript:

function ticTac(){                                      
  if (this.innerHTML == "-"){                                                   
    this.innerHTML = "X";                                       
  }                                     
}                                       
document.getElementById("c1").onclick = ticTac;                                     
document.getElementById("c2").onclick = ticTac;                                     
document.getElementById("c3").onclick = ticTac;                                     
document.getElementById("c4").onclick = ticTac;                                     
document.getElementById("c5").onclick = ticTac;                                     
document.getElementById("c6").onclick = ticTac;                                     
document.getElementById("c7").onclick = ticTac;                                     
document.getElementById("c8").onclick = ticTac;                                     
document.getElementById("c9").onclick = ticTac;

Just a function question, how do I create an "O", which takes turn between X and O and doesn't over ride the existing X or O in the table?

Answer 1

In each and every td tag add a button and disable it after you click it once. This will do the work.

document.getElementById(id).disabled=true;

For more information just follow the code from my Github.

https://github.com/NaniBlaze/TICTACTOE

Answer 2

Simply set a global variable that stores the current player and change the player after each turn:

var currentPlayer = "X";
function ticTac(){                                      
  if (this.innerHTML == "-") {                                                   
    this.innerHTML = currentPlayer;
    currentPlayer = currentPlayer == "X" ? "O" : "X";                           
  }                                     
}                                       
document.getElementById("c1").onclick = ticTac;                                     
document.getElementById("c2").onclick = ticTac;                                     
document.getElementById("c3").onclick = ticTac;                                     
document.getElementById("c4").onclick = ticTac;                                     
document.getElementById("c5").onclick = ticTac;                                     
document.getElementById("c6").onclick = ticTac;                                     
document.getElementById("c7").onclick = ticTac;                                     
document.getElementById("c8").onclick = ticTac;                                     
document.getElementById("c9").onclick = ticTac;

Answer 3

A simple way is:

Please note: in this case the 'o' player always has priority in move as first player (but you can simply change it or ask from user to select which be first)

js:

var whosTurn = 'x';

function whoIsTurn(){
  if(whosTurn == 'x'){
    whosTurn = 'o';
  } else {
    whosTurn = 'x';
  }
    return whosTurn;
}

function ticTac(){                                      
  if (this.innerHTML == "-"){                                                   
    this.innerHTML = whoIsTurn();                                       
  }                                     
}                                       
document.getElementById("c1").onclick = ticTac;                                     
document.getElementById("c2").onclick = ticTac;                                     
document.getElementById("c3").onclick = ticTac;                                     
document.getElementById("c4").onclick = ticTac;                                     
document.getElementById("c5").onclick = ticTac;                                     
document.getElementById("c6").onclick = ticTac;                                     
document.getElementById("c7").onclick = ticTac;                                     
document.getElementById("c8").onclick = ticTac;                                     
document.getElementById("c9").onclick = ticTac;

jsfidle

Answer 4

Just have a boolean operator and change it on after a turn eg

var isX = true;
function ticTac(){                                      
  if (this.innerHTML == "-"){
    if(isX){                                         
      this.innerHTML = "X";
    } else {
      this.innerHTML = "O";
    }
  isX = !isX;
  }                               
}
document.getElementById("c1").onclick = ticTac;                                     
document.getElementById("c2").onclick = ticTac;                                     
document.getElementById("c3").onclick = ticTac;                                     
document.getElementById("c4").onclick = ticTac;                                     
document.getElementById("c5").onclick = ticTac;                                     
document.getElementById("c6").onclick = ticTac;                                     
document.getElementById("c7").onclick = ticTac;                                     
document.getElementById("c8").onclick = ticTac;                                     
document.getElementById("c9").onclick = ticTac;

Answer 5

i am putting here code which i seen on internet weeks ago when i was making my game i hope it will help you

i got this from here game tic tac toe

this will really help you please read it with all explanation

var State = function(old) {

/*
 * public : the player who has the turn to player
 */
this.turn = "";

/*
 * public : the number of moves of the AI player
 */
this.oMovesCount = 0;

/*
 * public : the result of the game in this State
 */
this.result = "still running";

/*
 * public : the board configuration in this state
 */
this.board = [];

/* Begin Object Construction */
if(typeof old !== "undefined") {
    // if the state is constructed using a copy of another state
    var len = old.board.length;
    this.board = new Array(len);
    for(var itr = 0 ; itr < len ; itr++) {
        this.board[itr] = old.board[itr];
    }

    this.oMovesCount = old.oMovesCount;
    this.result = old.result;
    this.turn = old.turn;
}
/* End Object Construction */

/*
 * public : advances the turn in a the state
 */
this.advanceTurn = function() {
    this.turn = this.turn === "X" ? "O" : "X";
}

/*
 * public function that enumerates the empty cells in state
 * @return [Array]: indices of all empty cells
 */
this.emptyCells = function() {
    var indxs = [];
    for(var itr = 0; itr < 9 ; itr++) {
        if(this.board[itr] === "E") {
            indxs.push(itr);
        }
    }
    return indxs;
}

/*
 * public  function that checks if the state is a terminal state or not
 * the state result is updated to reflect the result of the game
 * @returns [Boolean]: true if it's terminal, false otherwise
 */
this.isTerminal = function() {
    var B = this.board;

    //check rows
    for(var i = 0; i <= 6; i = i + 3) {
        if(B[i] !== "E" && B[i] === B[i + 1] && B[i + 1] == B[i + 2]) {
            this.result = B[i] + "-won"; //update the state result
            return true;
        }
    }

    //check columns
    for(var i = 0; i <= 2 ; i++) {
        if(B[i] !== "E" && B[i] === B[i + 3] && B[i + 3] === B[i + 6]) {
            this.result = B[i] + "-won"; //update the state result
            return true;
        }
    }

    //check diagonals
    for(var i = 0, j = 4; i <= 2 ; i = i + 2, j = j - 2) {
        if(B[i] !== "E" && B[i] == B[i + j] && B[i + j] === B[i + 2*j]) {
            this.result = B[i] + "-won"; //update the state result
            return true;
        }
    }

    var available = this.emptyCells();
    if(available.length == 0) {
        //the game is draw
        this.result = "draw"; //update the state result
        return true;
    }
    else {
        return false;
    }
};

};