Javascript tic-tac-toe定时器_Javascript

Javascript tic-tac-toe定时器

javascript

Javascript tic-tac-toe定时器,javascript,Javascript,我正在做一个井字游戏，有人建议我做一个计数器，上面会显示还有多少时间可以移动。比如说10秒。如何使计时器在后台运行，并在每次移动完成时重置，或停止游戏，使未及时移动的人成为失败者？这是我的HTML： <html> <header> <link rel="stylesheet" href="styles/style.css"/> </header> <body> <div class="centered" id="content"

我正在做一个井字游戏，有人建议我做一个计数器，上面会显示还有多少时间可以移动。比如说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>

你可以这样做：

全局定义超时引用

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

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

我实现了一个非常无聊的游戏，展示了如何处理这个问题。您需要注意的主要事情是跟踪setTimeout的返回值。此值应用于取消当前超时（使用

clearTimeout

），每次玩家移动或游戏暂停或停止时，您都希望执行此操作

“严格使用”；
无功定时器；
var按钮；
var时限；
var标签；
函数倒计时（）{
如果（时间限制）{
label.innerHTML=timeLeft；
时间限制--；
定时器=设置超时（倒计时，1000）；
}否则{
label.innerHTML=“失败”；
定时器=未定义；
}
}
函数takeMove（）{
//只有在游戏未启动时，计时器才会未定义
如果（计时器类型）=“未定义”）{
button.innerHTML=“移动”；
时间间隔=10；
倒计时（）；
}否则{
清除超时（计时器）；
时间间隔=10；
倒计时（）；
}
}
函数init（）{
按钮=document.getElementById（“移动”）；
标签=document.getElementById（“标签”）；
按钮。addEventListener（“单击”，takeMove）；
}
document.addEventListener（“DOMContentLoaded”，init，false）

开始
剩余时间：
jsfiddle。。如果可能的话，那就太好了……）对方法的解释就太好了。谢谢！这个“运行代码片段”使您的代码非常有用。“我不知道你可以这么做。@Plohej编辑器中有一个用于添加代码段的控件。看起来像是一个带有打开/关闭尖括号的页面
// 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);