Question

我用JavaScript制作这个游戏。

https：// jsfiddle .net / hffuhb1n /

（我将链接分开，因为它因某些原因而不能让我提交）

点击正方形会根据点击的速度为您提供一定数量的点数。当一个圆圈出现时，我希望它在点击时带走800点，如果没有在2秒内点击，我希望它再次消失，然后出现另一个方形或圆形等等。

我已经看了一遍，我无法弄清楚如何设置圆圈在2秒后消失，以便之后可以出现另一个形状。

请帮忙〜谢谢！

Answer 1

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

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

这将在time毫秒后运行该函数。所以2秒钟你会使用2000。

另请注意，您可以使用score += 100将分数提高100，而不是score = score + 100

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

的变量

在setInterval（）中，您可以使用if语句检查圈子是否已被点击，如果没有，则从变量中减去800个点。然后-得分中的变量。

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

这是一个有效的JSFiddle

我使用了以下代码：

// 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)

更新：感谢@Reddy，我现在意识到使用clearInterval()更有效率，查看新的JSFiddle以及以下代码：

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 ^

Answer 2

只需将此添加到位于底部函数function makeBox2(){内的level2Cir()即可获得所需的功能

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

然后如果点击了所有圈子，那么我们就不需要执行circleKiller了。因此，请将其清除，将此代码放在点击代码的圆圈的开头。

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

以下是 working Fiddle

如果没有在JavaScript中点击，如何让圆圈消失？

2 个答案: