井字棋项目技术问题：获胜后如何阻止空格子点击？

Hey there! Great job building your first Tic-Tac-Toe game as a new dev—this is such a fun project to learn the basics of JS and jQuery! Let's fix that issue where players can still click the board after someone wins, and also tweak a few other parts of your code to make it work smoother.

The Core Fix: Stop Clicks When the Game Ends #

The simplest way to block clicks after a win is to add a global variable that tracks whether the game is still active. Here's how to implement this step by step:

1. Add a game state variable at the top of your JavaScript code to track if the game is playable:

let currentPlayer = "X";
let gameActive = true; // This will control if clicks are allowed

2. Check the game state first in your click handler—if the game isn't active, exit the function immediately so no more moves are processed:

$(".cell").on('click', function() {
  // If the game is over, do nothing
  if (!gameActive) return;

  // Rest of your click logic goes here...
});

3. Update the game state when a winner is found in your winner() function. We'll also fix your broken win condition logic here (more on that below):

function winner(){
  // Check all winning combinations for X
  const xWon = 
    $(".cell1").hasClass("takenByX") && $(".cell2").hasClass("takenByX") && $(".cell3").hasClass("takenByX") ||
    $(".cell1").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell9").hasClass("takenByX") ||
    $(".cell1").hasClass("takenByX") && $(".cell4").hasClass("takenByX") && $(".cell7").hasClass("takenByX") ||
    $(".cell2").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell8").hasClass("takenByX") ||
    $(".cell3").hasClass("takenByX") && $(".cell6").hasClass("takenByX") && $(".cell9").hasClass("takenByX") ||
    $(".cell4").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell6").hasClass("takenByX") ||
    $(".cell7").hasClass("takenByX") && $(".cell8").hasClass("takenByX") && $(".cell9").hasClass("takenByX");

  // Check all winning combinations for O
  const oWon = 
    $(".cell1").hasClass("takenByO") && $(".cell2").hasClass("takenByO") && $(".cell3").hasClass("takenByO") ||
    $(".cell1").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell9").hasClass("takenByO") ||
    $(".cell1").hasClass("takenByO") && $(".cell4").hasClass("takenByO") && $(".cell7").hasClass("takenByO") ||
    $(".cell2").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell8").hasClass("takenByO") ||
    $(".cell3").hasClass("takenByO") && $(".cell6").hasClass("takenByO") && $(".cell9").hasClass("takenByO") ||
    $(".cell4").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell6").hasClass("takenByO") ||
    $(".cell7").hasClass("takenByO") && $(".cell8").hasClass("takenByO") && $(".cell9").hasClass("takenByO");

  if (xWon || oWon) {
    $('h1').text("Congratulations Winner!");
    gameActive = false; // Disable further clicks once someone wins
    return;
  }
}

4. Reset the game state when restarting—add this line to your restart button click handler to re-enable clicks for new games:

$("button").on('click', function() {
  $('.cell').text("");
  $('.cell').removeClass("takenByX");
  $('.cell').removeClass("takenByO");
  $('h1').text("C R O S S E S & & N O U G H T S");
  gameActive = true; // Re-allow clicks for the new game
  if (currentPlayer == "O"){
    playerChange();
  }
});

Other Quick Fixes for Your Code #

I noticed a few small issues that will make your game work better:

• Broken win condition logic: Your original $(".cell1" && ".cell2" && ".cell3") syntax doesn't work in jQuery—you need to check each cell's class separately with && between them, like in the updated winner() function above.
• Duplicate win check code: You had a separate win check outside the winner() function—remove that, since all win logic is now handled inside the function.
• Redundant click handler code: You can simplify the click logic to avoid repeating the same checks for X and O:

$(".cell").on('click', function() {
  if (!gameActive) return;
  const $cell = $(this);
  
  // Check if the cell is already taken
  if ($cell.hasClass("takenByX") || $cell.hasClass("takenByO")) return;

  // Set cell text and class based on current player
  if (currentPlayer === "X") {
    $cell.text("X").addClass("takenByX");
  } else {
    $cell.text("O").addClass("takenByO"); // Fixed your typo: "0" → "O"
  }
  playerChange();
});

• Typo in O's text: You had $(this).text("0") (zero instead of the letter O)—fixed that in the code above.
• Useless (""); lines: These do nothing, so you can safely delete them.

Full Updated JavaScript Code #

Here's the complete JS code with all fixes applied:

let currentPlayer = "X";
let gameActive = true;

$(".cell").on('click', function() {
  if (!gameActive) return;
  const $cell = $(this);
  
  if ($cell.hasClass("takenByX") || $cell.hasClass("takenByO")) return;

  if (currentPlayer === "X") {
    $cell.text("X").addClass("takenByX");
  } else {
    $cell.text("O").addClass("takenByO");
  }
  playerChange();
});

function playerChange() {
  currentPlayer = currentPlayer === "X" ? "O" : "X";
  winner();
}

$("button").on('click', function() {
  $('.cell').text("");
  $('.cell').removeClass("takenByX");
  $('.cell').removeClass("takenByO");
  $('h1').text("C R O S S E S & & N O U G H T S");
  gameActive = true;
  if (currentPlayer === "O"){
    playerChange();
  }
});

function winner(){
  const xWon = 
    $(".cell1").hasClass("takenByX") && $(".cell2").hasClass("takenByX") && $(".cell3").hasClass("takenByX") ||
    $(".cell1").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell9").hasClass("takenByX") ||
    $(".cell1").hasClass("takenByX") && $(".cell4").hasClass("takenByX") && $(".cell7").hasClass("takenByX") ||
    $(".cell2").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell8").hasClass("takenByX") ||
    $(".cell3").hasClass("takenByX") && $(".cell6").hasClass("takenByX") && $(".cell9").hasClass("takenByX") ||
    $(".cell4").hasClass("takenByX") && $(".cell5").hasClass("takenByX") && $(".cell6").hasClass("takenByX") ||
    $(".cell7").hasClass("takenByX") && $(".cell8").hasClass("takenByX") && $(".cell9").hasClass("takenByX");

  const oWon = 
    $(".cell1").hasClass("takenByO") && $(".cell2").hasClass("takenByO") && $(".cell3").hasClass("takenByO") ||
    $(".cell1").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell9").hasClass("takenByO") ||
    $(".cell1").hasClass("takenByO") && $(".cell4").hasClass("takenByO") && $(".cell7").hasClass("takenByO") ||
    $(".cell2").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell8").hasClass("takenByO") ||
    $(".cell3").hasClass("takenByO") && $(".cell6").hasClass("takenByO") && $(".cell9").hasClass("takenByO") ||
    $(".cell4").hasClass("takenByO") && $(".cell5").hasClass("takenByO") && $(".cell6").hasClass("takenByO") ||
    $(".cell7").hasClass("takenByO") && $(".cell8").hasClass("takenByO") && $(".cell9").hasClass("takenByO");

  if (xWon || oWon) {
    $('h1').text("Congratulations Winner!");
    gameActive = false;
  }
}

Your HTML and CSS look fantastic—no changes needed there! Keep up the great work, you're doing awesome for only 2 months of learning.

内容的提问来源于stack exchange，提问作者Falon Landers