我如何使用 jquery 检查获胜者 [英] how can i check winners by using jquery

问题描述

我正在尝试使用 jquery 为游戏实现 tic tac，这是我的代码:

$(document).ready(function() {让转= 1;$(".smallbox").click(function() {如果(转 == 1){$(this).text("X");$(this).addClass("X");转 = 2;} 别的 {$(this).text("O");$(this).addClass("O");转 = 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"><!-- 创建 9 个小盒子 --><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>

但是，由于 X 和 Y，我很难检测到获胜者.由于我的代码提供 X 信息而不提供 Y，我该如何改进我的代码?

解决方案

$(document).ready(function() {让 gameArray = [];让转= 1;让 gameOver = false;$("#turn").text(turn === 1 ? 'X' : 'O');$(".smallbox").click(function() {让 squereIndex = $(this).attr('id').replace('square', '') - 1;if (turn == 1 && !gameOver && gameArray[squereIndex] === undefined) {$(this).text("X");$(this).addClass("X");转 = 2;游戏数组[squereIndex] = 1;} else if (!gameOver && gameArray[squereIndex] === undefined) {$(this).text("O");$(this).addClass("O");转 = 1;gameArray[squereIndex] = -1;}检查赢家()；$("#turn").text(turn === 1 ? 'X' : 'O')});函数 checkWinner() {让结果；//检查行对于(让我= 0；我<= 6；我+= 3){结果 = gameArray[i] + (gameArray[i + 1]) + (gameArray[i + 2]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真；}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真；}}//检查列for (让 i = 0; i <= 3; i++) {结果 = gameArray[i] + (gameArray[i + 3]) + (gameArray[i + 6]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真；}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真；}}//检查对角线结果 = gameArray[0] + (gameArray[4]) + (gameArray[8]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真；}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真；}结果 = gameArray[2] + (gameArray[4]) + (gameArray[6]);如果(结果 === 3){$("#winner").text('X win');游戏结束 = 真；}如果(结果 === -3){$("#winner").text('O win');游戏结束 = 真；}}});

.smallbox {宽度:50px；边框:1px纯黑色；高度:35px；边距:2px；文本对齐:居中；填充顶部:15px；}.row-容器{显示:弹性；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div class="box" id="mainbox">转弯:<span id='turn'></span><!-- 创建 9 个小盒子 -->
<div class="smallbox" id="square1"></div><div class="smallbox" id="square2"></div><div class="smallbox" id="square3"></div>
<div class='row-container'><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>

<span id='winner'></span>

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?

解决方案

$(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>

这篇关于我如何使用 jquery 检查获胜者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！