如果在JavaScript中没有单击，如何使圆圈消失？

我正在用JavaScript制作这个游戏

https://jsfiddle.net/hffuhb1n/

（我分离了链接，因为出于某种原因，它不允许我提交）

点击一个正方形会给你一定数量的点数，这取决于点击的速度。当一个圆圈出现时，如果点击，我希望它能带走800点，如果在2秒钟内没有点击，我希望它再次消失，然后另一个正方形或圆圈会出现，依此类推

我已经看了所有的地方，我不知道如何设置圆在2秒钟后消失，以便之后可以出现另一个形状

请帮忙~谢谢

使用。它在以毫秒（秒arg）为单位指定的持续时间后运行函数（第一个arg），如下所示：

setTimeout(function() {
    // Code...
}, time)

这将在

时间
毫秒后运行该函数。因此，您将使用
2000
，持续2秒钟

还请注意，您可以使用
score+=100
将分数增加100，而不是
score=score+100

您需要做的是设置一个值为
800

在setInterval（）中，您可以使用
if
语句检查圆是否被单击，如果没有，则从变量中减去
800
点。然后从分数中选择变量

如果未单击圆圈，则在2秒结束时，变量将设置为
0
。如果是，变量将是
800
，分数将减去
800

这是一张工作票

我使用了以下代码：

// v ON CLICK v
var clicked = false // Variable to store if it has been clicked
var thisboxdiv = boxDiv // To store current box div (to stop others being hidden)
boxDiv.onclick = function() {

    clicked = true // Set it to clicked
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    totalTime = totalTime + reactionTime;
    document.getElementById("time").innerHTML = reactionTime;
    document.getElementById("total").innerHTML = totalTime;

    score = score - 800;

    document.getElementById("score").innerHTML = score;
    this.style.display = "none";
    level2();

  }
  // ^ ON CLICK ^

var level2_in_2000 = setInterval(function() {
  // If div has not been clicked, switch to next level and hide div
  if (!clicked) {
    thisboxdiv.style.display = "none";
    level2()
  }
}, 2000)


更新：多亏了，我现在意识到使用
clearInterval（）
更有效，请查看新代码和下面的代码：

var level2_in_2000 = setInterval(function() {
    // Hide div
    thisboxdiv.style.display = "none";
    level2()
}, 2000)

// v ON CLICK v
boxDiv.onclick = function() {

    clearInterval(level2_in_2000)
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    totalTime = totalTime + reactionTime;
    document.getElementById("time").innerHTML = reactionTime;
    document.getElementById("total").innerHTML = totalTime;

    score = score - 800;

    document.getElementById("score").innerHTML = score;
    this.style.display = "none";
    level2();

  }
  // ^ ON CLICK ^

只需将其添加到位于底部的函数
level2Cir（）
中的
函数makeBox2（）{
，即可获得所需的函数性

circleKiller = setTimeout(function(){
      boxDiv.style.display="none";
      level2(); 
    },2000); // 2 seconds   

然后如果圆圈被点击了，我们就不需要执行circleKiller了。所以让我们把它清除掉，把这个代码放在圆圈的开头，点击代码

 // v ON CLICK v
  boxDiv.onclick = function() {
      clearTimeout(circleKiller);
      .....
      .....
  }

以下是
这就是为什么不能添加小提琴链接：可以使用
setTimeout（function（）{/*Do Things*/}，/*Time（ms）*/）
我投了你的赞成票。投反对票绝对不公平，不管是谁投的都是有害的。可能是因为最初你的答案中没有什么内容，可以作为评论。我没有投反对票，但我也有这种感觉，但现在你的答案似乎是这样valid@KirillChatrov谢谢！；）我拉了你的小提琴，它开始发疯了，就像形状切换的速度太快一样，它不断增加并以超高速运行，这是预期的行为吗？？？@Reddy我知道，我正在更新我的代码（它使浏览器崩溃！）您的逻辑中有一个下限。
boxDiv
是一个全局变量，因此，如果单击该圆圈，屏幕上当前在2秒内的方框将被隐藏。这不是单击的圆圈。您需要在函数中创建一个变量来存储该圆圈，如下所示：
var currentDiv=boxDiv
，然后设置
currentDiv、 style.display
到
'none'
@Druzion谢谢你的评论，但这不是它的工作原理，如果没有点击，他想在2秒后隐藏圆圈，因此将其设置为display none，此时
boxDiv
将是圆圈本身。如果你看到他的逻辑，他只在点击后渲染一个新形状，我正在做的就是渲染隐藏后..相同..
boxDiv=document.getElementById（“box”）
这是长方体div，它是转换为不同形状的同一个div，因此即使我将它保存到一个新的局部变量中，它仍然指向同一个div right？？因此我处理的是同一个div right？？因此，任何给定点的局部变量
currentDiv
都将指向该div本身，无论它是什么形状..Right？：）是的，现在我明白了。我以为为每个形状创建了新的
div
s，但我没有充分阅读代码。谢谢！@NickDuto如果我的答案或Druzion的答案帮助您解决了问题，请将尊敬的答案标记为答案。