Javascript井字游戏计时器答案

【问题标题】：Javascript tic-tac-toe timerJavascript井字游戏计时器
【发布时间】：2016-11-07 06:55:36
【问题描述】：

我正在制作一个井字游戏，有人提议我制作一个计数器，它会显示还剩多少时间可以移动。让我们说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;
}

【问题讨论】：

jsfiddle.. 如果可能的话会很棒..:)

标签： javascript

【解决方案1】：

我已经实现了一个非常无聊的游戏，展示了你可以如何处理这个问题。您需要注意的主要事情是跟踪 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>

【讨论】：

对该方法的解释会很棒。
谢谢！这个“运行代码 sn-p”使您的代码非常有用。我不知道你能做到。
@Plohej 有一个用于在编辑器中添加 sn-ps 的控件。看起来像一个带有开/关尖括号的页面

【解决方案2】：

你可以这样做：

全局定义超时参考

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 中，我们使用闭包将超时后丢失的玩家引用保留在函数范围内。

【讨论】：