Question

我正在开发一个简单的游戏：一个按钮从页面左侧开始，每次点击都会向右移动。点击20次后，它到达页面末尾，“游戏”完成。我已经让这部分工作得很好。要做到这一点，按钮会在click上激活moveRight（）函数，这会创建一个浮动到按钮左侧的“缓冲区”（只是一个带有某个区域的div元素）。

现在我想添加一个计时器。我希望在播放“游戏”时显示自第一次点击以来经过的时间（以秒为单位）。我认为每次单击按钮时只更新时间会很简单 - 我只想在moveRight（）函数中添加一些代码，当单击按钮时激活该函数。但是，我希望有时间在新的第二次通过时更新，而不是按下按钮时。我不知道如何做到这一点。

我假设涉及一个while循环，它将在游戏正在播放时持续跟踪时间，并在1000毫秒过后更新它。但是这样做会遇到麻烦，因为循环没有终止，此外，我不知道我的脚本如何同时更新时间和执行moveRight（）函数时

以下是该文件的大部分内容：

JavaScript的：

var clickCount = 0;
var startTime;
var gameTime;
var gameStart = false;
var gameOver = false;

function startTimer() {
    startTime = new Date();
}

function moveRight() {
    if (clickCount == 0) {
        startTimer();
    }
    clickCount++;
    var buffer = document.createElement("div");
    buffer.style.backgroundColor = "navy";
    buffer.style.width = "5%";
    buffer.style.height = "50px";
    buffer.className = "buffer";

    var game = document.getElementById("div2");
    var button = document.getElementById("hitThis");
    if (clickCount < 20){
        game.insertBefore(buffer, button);
    }

    else if (clickCount == 20) {
        gameOver = true;

        game.replaceChild(buffer, button);
        var congrats = document.createElement("p");
        var textNode = document.createTextNode("Congrats! You completed the game.")
        congrats.appendChild(textNode);
        congrats.style.color = "gold";
        game.appendChild(congrats);
    }
}

/*
while (!gameOver) {
    if (gameStart) {
        gameTime = new Date();
        timePassed = gameTime.getTime() - startTime.getTime();
        document.getElementById("hitThis").innerHTML = (timePassed / 1000);
    }
}
*/

HTML：

<body>
<div id="div2">
<p>Goal: Make this go across the screen by clicking it.</p>
<button id="hitThis" onclick="moveRight()">0</button>
</div>
</body>

Answer 1

听起来你想做这样的事情：

var timer = 0;

function startTimer() {
    setInterval(function () {
        timer++;
    }, 1000);
}

只需致电＆＃34; startTimer（）＆＃34;当你想启动计时器并使用计时器变量来跟踪传递的秒数时。：）

Answer 2

在你的

上

var timer;
var secondsElapsed = 0;
function startTimer() {
    timer = setInterval(function(){
       secondsElapsed++;
       $('#hitThis').html(secondsElapsed);//gives you the seconds elapsed

    },1000);

}

并修改完成其他条件。只需添加clearInterval(timer);

即可

else if (clickCount == 20) {
        clearInterval(timer);
        gameOver = true;

        game.replaceChild(buffer, button);
        var congrats = document.createElement("p");
        var textNode = document.createTextNode("Congrats! You completed the game.")
        congrats.appendChild(textNode);
        congrats.style.color = "gold";
        game.appendChild(congrats);
    }

显示按钮上的经过秒数，该按钮也激活功能

2 个答案: