我正在制作一款井字棋游戏，有人建议我制作一个计数器，该计数器会显示还剩多少时间可以采取行动。比方说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>关于JavaScript 井字棋计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40455301/