顯示計時器倒數

Question

在我的游戲中，我將計時器設置為30000ms（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個計時器，而是以1000ms為增量運行計時器。 每次命中時，從計數器中減去1，刷新頁面，如果計數器為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()我添加了一個初始值為30的變量ttime ，並添加了行$("#timer").text(--ttime); 到每秒調用一次的setInterval參數函數。

Answer 5

調查使用增量時間。 我發現這是處理需要衡量時間變化的事情的好方法。

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

如果每隔1秒甚至每100ms觸發一次事件，這也將使您有一個“剩余x秒”的計數器。 一切都取決於您想要多快。

Answer 6

您可以使用全局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);

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秒的游戲時間是不相關的或相互依賴的，如果用戶使用的是慢速計算機，則可能會導致一些同步問題。