2

我正在创建一个愚蠢的配对游戏。游戏似乎运行正常，包括每轮 10 秒的计时器。我想显示一个计时器，以便玩家知道他们还剩下多少时间。我可以让它工作，但问题是在第一级之后的每个级别上，上一个级别的计时器（如果它还没有达到 00:00）和当前级别的计时器似乎相互覆盖并且是每个都简要显示。

当玩家进入下一关时，我该如何隐藏上一关的计时器？

我试图在调用计时器函数之前删除节点并重新创建它，但无济于事。

// Prevent overlapping timers by creating a new tickTock div
function refreshTimer() {
  displayTimer.remove();
  var tickTock = document.createElement("div");
  tickTock.setAttribute("id", "tickTock");
  textContainer.appendChild(tickTock);
} */

如果您在整页中运行以下代码段，则第一级的正确答案将是第一行中的最后一张图片。那应该重现我在显示计时器上遇到的问题。

// Declare starting variables
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
var gameEnd = document.getElementById("gameEnd");
var topText = document.getElementById("instructions1");
var bottomText = document.getElementById("instructions2");
var displayTimer = document.getElementById("tickTock");
var textContainer = document.getElementById("textContainer");
var numberOfJesses = 5;

// Start the game
function generateFaces() {
  for (var i = 0; i < numberOfJesses; i++) {

    // Generate the images
    var jesse = document.createElement("img");
    // Only using a direct link, so that SO can play the game in order to reproduce the issue.
    jesse.src = "https://bloximages.newyork1.vip.townnews.com/postandcourier.com/content/tncms/assets/v3/editorial/b/c2/bc2237a6-c038-11e9-940f-1b44a4174d4a/5d56c8d1dc6d2.image.png?resize=1200%2C849";
    jesse.height = "100";

    // Create random values for top location
    randomTop = (Math.floor(Math.random() * 401)) + "px";
    jesse.style.top = randomTop;

    // Create random values for left location
    randomLeft = (Math.floor(Math.random() * 401)) + "px";
    jesse.style.left = randomLeft;

    // Place the images in the left side box
    theLeftSide.appendChild(jesse);
  }

  // Copy the left side into the right side
  var leftSideImages = theLeftSide.cloneNode(true);

  // Remove the last image
  leftSideImages.removeChild(leftSideImages.lastChild);

  // Place the images in the right side box
  theRightSide.appendChild(leftSideImages);

  // Select the last image on the left to be the correct choice
  theLeftSide.lastChild.onclick = function nextLevel(event) {
    event.stopPropagation();

    // Clear the board after the correct answer is selected
    while (theLeftSide.hasChildNodes()) {
      theLeftSide.removeChild(theLeftSide.firstChild);
    }
    while (theRightSide.hasChildNodes()) {
      theRightSide.removeChild(theRightSide.firstChild);
    }

    // Add 5 more images for the next level
    numberOfJesses += 5;

    // Start the next level
    generateFaces();
  };

  // Reset the timer on correct answer
  // FIXME: refreshTimer();

  // Start the display timer
  goTime();
}

// Keep track of time for the display timer
function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
  that = this,
  diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

// Set up the display timer
function goTime() {
  var timer = new CountDownTimer(10);

  timer.onTick(format).start();

  function restart() {
    if (this.expired()) {
      setTimeout(function() { timer.start(); }, 1000);
    }
  }

  function format(minutes, seconds) {
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    displayTimer.textContent = minutes + ':' + seconds;
  }
};

/* Unable to get this to properly affect the display timer
// Prevent overlapping timers by creating a new tickTock div
function refreshTimer() {
  displayTimer.remove();
  var tickTock = document.createElement("div");
  tickTock.setAttribute("id", "tickTock");
  textContainer.appendChild(tickTock);
} */
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Rob Upchurch">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Rubik+Mono+One&display=swap" rel="stylesheet">
    <title>Jesse "The Body" Ventura's Matching Game</title>
  </head>
  <body onload="generateFaces()">
    <div class="page">
      <div class="leftImage">
        <img src="Jesse_Ventura.png" alt="Jesse Ventura" id="jesse">
      </div>
      <div class="rightImage">
        <img src="jesse2.png" alt="Jesse Ventura" id="jesse2">
      </div>
      <div class="textContainer" id="textContainer">
        <div class="text">
          <h1 id="header">Let's Play!</h1>
        </div>
        <div class="text">
          <h2 id="score"></h2>
        </div>
        <div class="text">
          <p class="instructions" id="instructions1">Click the image of Jesse Ventura on the left side that is missing from the right side.</p>
        </div>
        <div class="text">
          <p class="instructions" id="instructions2">You have 10 seconds on each round to select the correct image.</p>
        </div>
        <div id="tickTock"></div>
      </div>
      <div class="gameContainer">
        <div class="game" id="leftSide"></div>
        <div class="game" id="rightSide"></div>
      </div>
      <div id="gameEnd"></div>
    </div>
    <script src="matching.js"></script>
  </body>
</html>

我希望隐藏上一个计时器，并且只有当前级别的计时器可见。

4

0 回答 0