Question

在我的游戏中，我将计时器设置为30000毫秒（30秒）。当计时器结束时，游戏结束。我想向用户显示计时器，让他们知道他们已经离开了多长时间。我该怎么做，我试着这样做：

setTimeout(function() {
                    $("#message").html('Thank you for playing. </br> You answered </br>' + hit + '/' + attempted + ' correctly. </br> Press "Play" to start again.').fadeIn('slow');
                    $(".character").fadeIn('slow');
                }, 500);
            });
        }, 30000).show('#timer'); //here I am trying to display the time in the "#timer"
    }

我认为我接近这一切都是错误的，有人可以给我一个指向正确的方向吗？

小提琴：http://jsfiddle.net/cFKHq/8/

Answer 1

对此jsFiddle有所了解。您只需将timeout更改为interval并保留秒数。

Answer 2

不是一次全部运行30000计时器，而是以1000毫秒为增量运行计时器。每次击中时，从计数器中减去一个，刷新页面，如果计数器为0，则结束游戏。

Answer 3

以下是一个示例：http://jsfiddle.net/RPSMJ/4/

<强>的JavaScript

var counter = 30,
    timerOutput = document.getElementById('timerOutput');
(function timer() {
    timerOutput.innerHTML = counter;
    counter -= 1;
    if (counter >= 0) {
        setTimeout(function () {
            timer();
        }, 1000);
    }
}());

<强> HTML

<div id='timerOutput'></div>

Answer 4

在按下播放按钮后，我更改了您发布的jsfiddle以显示计数器。见http://jsfiddle.net/cFKHq/10/

在函数startplay()中，我添加了一个变量ttime，其初始值为30，我将行$("#timer").text(--ttime);添加到每秒调用的setInterval参数函数中

Answer 5

考虑使用delta时间。我发现这是处理需要及时衡量变化的事情的好方法。

prevTime = curTime;
curTime += new Date();
deltaTime = curTime - prevTime;

如果您每1秒或甚至每100毫秒触发一次事件，这也将允许您有一个“x秒剩余”计数器。一切都取决于你想要的速度。

Answer 6

你可以使用全局window.duration变量设置游戏将持续的秒数，然后在“一秒”间隔内减少：

见工作demo

在剧本开始时：

var hit = 0;
var attempted = 0;
var target = $("#target");
window.cont = true;
window.duration = 30; //set your desired game duration in seconds

然后在“一秒间隔”，我们减少计时器并打印计时器文本：

     play = setInterval(function() {
        if (window.cont) {
            window.cont = false;
            scramble();
        }
        window.duration--;
        $('#timer').html(window.duration + ' seconds to go');
    }, 1000);

游戏结束时还会显示“已完成”文字，相关部分如下：

setTimeout(function() {
                    $("#message").html('Thank you for playing. </br> You answered </br>' + hit + '/' + attempted + ' correctly. </br> Press "Play" to start again.').fadeIn('slow');
                    $(".character").fadeIn('slow');
                    $('#timer').html('Finished');
                }, 500);

Answer 7

你需要从你的“游戏结束”逻辑中分离你的计时器逻辑，因为计时器应该打勾而不管：

var secondsLeft = 30;
var timerElement = $('#timer');

(function timer() {
    timerElement.text(secondsLeft);
    secondsLeft--;

    if (secondsLeft !== 0) {
        setTimeout(function () {
            timer();
        }, 1000);
    }
}());

http://jsfiddle.net/cFKHq/14/

请注意，在此解决方案中，30 * 1秒计时器倒计时和30秒游戏玩法彼此无关或相互依赖，如果用户在慢机上，可能会导致某些同步问题。

显示计时器倒计时

7 个答案: