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

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

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

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

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

我已尝试重置

var timeUntilClick=+new Date（）-currentTime带有
var timeUntilClick=“”没有运气

单击“开始”时，您的
当前时间定义一次。然后不断从以后的
newdate（）
中减去它。这就是计数器增加的原因。创建新形状时，需要重置当前时间
 每次单击时更新当前时间

currentTime += timeUntilClick;

对于形状的位置，一个基本的解决方案是划分它所能承受的高度和宽度

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

试试这个

document.getElementById（“startName”）.onclick=function（）{
var currentTime=+新日期（）；
document.getElementById（“形状”）.onclick=function（）{
函数randomIntFromInterval（最小值、最大值）{
返回Math.floor（Math.random（）*（3500-500+1）+500）；
}
函数内部窗口（位置、尺寸、最大值）{
如果（位置+尺寸>=最大值）{
返回最大维；
}
返回位置；
}
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
var randomColor=getRandomColor（）；
var randomShape=Math.round（Math.random（））；
if（随机形状<0.5）{
randomShape=“50%”；
}否则{
randomShape=“10%”；
}
var w=窗内宽度；
var h=窗内高度；
var randomleet=Math.floor（Math.random（）*w）；
var randomTop=Math.floor（Math.random（）*h）；
var randomWidth=Math.floor（Math.random（）*（w/2））；
var randomHeight=数学楼层（数学随机（）*（h/2））；
var elem=document.getElementById（“shape”）.style；
元素背景色=随机色；
elem.left=内部宽度（randomLeft，randomWidth，w）+“px”；
elem.top=内部宽度（随机顶部，随机高度，h）+“px”；
元素边界半径=随机形状；
元素宽度=随机宽度+“px”；
元素高度=随机高度+像素；
document.getElementById（“形状”）.setAttribute（“类”、“隐藏”）；
var timeUntilClick=+new Date（）-currentTime；
如果（timeUntilClick>999）{
var timeUntilClick=timeUntilClick/1000+“秒”；
}否则{
var timeUntilClick=timeUntilClick+“毫秒”；
}
document.getElementById（“printTime”）.innerHTML=timeUntilClick；
var randomDelay=randomIntFromInterval（）；
setTimeout（延迟，randomIntFromInterval（））；
函数延迟（）{
document.getElementById（“形状”）.removeAttribute（“类”、“隐藏”）；
当前时间=+新日期（）；
}
}
}
对于窗口外的形状。。。问题是在计算位置时并没有考虑形状的宽度和高度。形状的左上角点将位于窗口内，但形状的其余部分可能会掉出来。你的代码让人困惑，我不知道你为什么对形状的宽度和左位置都使用
randomleeft
。如果您将其拆分为
randomLeft
和
randomWidth
，然后从
窗口中扣除
randomWidth
。在对
randomLeft
进行随机化之前，您的形状将完全适合窗口（也检查边框！）。高度和垂直定位相同。谢谢，您更新的JSFIDLE不起作用，但从Mottie找到了一个解决方案，即如何使用
currentTime=+new Date（）重置计数器。至于令人困惑的代码，我对这一点还不熟悉，我认为我可以使用randomLeft来表示宽度和左侧位置，但现在我可以看到，您的解决方案将有助于保持窗口内的形状谢谢，
currentTime=+new Date（）
是重置计数器的一个很好的解决方案
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();
    }

  }

}