javascript-如何重设游戏分数和按钮文字

我正在为学校项目制作一款黑痣游戏,并且已经可以使用实际的游戏了,但是一旦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();
    }
}

解决方法:

使用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()函数.

标签：p5-js,html,javascript,function
来源： https://codeday.me/bug/20191109/2011875.html