Question

我正在为一个学校项目制作一个鼹鼠游戏，我已经让实际游戏工作了，但是一旦30秒计时器用完，我就会遇到重置游戏的问题。游戏是用javascript和p5.js制作的，当你加载页面时，游戏div显示设置为隐藏，但是当你点击“开始”时，显示变为阻止并且计时器启动（游戏是在github上以供参考https://abm96testgithub.github.io/whackamole/）。 30秒后，“开始”按钮变为“重置”，游戏显示返回“无”（均使用document.getElementByID完成）。

是否有办法让玩家点击“重置”时整个页面会重新加载，或者按钮会再次显示“开始”并且分数会重置？

我知道我可以为此设置一个单独的重置按钮，但我觉得它会弄乱页面的美感，有两个按钮。页面首次加载时按钮的html为

<button id="startButton" onclick="startGame();startTimer()">Begin!</button>

并且它的javascript是

function startGame() {    
    document.getElementById('sketch-holder').style.display = "block";
}

function countdown () {
    var startCountdown = setInterval(function() {
        document.getElementById('timerVar').innerHTML = counter + "s";
        counter--;

        if (counter < 0) {
            clearInterval(startCountdown);
            document.getElementById('sketch-holder').style.display = "none";
            document.getElementById('startButton').innerHTML = "Reset";
        }
    }, 1000)
}

function startTimer() {   

    if (timerOn === false) {
        timerOn = true;
        countdown();
    }
}

Answer 1

当你使用P5.js时使用setInterval()有点奇怪。 P5.js有自己的内部计时机制，我们在last question中讨论过。

我没有使用setInterval()，而是使用millis()函数或frameCount变量来执行时序逻辑。在我对上一个问题的回答中查看我的代码：

function setup() {
  createCanvas(200,200);
    background(32);
}

function draw(){
    // 60 frames is 1 second
    if(frameCount % 60 == 0){
      ellipse(random(width), random(height), 25, 25);   
    }
}

此代码每秒绘制一次圆圈。这只是一个例子，但你可以做一些非常类似于30秒后重置你的游戏。

然后重置游戏，您真正需要做的就是将您使用的任何变量设置回默认值。尝试编写完全符合该功能的reset()函数。

Answer 2

如果我理解正确，而不是Button您可以使用a href标记void href然后点击，您可以添加href="javascript:window.location.href=window.location.href"来重新加载页面。< / p>

function startGame() {

    document.getElementById('sketch-holder').style.display = "block";
}



        function countdown () {
          var startCountdown = setInterval(function(){
            document.getElementById('timerVar').innerHTML = counter + "s";
            counter--;

            if (counter < 0) {
              clearInterval(startCountdown);
              document.getElementById('sketch-holder').style.display = "none";
              document.getElementById('startButton').innerHTML = "Reset";
              document.getElementById('startButton').setAttribute("href", 'javascript:window.location.href=window.location.href"');
        }
    }, 1000)
}
       function startTimer() {

         if (timerOn === false) {
         timerOn = true;
         countdown();
    }
}

<a href="javascript:void(0)"id="startButton" onclick="startGame();startTimer()">Begin!</a>

如何重置游戏分数和按钮文字

2 个答案: