Нужна помощь, чтобы проверить условия выигрыша в игре «Крестики-нолики» в Js

Я не знаю, как проверить условия выигрыша. Может кто-нибудь объяснит мне шаг за шагом. Я пришлю свой код. Я тоже новичок в программировании.

prntscr.com/m06ew1

<!DOCTYPE html>
<html>
 <head>
    <title>Tic-Tac-Toe</title>
    <link rel = "stylesheet" href = "TicTacToe.css">
</head>

<body>

    <h1> Tic-Tac-Toe game!</h1>
        <div class = "grid">
                <div class = "grid-item" id = "grid1" ></div>
                <div class = "grid-item" id = "grid2" ></div>
                <div class = "grid-item" id = "grid3" ></div>
                <div class = "grid-item" id = "grid4" ></div>
                <div class = "grid-item" id = "grid5" ></div>
                <div class = "grid-item" id = "grid6" ></div>
                <div class = "grid-item" id = "grid7" ></div>
                <div class = "grid-item" id = "grid8" ></div>
                <div class = "grid-item" id = "grid9" ></div>
        </div> 

 </body>
 <script type = "text/javascript" src = "jquery-3.3.1.js" ></script>    
 <script type = "text/javascript" src = "TicTacToe.js" ></script> 


        <aside>
            <h2>History</h2>

        </aside>

        <section>Player <span id = "player"> <b>1</b> </span> it's your 
turn!</section>

        <footer>
            Copyright Irfan - 2018
        </footer>


</html>

 JSFILE

$("document").ready (function(){


const player1 = 'X'
const player2 = 'O'
CurrentPlayer = 1



$(".grid-item").click (function(){
if (CurrentPlayer == 1) {
 $(this).html(player1);
 $("#player").html("<b>2<b>")
 CurrentPlayer = 2
  }

 else if ( CurrentPlayer ==  2) {
  $(this).html(player2);
  $("#player").html("<b>1<b>")
  CurrentPlayer =1
 }
  }); 
  });

вот мой код, и я привожу ссылку на экран для печати выше. Это для игры в тик-так с буксировкой sdfafsdfdfsafdfasdafsdafafdfasddasfasdfafsdfda

Просто поищите в гугле, есть много ответов.

snnsnn 27.12.2018 15:44

Я пытался ... но я не понимаю никаких ответов, поэтому я здесь

Irfan Golaup 27.12.2018 15:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
2
558
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

var currentPlayer = "one";
var lastGridItem = "";

// Attach click event to grid-item
$(".grid-item").click(function() {

  // Exit if disabled
  if ($(this).hasClass("disabled")) {
    return
  }

  // Determine if player has selected that grid-item
  player = $(this).attr("player");

  // Exit if already chosen by player
  if ( player == "one" || player == "two" ) {
    return
  }

  // Assign current player's choice of this grid-item
  $(this).attr("player", currentPlayer);

  // Save grid-item index so it can be undone
  lastGridItem = $(this).attr("grid-value");

  // Move to next player
  switchPlayer();

  // Check for a winner
  checkWinner($(this));

});


function checkWinner(grid_item) {

  $(".grid-item").each(function() {

    // Get play who has selected grid-item
    player = $(this).attr("player");
    i = $(this).attr("grid-value");

    // Exit if player has not been set for this grid-item 
    if (player == null || player == "") {
      return
    }

    // Check if row assigned to player
    // We only need to check do this once per row, using the far right grid-items
    if (i % 3 === 0) {

      // By using the far right grid-items, we know we need to check the ones with an index 1 lower and 2 lower
      if (player == getPlayer(i - 1) && player == getPlayer(i - 2)) {
        wonMessage(player);
      }

    }

    // Check for columns
    // We only need to do this for the bottom three grid-items
    if (i > 6) {

      // Check if the grid-items that are in that column have been assigned to the same player
      if (player == getPlayer(i - 6) && player == getPlayer(i - 3)) {
        wonMessage(player);
      }

    }

    //Check for diagonals, only do this if checking center square
    if (i == 5) {

      // Check top left and bottom right against centerPlayer
      if (player == getPlayer(1) && player == getPlayer(9)) {
        wonMessage(player);
      }

      // Check centerPlayer against top right and bottom left
      else if (player == getPlayer(3) && player == getPlayer(7)) {

        wonMessage(player);

      }

    }

  });


}


// Gets player assigned to grid-item
function getPlayer(i) {
  return $("[grid-value = " + parseInt(i) + "]").attr("player")
}


// Prints winning message and disables game
function wonMessage(player) {
  $("#winner").text("Player " + player + " has won");
  $(".grid-item").addClass("disabled");
}


// Reset game
$("#reset").click( function() {

  $(".grid-item").attr("player", "").removeClass("disabled");
  $("#winner").text("");
  currentPlayer = "one";

});


// Switch player
function switchPlayer() {

  if (currentPlayer == "one") {
    currentPlayer = "two";
  } else {
    currentPlayer = "one";
  }
  
}


// Undo last move
$("#undo").click( function() {

  // Clear player on grid-item
  $(".grid-item[grid-value = " + lastGridItem + "]").attr("player", "");
  
  // Re-enable if disabled
  $(".grid-item.disabled").removeClass("disabled");
  $("#winner").text("");
  
  switchPlayer();

});
.grid {
  width: 165px;
}

.grid-item {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

.grid-item.disabled {
  opacity: 0.7;
}

.grid-item[player=one] {
  background: red;
}

.grid-item[player=two] {
  background: blue;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Tic-Tac-Toe game!</h1>
<hr>
<strong>Instructions: </strong> click on grid to change player selection. <button id = "undo">Undo</button>  <button id = "reset">Reset</button>


<hr>
<p id = "winner"></p>
<div class = "grid">
  <div class = "grid-item" grid-value = "1"></div>
  <div class = "grid-item" grid-value = "2"></div>
  <div class = "grid-item" grid-value = "3"></div>
  <div class = "grid-item" grid-value = "4"></div>
  <div class = "grid-item" grid-value = "5"></div>
  <div class = "grid-item" grid-value = "6"></div>
  <div class = "grid-item" grid-value = "7"></div>
  <div class = "grid-item" grid-value = "8"></div>
  <div class = "grid-item" grid-value = "9"></div>
</div>

Другие вопросы по теме