how can i check winners by using jquery

Question

I am tryin to implement a tic tac to game using jquery, and here is my code:

$(document).ready(function() {
    let turn = 1;
    $(".smallbox").click(function() {
        if (turn == 1) {
            $(this).text("X");
            $(this).addClass("X");
            turn = 2;
    } else {
        $(this).text("O");
        $(this).addClass("O");
        turn = 1;
    }
    $("#tune").text(turn);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="mainbox">
    <!-- creat 9 small box -->
    <div class="smallbox" id="square1"></div>
    <div class="smallbox" id="square2"></div>
    <div class="smallbox" id="square3"></div>
    <div class="smallbox" id="square4"></div>
    <div class="smallbox" id="square5"></div>
    <div class="smallbox" id="square6"></div>
    <div class="smallbox" id="square7"></div>
    <div class="smallbox" id="square8"></div>
    <div class="smallbox" id="square9"></div>
</div>

however I have difficulty detecting the winner, due to X and Y. Since my code is providing X information but not Y, how can I improve my code in this regard?

Does this answer your question? [JavaScript TicTacToe if... Winner detection](https://stackoverflow.com/questions/16571035/javascript-tictactoe-if-winner-detection) — luawtf, Dec 27 '20 at 07:56
I created a snippet for you. Can you correct the errors in your code? Do you have CSS style definitions? — react_or_angluar, Dec 27 '20 at 08:08
You questions is not clear. What is wrong with the code? you should mention what have you tried and why it does not work. — Majid khalili, Dec 27 '20 at 19:27
A great example of implementing it is provided below by @Barzin, however, you need to explain clearly your problem, so that other can HELP you to solve it by yourself. — Majid khalili, Dec 27 '20 at 19:29
This like is great start: https://stackoverflow.com/help/how-to-ask — Majid khalili, Dec 27 '20 at 19:30

score 0 · Accepted Answer · answered Dec 27 '20 at 09:22

$(document).ready(function() {

  let gameArray = [];
  let turn = 1;
  let gameOver = false;
  $("#turn").text(turn === 1 ? 'X' : 'O');
  $(".smallbox").click(function() {
    let squereIndex = $(this).attr('id').replace('square', '') - 1;
    if (turn == 1 && !gameOver && gameArray[squereIndex] === undefined) {
      $(this).text("X");
      $(this).addClass("X");
      turn = 2;
      gameArray[squereIndex] = 1;
    } else if (!gameOver && gameArray[squereIndex] === undefined) {
      $(this).text("O");
      $(this).addClass("O");
      turn = 1;
      gameArray[squereIndex] = -1;
    }
    checkWinner();
    $("#turn").text(turn === 1 ? 'X' : 'O')
  });

  function checkWinner() {
    let result;
    //check Rows
    for (let i = 0; i <= 6; i += 3) {
      result = gameArray[i] + (gameArray[i + 1]) + (gameArray[i + 2]);
      if (result === 3) {
        $("#winner").text('X win');
        gameOver = true;
      }
      if (result === -3) {
        $("#winner").text('O win');
        gameOver = true;
      }
    }

    //check Columns
    for (let i = 0; i <= 3; i++) {
      result = gameArray[i] + (gameArray[i + 3]) + (gameArray[i + 6]);
      if (result === 3) {
        $("#winner").text('X win');
        gameOver = true;
      }
      if (result === -3) {
        $("#winner").text('O win');
        gameOver = true;
      }
    }

    //check Diagonal
    result = gameArray[0] + (gameArray[4]) + (gameArray[8]);
    if (result === 3) {
      $("#winner").text('X win');
      gameOver = true;
    }
    if (result === -3) {
      $("#winner").text('O win');
      gameOver = true;
    }
    result = gameArray[2] + (gameArray[4]) + (gameArray[6]);
    if (result === 3) {
      $("#winner").text('X win');
      gameOver = true;
    }
    if (result === -3) {
      $("#winner").text('O win');
      gameOver = true;
    }
  }
});

.smallbox {
  width: 50px;
  border: 1px solid black;
  height: 35px;
  margin: 2px;
  text-align: center;
  padding-top: 15px;
}

.row-container {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="mainbox">
  Turn: <span id='turn'></span>
  <!-- creat 9 small box -->
  <div class='row-container'>
    <div class="smallbox" id="square1"></div>
    <div class="smallbox" id="square2"></div>
    <div class="smallbox" id="square3"></div>
  </div>
  <div class='row-container'>
    <div class="smallbox" id="square4"></div>
    <div class="smallbox" id="square5"></div>
    <div class="smallbox" id="square6"></div>
  </div>
  <div class='row-container'>
    <div class="smallbox" id="square7"></div>
    <div class="smallbox" id="square8"></div>
    <div class="smallbox" id="square9"></div>
  </div>
  <span id='winner'></span>
</div>

how can i check winners by using jquery

1 Answers1

Linked