Question

我不知道如何检查获胜条件。有人可以一步一步向我解释它。我将发布代码。我对编码也很陌生。

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

Answer 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>

需要帮助检查Js井字游戏的获胜条件

1 个答案: