javascript 如何添加计时器到井字游戏

我建立了一个井字游戏，我需要添加一个计时器，所以如果一个球员没有作出移动30秒，他失去了比赛，但我不知道如何在游戏中实现这一点。游戏语言是希伯来语，但这并不重要，我尝试添加一个计时器从一些代码，我发现在网上与setTimeout，但我不'我不知道如何设置计时器重置后，每一轮和结束游戏后，时间运行和打印其他对手赢了。谢谢帮助！

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;

//Disable All Buttons
const disableButtons = () => {
  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");
};

//This function is executed when a player wins
const winFunction = (letter) => {
  disableButtons();
  if (letter == "X") {
    document.getElementById("text").innerHTML = "&#x1F389; <br> 'X' Wins";
  } else {
    document.getElementById("text").innerHTML = "&#x1F389; <br> 'O' Wins";
  }
};

//Function for draw
const drawFunction = () => {
  disableButtons();
  document.getElementById("text").innerHTML = "&#x1F60E; <br> It's a Draw";
};

//New Game
document.getElementById("restart_button2").addEventListener("click", () => {
  count = 0;
  enableButtons();
});
document.getElementById("restart_button").addEventListener("click", () => {
  count = 0;
  enableButtons();
});

//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 3 empty elements are same and would give win as would
    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 Y
      element.innerText = "O";
      element.disabled = true;
    }
    //Increment count on each click
    count += 1;
    if (count == 9) {
      drawFunction();
    }
    //Check for win on every click
    winChecker();
  });
});
//Enable Buttons and disable popup on page load
window.onload = enableButtons;

* {
    padding: 0;
    margin: auto;
    box-sizing: border-box;   
  }
  body {
    height: 70vh;
    background-image: red;
  }
  html {
    font-size: 22px;
    text-align: center;
  }
  #intro{
    text-shadow: -1px 1px 2px white,
    11px 1px 2px white,
    1px -1px 0px white,
    -1px -1px 0px white;
  }
  #case {
    position:absolute;
    transform: translate(-50%, -16%);
    top: 50%;
    left: 50%;
  }
  #game_board {
    width: 49vmin;
    height: 49vmin;
    display: flex;
    flex-wrap: wrap;
  }
  .block {
    background: #ffffff;
    height: 15vmin;
    width: 15vmin;
    border: none;
    border-radius: 30px;
    font-size: 14vmin;
    color: black;
  }
  #restart_button {
    font-size: 1em;
    padding: 1em;
    border-radius: 90px;
    background-color: black;
    color: #ffffff;
    position: relative;
  }
  .message {
    background: red;
    height: 100%;
    width: 100%;
    position:absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    gap: 1em;
    font-size: 12vmin;
  }
  #restart_button2 {
        font-size: 1em;
        padding: 1em;
        border-radius: 90px;
        background-color: black;
        color: #ffffff;
        position: relative;
  } 
  #text {
    color: black;
    text-shadow: -1px 1px 2px white,
    11px 1px 2px white,
    1px -1px 0px white,
    -1px -1px 0px white;
    text-align: center;
    font-size: 2em;
  }
  .message.hide {
    display: none;
  }

<!DOCTYPE html>
<html dir="rtl" lang="he">
<head>
    <meta charset="UFT-8" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>איקס עיגול - מאור ישראלי</title>
    <div id="intro">
        <div id = "title">
            <u><h1>איקס עיגול</h1></u>
        </div>
        <div id ="target_header">
            <h2>מטרת המשחק:</h2>
        </div>
        <div id="target">
            <b>מטרת כל שחקן היא ליצור שלושה סימנים (איקס או עיגול) הנמצאים על שורה אחת, טור אחד או אלכסון אחד.</b>
        </div>
        <div id ="instruction_header">
            <h2>הוראות:</h2>
        </div>
        <div id ="instruction">
            <b>
                המשחק מתחיל בלחיצה על אחד התאים,<br>
                השחקן הראשון שלוחץ הוא ה-X והשחקן השני הוא ה-O.<br>
                אם לא מתבצע מהלך תוך 30 שניות השחקן מפסיד!<br>
            </b>
        </div>
        <div id="timer">
            <b><u>
                זמן שנותר: <span id="counter"></span>
            </u></b>
        </div>
    </div>
</head>
<body>
    </div>
    <div id ="case">
        <div id="game_board">
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
            <button class="block"></button>
        </div>
        <button id="restart_button">התחל מחדש</button>
    </div>
    <div class="message hide">
        <p id="text">דוגמא</p>
        <button id="restart_button2">התחל מחדש</button>
    </div>
    <script src="tictac.js"></script>
</body>
</html>

这是我尝试在一个非常基本的两人游戏中使用计时器策略。
本演示中使用的方法是在游戏等待玩家移动的任何时候调用setTimeout。当时间到期时，回调将运行并关闭游戏。如果玩家在时间到期前移动，则计时器将被清除，并为下一个玩家启动新的计时器。
我尽了最大的努力让它尽可能的简单，但是当我添加了一个全局计时器时，它变得更密集了。无论如何，它进一步展示了全局计时器如何独立于玩家的事件计时器，并以更小的时间粒度来增加时钟，就像我在这里所做的：

document.getElementById('makemove')
  .addEventListener('click', waitForNextMove);
  
function waitForNextMove(){
  resetTimer();

  currentPlayer = ++currentPlayer % 2;  
  playerName = players[currentPlayer];
  console.log(`${playerName}, waiting for your next move...`);
  document.querySelector('.player').innerText = playerName;
  //here resets the previous timer
  clearInterval(currentTimer);
  //and starts the new one
  currentTimer = setTimeout(onTimeExpired, duration);
}

const onTimeExpired = () => {
  console.log("Time expired!");
  gameOver();
  
  stopTimer();
}

const gameOver = () => {
  console.log('The game is over.');
  document.getElementById('makemove').disabled = true;
}

const duration = 5000;
const players = ['player1', 'player2'];
let currentPlayer = -1;
let currentTimer;
let globalTimer;

waitForNextMove();

//----Global Timer
startTimer();

function startTimer(){
  globalTimer =
    setInterval(()=>{
      incrementTimer();
    }, 1000);
}
function stopTimer(){
  document.getElementById('timer').innerText = '5';
  clearInterval(globalTimer);
}
function resetTimer(){
  document.getElementById('timer').innerText = '0';
}
function incrementTimer(){
  const t = document.getElementById('timer');
  const i = parseInt(t.innerText) + 1;
  t.innerText = i;
}

:root{
  --padding: .2rem .6rem;
}

label{
  border: solid lightgray;
  padding: var(--padding);
}

button{
  padding: var(--padding);
  cursor: pointer;
}

#timer{
  display: inline-block;
  border: solid 2px;
  padding: var(--padding);
  background: red;
  color: white;
  font-weight: 600;
}

<label>PLAYER: <span class="player"></span></label>
<button id="makemove">Make your move!</button>

<div id="timer">1</div>

javascript 如何添加计时器到井字游戏

1条答案

相关问题

热门标签

最新问答