Javascript井字棋计时器

Javascript tic-tac-toe timer

本文关键字：计时器 Javascript      更新时间：2023-09-26

我正在制作一款井字游戏，有人建议我制作一个计数器，告诉我还有多少时间可以移动。比方说10秒。如何让计时器在后台运行并在每次移动完成时重置，或者阻止游戏使未及时移动的人成为失败者?这是我的HTML:

<html>
<header>
<link rel="stylesheet" href="styles/style.css"/>
</header>
<body>
<div class="centered" id="content">
  <div class="row" id="r1">
    <div class="field empty" id="f1"></div>
    <div class="field empty" id="f4"></div>
    <div class="field empty" id="f7"></div>
  </div>
  <div class="row" id="r2">
    <div class="field empty" id="f2"></div>
    <div class="field empty" id="f5"></div>
    <div class="field empty" id="f8"></div>
  </div>
  <div class="row" id="r3">
    <div class="field empty" id="f3"></div>
    <div class="field empty" id="f6"></div>
    <div class="field empty" id="f9"></div>
  </div>
</div>
<script type="application/javascript" src="scripts/jquery/jquery-3.1.1.min.js"></script>
<script type="application/javascript" src="scripts/scripts.js"></script>         
</body>
</html>

javascript/jquery:

var changeTurn = false;
var turn = true;
var classCross = "cross";
var classCircle = "circle";
var classEmpty = "empty";    
$('.field').click(function(event) {
  event.stopImmediatePropagation();
  var div = $(this);
  changeTurn = false;
  if (turn) {
    if (fieldIsFree(div)) {
      div.removeClass(classEmpty);
      div.addClass(classCircle);
      changeTurn = true;
    }
  }
  else {
    if (fieldIsFree(div)) {
      div.removeClass(classEmpty);
      div.addClass(classCross);
      changeTurn = true;
    }
  }
  if (changeTurn)
    turn = !turn;
  return false;
});
function fieldIsFree(tmpdiv) {
  if (tmpdiv.hasClass(classCross))
    return false;
  if (tmpdiv.hasClass(classCircle))
    return false;
  return true;
}

我已经实现了一个非常无聊的游戏，它向你展示了如何做到这一点。您需要注意的主要事情是跟踪setTimeout的返回值。此值应用于取消当前超时(使用clearTimeout)，您将希望在每次玩家移动或游戏暂停或停止时执行此操作。

"use strict";
var timer;
var button;
var timeLeft;
var label;
function countdown() {
  if (timeLeft) {
    label.innerHTML = timeLeft;
    timeLeft--;
    timer = setTimeout(countdown, 1000);
  } else {
    label.innerHTML = "Fail";
    timer = undefined;
  }
}
function takeMove() {
  // timer will only be undefined if the game is not started
  if (typeof(timer) === "undefined") {
    button.innerHTML = "Move";
    timeLeft = 10;
    countdown();
  } else {
    clearTimeout(timer);
    timeLeft = 10;
    countdown();
  }
}
function init() {
  button = document.getElementById("move");
  label = document.getElementById("label");
  button.addEventListener("click", takeMove);
}
document.addEventListener("DOMContentLoaded", init, false);
<div id="game-board">
  <button id="move">Start</button>
</div>
<div id="output">
  Time left: <span id="label"><span>
</div>

你可以这样做:

全局定义超时引用

var timeoutReference;

转弯开始/转弯处

// the previous player made his move on time, clear his timeout
clearTimeout(timeoutReference);
// set a new timeout for the new player
timeoutReference = setTimeout(function(player) {
    return function() { setLose(player); }
}(currentPlayer), 10000);

其中currentPlayer是十字或圆形，setLose是处理提前结束游戏并显示玩家输了而另一个玩家赢了的函数。

在setTimeout中，我们使用了一个闭包来保持在函数范围内超时后丢失的播放器引用。

相关文章：