Can't make 2 Player Tic Tac Toe game work JavaScript

Question

HTML

<div class="container"> <-- div container -->

<div id="div1" onclick="canvasClicked(1);"></div>
<div id="div2" onclick="canvasClicked(2);"></div>
<div id="div3" onclick="canvasClicked(3);"></div>
<div id="div4" onclick="canvasClicked(4);"></div>
<div id="div5" onclick="canvasClicked(5);"></div>
<div id="div6" onclick="canvasClicked(6);"></div>
<div id="div7" onclick="canvasClicked(7);"></div>
<div id="div8" onclick="canvasClicked(8);"></div>
<div id="div9" onclick="canvasClicked(9);"></div>


</div> <-- div container end -->

Css

  .container{     /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10%;
}

.container div{
float: left;
height: 132px;
width: 131.3px;
border: 1px solid black;
}

JavaScript

var painted; //global variables
var content;
var winningCombinations;
var theCanvas; 
var c;
var cxt;
var w;
var y;

var turn = 0;
var squaresFilled = 0; //global variables end

window.onload = function(){               //instantiating variables
painted = new Array();   //to check if the canvas contains something already
content = new Array();  //to see what the canvas contains 'X' or 'O'

winningCombinations = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],
[1,5,9],[3,5,7]]; //all possible combinations :P

for(var i=0; i<=8; i++){
    painted[i] = false;
    content[i]=false;
}
}


function canvasClicked(number){

theCanvas = "div" + number; //takes the div Id from html
c = document.getElementById(theCanvas);

if(painted[number-1]==false){
    if(turn%2==0){               //use X here
        c.innerHTML = '<img src="cross image" alt="x" width=100% 
height=100%>';
        content[number-1] = 'X'; //storing value in content array
    }else{                       // user O here
        c.innerHTML = '<img src=" O image" height="100%" 
width="100%" alt="O">';
        content[number-1] = 'O'; //storing value in content array
    }
}
else{
    alert('This block is already occupied, try another block');
    turn--;
    squaresFilled--;
}
turn++;
painted[number-1]= true;
squaresFilled++;
checkForWinner(content[number-1]);

if(squaresFilled == 9){
    alert('It is a TIE');
    playAgain();
}
}

function checkForWinner(symbol){  // This functions seems to be the problem

for(var a = 0; a < winningCombinations.length; a++){

    if(content[winningCombinations[a][0]]==symbol && 
content[winningCombinations[a][1]]==symbol && content[winningCombinations[a]
[2]]==symbol){
        console.log(symbol + ' won!!');
    }


}
}
function playAgain(){ // just another function to reset the game
    y=confirm("PLAY AGAIN?");
    if(y==true){
        location.reload(true);
    }else{
        alert('Good Bye Then!!');
    }
}

It runs normally but the results are not expected. It sometimes randomly make anyone winner(i guess), i can't seem to find the bug, i used debugger as well but i just can't find the problem...any help would be appreciated. Thanks

Answer 1

I know I should help you with your code, but I decided to use parts of your code and suggest you an approach: HTML :

<div class="turnInfo" id="turnInfo">Turn : O</div>
<div class="container">  
  <div id="div1" cell="1" onclick="canvasClicked(this);"></div>
  <div id="div2" cell="2" onclick="canvasClicked(this);"></div>
  <div id="div3" cell="3" onclick="canvasClicked(this);"></div>
  <div id="div4" cell="4" onclick="canvasClicked(this);"></div>
  <div id="div5" cell="5" onclick="canvasClicked(this);"></div>
  <div id="div6" cell="6" onclick="canvasClicked(this);"></div>
  <div id="div7" cell="7" onclick="canvasClicked(this);"></div>
  <div id="div8" cell="8" onclick="canvasClicked(this);"></div>
  <div id="div9" cell="9" onclick="canvasClicked(this);"></div> 
</div>  

CSS :

.turnInfo{
    text-align:center;
    font-size:40px;
    font-weight:bold;
    margin-top: 6%;
    margin-bottom:10px;
}
.container{     /*some css*/
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.container div{
    float: left;
    height: 102px;
    width: 131.3px;
    border: 1px solid black;
    text-align:center;
    padding-top:30px;
    font-size:50px;
}

JS : Variables

var cells = [0,0,0,0,0,0,0,0,0,0]; // make it 10 for the sake of array index  
var turn = 'O'; // first turn : O 
var infoDiv = document.getElementById('turnInfo');

Toggle the Trun

function toggleTurn(){
   turn = turn == 'O' ? 'X' : 'O';
   infoDiv.innerHTML = 'Turn : '+turn;
   return turn;
}

Canvas Click Handler

function canvasClicked(cell){
   var cellIndex = cell.getAttribute('cell');
   if(!cells[cellIndex]){
      cells[cellIndex] = toggleTurn();
      cell.innerHTML = turn; // you can add image here.
      checkWinner();
   }
}

Check Result function

function checkWinner(){
   winningCombinations = [
     [1,2,3],
     [4,5,6],
     [7,8,9],
     [1,4,7],
     [2,5,8],
     [3,6,9],
     [1,5,9],
     [3,5,7]
   ]; //all possible combinations :P
   for(var index=0; index <  winningCombinations.length;index++){
       winCond = winningCombinations[index];
       if(cells[winCond[0]] != 0 && 
          cells[winCond[0]] == cells[winCond[1]] && 
          cells[winCond[1]] == cells[winCond[2]])
       {
          alert(turn + ' is winner');
          playAgain();
          return;
       }
   }

   var allCellsFilled = 1;
   for(var index =1; index < cells.length; index++){
       if(!cells[index]){
          allCellsFilled = 0;
          break;
       }
   } 
   if(allCellsFilled){
      alert('Game is draw!');
      playAgain();
   }
}

New Game function

function playAgain(){ // just another function to reset the game
    y=confirm("PLAY AGAIN?");
    if(y==true){
        location.reload(true);
    }else{
        alert('Good Bye Then!!');
    }
}

You can see it here : https://codepen.io/FaridNaderi/pen/awROjY

Hope it helps.

Answer 2

In the function checkForWinner change:

    if(content[winningCombinations[a][0]]==symbol && 
       content[winningCombinations[a][1]]==symbol && 
       content[winningCombinations[a][2]]==symbol){

to:

    if(content[winningCombinations[a][0]-1]==symbol && 
       content[winningCombinations[a][1]-1]==symbol && 
       content[winningCombinations[a][2]-1]==symbol){

It would make things easier if you numbered everything from 0 instead of 1. Then you don't need all those -1.

Answer 3

Check your indices.

Either content[0-8] or content[1-9]

winningCombination uses 1-9 but canvasClicked uses 0-8

That's why you getting some strange results