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

我正在为一个学校项目制作一个“打鼹鼠”游戏，我已经让实际的游戏开始工作了，但是我遇到了一个问题，在30秒计时器用完后重新设置游戏。游戏是用javascript和p5.js制作的，从现在开始，当您加载页面时，game div显示设置为隐藏，但当您单击“开始”时，显示更改为block，计时器启动（游戏在github上供参考）。当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();
    }
}

函数startName（）{
document.getElementById（'sketch-holder'）.style.display=“block”；
}
函数倒计时（）{
var startCountdown=setInterval（函数（）{
document.getElementById（'timerVar'）.innerHTML=counter+“s”；
计数器--；
如果（计数器<0）{
清除间隔（开始计数）；
document.getElementById（'sketch-holder'）.style.display=“无”；
document.getElementById（'startButton'）.innerHTML=“重置”；
}
}, 1000)
}
函数startTimer（）{
如果（timerOn==false）{
timerOn=true；
倒计时（）；
}
}

在使用P5.js时使用

setInterval（）

有点奇怪。P5.js有自己的内部计时机制，我们在您的

我不使用

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（）

函数。

如果我理解正确，你可以用

void

href使用

a

标记，然后单击可以添加

href=“javascript:window.location.href=window.location.href”

，这将重新加载页面

函数startName（）{
document.getElementById（'sketch-holder'）.style.display=“block”；
}
函数倒计时（）{
var startCountdown=setInterval（函数（）{
document.getElementById（'timerVar'）.innerHTML=counter+“s”；
计数器--；
如果（计数器<0）{
清除间隔（开始计数）；
document.getElementById（'sketch-holder'）.style.display=“无”；
document.getElementById（'startButton'）.innerHTML=“重置”；
document.getElementById（'startButton'）.setAttribute（“href”，“javascript:window.location.href=window.location.href”）；
}
}, 1000)
}
函数startTimer（）{
如果（timerOn==false）{
timerOn=true；
倒计时（）；
}
}