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

Question

我正在运行一个系列教程，还有一个项目要做。这是一个反应测试器，在谷歌了很多次之后，我似乎解决不了两个问题，希望能得到一些帮助。

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

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

就像现在一样，它只是不断计数和更新新的计数，有时，形状是在窗口外创建的，所以你必须滚动才能找到它。

我尝试过用var timeUntilClick = "";重置var timeUntilClick = +new Date() - currentTime;，但没有成功

Here's my code on JSFiddle

Answer 1

当点击"start“时，你的currentTime被定义了一次。然后你一直从new Date()中减去它。这就是为什么计数器会增加。创建新形状时需要重置currentTime。quick JSFiddle forked edit

Answer 2

每次点击都可以更新你的currentTime。

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();
    }

  }

}