Question

我正在运行一个教程系列并且有一个项目要做。它是一名反应测试员，经过大量的谷歌搜索，我似乎无法解决两个问题并希望得到一些帮助。

当你开始游戏并点击形状时，它会输出时间直到点击，创建随机的形状，颜色，大小和位置。

我想在每次点击形状后重置计数器，并确保形状永远不会离开窗口。

就像现在一样，它只是继续计数并使用新计数进行更新，有时，形状会在窗口外创建，因此您必须滚动才能找到它。

我尝试使用var timeUntilClick = +new Date() - currentTime;重置var timeUntilClick = "";但没有运气

Here's my code on JSFiddle

Answer 1

点击“开始”后，您的currentTime被定义一次。然后你继续从new Date()中减去它。这就是反击增加的原因。创建新形状时需要重置currentTime。 quick JSFiddle forked edit

Answer 2

每次点击都会更新您的当前时间。

currentTime += timeUntilClick;

对于你的形状的位置，一个基本的解决方案是划分它可以采用的高度和宽度。

var w = window.innerWidth/2;
var h = window.innerHeight/2;

Updated Fiddle

Answer 3

试试这个.... demo

document.getElementById("startGame").onclick = function() {

  var currentTime = +new Date();

  document.getElementById("shape").onclick = function() {

    function randomIntFromInterval(min, max) {
      return Math.floor(Math.random() * (3500 - 500 + 1) + 500);
    }

    function insideWindow(position, dimension, max) {
      if (position + dimension >= max) {
        return max - dimension;
      }
      return position;
    }

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    var randomColor = getRandomColor();
    var randomShape = Math.round(Math.random());

    if (randomShape < 0.5) {
      randomShape = "50%";
    } else {
      randomShape = "10%";
    }

    var w = window.innerWidth;
    var h = window.innerHeight;

    var randomLeft = Math.floor(Math.random() * w);
    var randomTop = Math.floor(Math.random() * h);
    var randomWidth = Math.floor(Math.random() * (w / 2));
    var randomHeight = Math.floor(Math.random() * (h / 2));

    var elem = document.getElementById("shape").style;
    elem.backgroundColor = randomColor;
    elem.left = insideWindow(randomLeft, randomWidth, w) + "px";
    elem.top = insideWindow(randomTop, randomHeight, h) + "px";
    elem.borderRadius = randomShape;
    elem.width = randomWidth + "px";
    elem.height = randomHeight + "px";

    document.getElementById("shape").setAttribute("class", "hide");

    var timeUntilClick = +new Date() - currentTime;

    if (timeUntilClick > 999) {
      var timeUntilClick = timeUntilClick / 1000 + " seconds";
    } else {
      var timeUntilClick = timeUntilClick + " milliseconds";
    }

    document.getElementById("printTime").innerHTML = timeUntilClick;

    var randomDelay = randomIntFromInterval();

    setTimeout(delay, randomIntFromInterval());

    function delay() {
      document.getElementById("shape").removeAttribute("class", "hide");
      currentTime = +new Date();
    }

  }

}

如何在窗口内重置计数器和位置

3 个答案: