显示计时器倒数

Question

In my game I have set the timer to 30000ms (30 secs). When the timer ends the game ends. I want to show the user the timer to give them some idea of how long they have left. How would I do this, I have tried to do it like this:

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"
    }

I think I am approaching this all wrong can someone give me a point in the right direction?

Fiddle: http://jsfiddle.net/cFKHq/8/

Answer 1

Have a gander at this jsFiddle . You just need to change your timeout to an interval and keep a count of the seconds.

Answer 2

Instead of running the timer by all 30000 at once, run the timer in 1000ms increments. Each time it hits, subtract one from the counter, refresh the page, and if the counter is 0, end the game.

Answer 3

Here is an example: 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

I changed the jsfiddle you posted to show a counter after pushing play button. See http://jsfiddle.net/cFKHq/10/

Inside your function startplay() I added a variable ttime with an initial value of 30 and I added the line $("#timer").text(--ttime); to the setInterval argument function that is called every second.

Answer 5

Look into using delta times. I have found this to be a great way to handle things that need to measure changes in time.

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

This will also allow you to have a "x seconds remaining" counter if you fire off an event every 1 second, or even every 100ms. All depends on how fast you want it to go.

Answer 6

You can use a global window.duration variable were you set the seconds the game will last, then decrement from that in the "one second" interval:

See working demo

At start of script:

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

then on the "one second interval" we decrement the timer and print the timer text:

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

Also display a "finished" text when the game ends, the relevant part follows:

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

You need to seperate your timer logic from your "game over" logic, as the timer should tick regardless:

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

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

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

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

Note that in this solution the 30 * 1 second timer countdown and 30 seconds of gameplay are not related or reliant on one another, which may cause some synchronicity issues if the user is on a slow machine.