如何为井字棋游戏实现30秒超时判负计时器功能

要实现每回合30秒倒计时、超时判负的功能，需通过维护计时器ID、回合切换时重置计时器、超时触发胜负判定这几个核心步骤完成。以下是完整的修改方案：

核心修改点 #

• 新增全局变量存储计时器ID和剩余时间
• 实现计时器启动、重置和显示更新函数
• 在回合切换、游戏重启时触发计时器重置
• 超时后判定对手获胜，并终止游戏
• 游戏结束时停止计时器避免无效运行

修改后的完整JavaScript代码 #

const ALL_WIN_COMBINATION = [
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [6, 4, 2],
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8]
];
//Player 'X' plays first
let xTurn = true;
let count = 0;
// 新增计时器相关全局变量
let timerId;
let timeLeft = 30;

//Disable All Buttons
const disableButtons = () => {
  clearInterval(timerId); // 游戏结束时停止计时器
  document.querySelectorAll(".block").forEach((element) => (element.disabled = true));
  //enable popup
  document.querySelector(".message").classList.remove("hide");
};

//Enable all buttons (For New Game and Restart)
const enableButtons = () => {
  document.querySelectorAll(".block").forEach((element) => {
    element.innerText = "";
    element.disabled = false;
  });
  //disable popup
  document.querySelector(".message").classList.add("hide");
};

// 更新计时器显示
function updateTimerDisplay() {
  document.getElementById('counter').textContent = `${timeLeft} שניות`;
}

// 启动/重置计时器
function startTimer() {
  // 清除上一轮计时器，避免叠加
  clearInterval(timerId);
  timeLeft = 30;
  updateTimerDisplay();
  
  timerId = setInterval(() => {
    timeLeft--;
    updateTimerDisplay();
    
    if (timeLeft <= 0) {
      clearInterval(timerId);
      // 超时：当前回合玩家未操作，对手获胜
      const winner = xTurn ? 'O' : 'X';
      timeoutWinFunction(winner);
    }
  }, 1000);
}

//正常获胜处理函数
const winFunction = (letter) => {
  disableButtons();
  if (letter == "X") {
    document.getElementById("text").innerHTML = "&#x1F389; <br> השחקן X ניצח!";
  } else {
    document.getElementById("text").innerHTML = "&#x1F389; <br> השחקן O ניצח!";
  }
};

// 超时获胜处理函数
function timeoutWinFunction(winner) {
  disableButtons();
  const loser = winner === 'X' ? 'O' : 'X';
  document.getElementById("text").innerHTML = `&#x1F389; <br> השחקן ${winner} ניצח! <br> השחקן ${loser} לא עשה מהלך בזמן`;
}

//平局处理函数
const drawFunction = () => {
  disableButtons();
  document.getElementById("text").innerHTML = "&#x1F60E; <br> תיקו!";
};

//New Game
document.getElementById("restart_button2").addEventListener("click", () => {
  count = 0;
  xTurn = true; // 重置回合为X先手
  enableButtons();
  startTimer(); // 重启计时器
});
document.getElementById("restart_button").addEventListener("click", () => {
  count = 0;
  xTurn = true;
  enableButtons();
  startTimer();
});

//Win Logic
const winChecker = () => {
  //Loop through all win patterns
  for (let i of ALL_WIN_COMBINATION) {
    let [element1, element2, element3] = [
      document.querySelectorAll(".block")[i[0]].innerText,
      document.querySelectorAll(".block")[i[1]].innerText,
      document.querySelectorAll(".block")[i[2]].innerText,
    ];
    //Check if elements are filled
    if (element1 != "" && element2 != "" && element3 != "") {
      if (element1 == element2 && element2 == element3) {
        //If all 3 buttons have same values then pass the value to winFunction
        winFunction(element1);
      }
    }
  }
};

//Display X/O on click
document.querySelectorAll(".block").forEach((element) => {
  element.addEventListener("click", () => {
    if (xTurn) {
      xTurn = false;
      //Display X
      element.innerText = "X";
      element.disabled = true;
    } else {
      xTurn = true;
      //Display O
      element.innerText = "O";
      element.disabled = true;
    }
    //Increment count on each click
    count += 1;
    if (count == 9) {
      drawFunction();
    }
    //Check for win on every click
    winChecker();
    // 切换回合后重置计时器
    startTimer();
  });
});

//Enable Buttons and disable popup on page load
window.onload = () => {
  enableButtons();
  startTimer(); // 页面加载时启动计时器
};

关键功能说明 #

1. 计时器重置逻辑：每次玩家落子或重启游戏时，调用startTimer()清除上一轮的计时器，重新开始30秒倒计时。
2. 超时判定：当timeLeft归零时，立即停止计时器，根据当前回合（xTurn）判定对手获胜——如果当前是X的回合（xTurn=true）但超时，说明X未操作，O获胜，反之亦然。
3. 游戏状态同步：在disableButtons()中添加clearInterval(timerId)，确保游戏结束（赢/平局/超时）时计时器停止运行，避免无效倒计时。
4. 希伯来语适配：所有获胜、超时提示都替换为希伯来语，符合游戏的语言环境。

验证要点 #

• 页面加载后，计时器自动开始30秒倒计时
• 玩家落子后，计时器立即重置为30秒
• 超时后弹出提示，判定对手获胜，所有按钮禁用
• 点击“התחל מחדש”按钮后，计时器重新启动，游戏状态重置

内容的提问来源于stack exchange，提问作者Maor Israeli