function logic for stopping game and checking/displaying winner

Question

I've been working on this tic tac toe game for a while, I've been held up on this one problem with the logic in the checkForWin() function. This function checks each possible winning combination just fine, but there's a lag in the alert('game over') message that is suppose to fire as soon as a winning combo is matched.

Here's the funny part, when you're about to click on that square to win the game, alert() fires before square.innerHTML = x or o. and if you look at my code the first thing to happen if the game isn't already over or if the square isn't empty is this.innerHTML = playerTurn; then checkForWin();

Anyway to get around this I've had to setTimeout(checkForWin, 1000) to delay that alert message 1s after the winning move is clicked. And here's the main problem, setTimeout didn't help me, now when you click that winning move nothing happens!!! now turn has switched and if the other player goes after the the previous turn and move has already won, that is when alert('Game Over');

const winCombos = [
     [0, 1, 2],
     [3, 4, 5],
     [6, 7, 8],
     [0, 3, 6],
     [1, 4, 7],
     [2, 5, 8],
     [0, 4, 8],
     [6, 4, 2]
];

let playerTurn = 'x';
let gameEnded = false;
const cells = document.querySelectorAll('td');

for(i = 0; i < 9; i++) {
     cells[i].addEventListener('click', runGame);
}

function runGame() {
     if(gameEnded===true||this.innerHTML!=='') {
          return;
     }
     this.innerHTML = playerTurn;
     setTimeout(checkForWin, 1000);
     switchTurn();
}

function checkForWin() {
     for(let i = 0; i < winCombos.length; i++) {
          const c0 = document.getElementById('c' + winCombos[i][0]);
          const c1 = document.getElementById('c' + winCombos[i][1]);
          const c2 = document.getElementById('c' + winCombos[i][2]);

          if(c0.innerHTML===playerTurn&&c1.innerHTML===playerTurn&&c2.innerHTML===playerTurn) {
               gameEnded = true;
               alert('Game Over');
          }
     }
}

function switchTurn() {
     if(playerTurn === 'x') {
          playerTurn = 'o'
     } else if(playerTurn === 'o') {
          playerTurn = 'x';
     }
}

td {
 border:  2px solid #333;
 height:  100px;
 width:  100px;
 text-align:  center;
 vertical-align:  middle;
 font-family:  "Comic Sans MS", cursive, sans-serif;
 text-transform: capitalize;
 font-size:  70px;
 cursor: pointer;
}

table {
 border-collapse: collapse;
 position: absolute;
 left: 50%;
 margin-left: -155px;
 top: 220px;
}

table tr:first-child td {
 border-top: 0;
}

table tr:last-child td {
 border-bottom: 0;
}

table tr td:first-child {
 border-left: 0;
}

table tr td:last-child {
 border-right: 0;
}

.endgame {
  display: none;
  width: 200px;
  top: 120px;
  background-color: red;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-size: 2em;
}

<!DOCTYPE html>
<html>
<head>
 <title>tic tac toe</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <table>
  <tr>
   <td class="cell" id="c0"></td>
   <td class="cell" id="c1"></td>
   <td class="cell" id="c2"></td>
  </tr>
  <tr>
   <td class="cell" id="c3"></td>
   <td class="cell" id="c4"></td>
   <td class="cell" id="c5"></td>
  </tr>
  <tr>
   <td class="cell" id="c6"></td>
   <td class="cell" id="c7"></td>
   <td class="cell" id="c8"></td>
  </tr>
  <div class="endgame">
   <div class="text">Cant see this text</div>
  </div>
 </table>

 <script type="text/javascript" src="script2.js"></script>
</body>
</html>

See: https://stackoverflow.com/questions/6807799/stop-page-execution-like-the-alert-function — cemsina güzel, Sep 08 '18 at 20:34

score 0 · Accepted Answer · answered Sep 08 '18 at 22:10

Something you could do is, instead of calling setInterval on your checkForWin function, just edit the inside of your checkForWin function:

if (c0.innerHTML===playerTurn&&c1.innerHTML===playerTurn&&c2.innerHTML===playerTurn) {
    gameEnded = true;
    setInterval(function() {
        alert('Game Over');
    }, 1000);
}

And just change this line inside runGame from this:

setTimeout(checkForWin, 1000);

to this:

checkForWin();

Also, why do you have the else if conditional at the bottom of your switchTurn function? The playerTurn variable can only be x or o, can't it? Just use an else statement.

function logic for stopping game and checking/displaying winner

1 Answers1