Tic tac Toe javascript stop switching turns after winner has been announced

https://stackoverflow.com/questions/20224394

05-08-2022
|

Question

i'm stuck with my tic tac toe program for what seems like the 100th time. I am running my program through selenium and everything works fine except that if there is a winner announced it will still switch turns and click another box. for example if player 2 wins then it will click another box and then it will make player 1 win. How can i make it so when a winner is announced it stops switching turns?

Here is my js:

var cell;
var nextTurn = 'X';



function mouseMotion(ref,motion){
if(motion == 'over')
    {
        ref.style.borderColor='#E00';
    }
    else if(motion == 'out')
    {
        ref.style.borderColor='#CCC';
    }
}

function cellClick(cell){
if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
{ alert ('Square has already been choosen, please select another square');
return
}
cell.innerHTML = nextTurn;
playersTurn();
winnerIs();

 }
function playersTurn(){
if(nextTurn == 'X'){
    nextTurn = 'O';
    }
else {
    nextTurn = 'X';
    }
}

function winnerIs(){

if (document.getElementById("cell1x1").innerHTML == 'X' &&    document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell1x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';

}

else if (document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell3x1").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
{document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell3x1").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell1x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x1").innerHTML == 'O' && document.getElementById("cell2x1").innerHTML == 'O' && document.getElementById("cell3x1").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x2").innerHTML == 'O' && document.getElementById("cell2x2").innerHTML == 'O' && document.getElementById("cell3x2").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if(document.getElementById("cell1x3").innerHTML == 'O' && document.getElementById("cell2x3").innerHTML == 'O' && document.getElementById("cell3x3").innerHTML == 'O')
    {document.getElementById('winnerIs').innerHTML = 'Player 2 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
}


function startNewGame(){
    location.reload(true);
}

Here is my HTML:

<html>
<title>Tic Tac Toe</title>
<head>
 <script type="text/javascript" src="tictactoe.js"></script>
 <link rel="stylesheet" type="text/css" href="tictactoestyle.css">
</head>
<body>
 <div id="playersTurn">&nbsp;</div>
 <div id="winnerIs"></div>
 <table id="tttTable" align="center">
 <tr>
  <td id="cell1x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  <td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  </tr>
 <tr>
   <td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   </tr>
  <tr>
  <td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  <td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  </tr>
  </table>
  <input id="newGameBtn" type="button" value="Start New Game" onclick="startNewGame();" />
   </body>
   </html>

And here is my CSS:

 #tttTable
  {
    width: 600px;
   height: 600px;
  }

 .cell
  {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
 }

#newGameBtn
{
  margin-left: 46%;
}

#playersTurn
{
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 height: 10px;
}

#outer 
{ 
 width: 600px; 
}

#winnerIs
{
  background-color: #EEE;
  text-align: center;
  font-weight: bold;
  font-size: 5em;
  width:700px;
 height:100px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-350px;
 display: none;
 }

Thank you for taking the time to read my code and help me. If you seen anything i could improve upon then i would love to hear what you have to say. Thank you again!

Solution

When player wins you make "winnerIs" DIV visible. Without adding any variables or flags you can just add this block before anything else into function function cellClick(cell):

if (document.getElementById("winnerIs").style.display == "block") {
   alert('Game has already been won!');
   return 
}

It will check if "winnerIs" DIV is visible and if so - will prevent further moves.

Demo: http://jsfiddle.net/zG3pm/4/

OTHER TIPS

You could track a "game over" flag such as var gameOver = false then set that to true when you detect a winner. Then your cellClick function could ignore inputs once the game is over:

function cellClick(cell){
    if(gameOver == true)
        return;

    if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
    {
        alert ('Square has already been choosen, please select another square');
        return;
    }
    cell.innerHTML = nextTurn;
    playersTurn();
    winnerIs();
}

Note, your code still needs to handle the case of a "draw".

I think you can just make a variable that keeps track of whether the game has ended or not. Then in your cellClick function you only execute the code only if your variable is false.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow