0

在我的游戏中，我将计时器设置为 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/

4

7 回答 7

1

看看这个jsFiddle。您只需要将您的更改timeout为 aninterval并计算秒数。

于 2012-10-23T13:33:30.037 回答
0

与其一次运行所有 30000 个计时器，不如以 1000 毫秒的增量运行计时器。每次命中，计数器减一，刷新页面，如果计数器为0，则结束游戏。

于 2012-10-23T13:19:16.300 回答
0

这是一个例子：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>​
于 2012-10-23T13:24:23.847 回答
0

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

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

于 2012-10-23T13:33:13.480 回答
0

研究使用增量时间。我发现这是处理需要及时测量变化的事情的好方法。

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

如果您每 1 秒甚至每 100 毫秒触发一次事件，这也将允许您有一个“剩余 x 秒”计数器。一切都取决于您希望它运行多快。

于 2012-10-23T13:34:00.130 回答
0

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

查看工作演示

在脚本开始时：

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);
于 2012-10-23T13:35:50.800 回答
0

您需要将计时器逻辑与“游戏结束”逻辑分开，因为计时器应该滴答作响：

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 秒游戏玩法不相关或相互依赖，如果用户使用慢速机器，这可能会导致一些同步问题。

于 2012-10-23T13:47:14.427 回答