如果条件满足，则为 Javascript 游戏计时器添加时间

Question

EDIT:

I thought I'd try and add some clarity. Basically what I want is similar to Pole Position: cross the finish line and earn more time. Except in this case you match two numbers.

---

I have wanted to get better at Javascript and jQuery so I thought creating a game would be a great way to go about it.

The gist of the game is that you are given a number and the goal is to match that number. I have everything working, including that when the goal is matched it adds to score. What I want now is to also add 30 seconds back to the time when the goal is matched.

I got it to add 30 seconds to the innerHTML but not the countdown. So if you were at 15 it would flash 45 then go back to 14.

I found the answer here and thought that I could change the

if (seconds == 0) {
        isRunning = true;
        seconds += 2;

to my condition and change it to seconds += 30; however nothing happens.

Here is my code. I am open to Jquery solutions as well if that is what you prefer to share.

var isWaiting = false;
var isRunning = false;
var seconds = 120;
var countdownTimer;
var finalCountdown = false;
var goalDiv = document.getElementById("goal").innerHTML;
var totalDiv = document.getElementById("total").innerHTML;

function GameTimer() {
    var minutes = Math.round((seconds - 30) / 60);
    var remainingSeconds = seconds % 120;

    document.getElementById('timerID').innerHTML = remainingSeconds;
    if (goalDiv == totalDiv) {
        isRunning = true;
        seconds += 30;

        if (seconds == 0) {
        $.mobile.changePage("index.html#youlost",{transition: "slideup"});
            clearInterval(countdownTimer); 
        } else {
            finalCountdown = true; 
        }

    } else {
        isWaiting = true;
        seconds--;
    }
}
countdownTimer = setInterval(GameTimer, 1000);

Answer 1

It looks like you never update the value of totalDiv after you've initially set it.

var goalDiv = document.getElementById("goal").innerHTML;
var totalDiv = document.getElementById("total").innerHTML;

And then, your GameTimer() function just keeps checking the old value of the totalDiv over and over. So it will never increment the seconds counter.

You might want to change your code to recheck the value of totalDiv on each tick of the timer:

function GameTimer() {
    var minutes = Math.round((seconds - 30) / 60);   // also this does not make 
    var remainingSeconds = seconds % 120;            //    much sense..

    var totalDiv = document.getElementById("total").innerHTML;

    document.getElementById('timerID').innerHTML = remainingSeconds;
    var totalDiv = document.getElementById("total").innerHTML;

    //...

Here's a JSFiddle that shows a working version (based on your sample code, with a modifications, based on what my understanding of what you're tring to do)

And another thing. This not right either..

 seconds += 30;
 if (seconds == 0) {         // this won't be 0 unless seconds was -30 before..
    $.mobile.changePage("index.html#youlost",{transition: "slideup"});
        clearInterval(countdownTimer); 
 }

Answer 2

I figured it out.
First of all I wrote my own time .

var count = 120;
    function timer() {
            count--;
    $("#timerID").html(+count);
    }

Then.... 1. I wrapped everything in a $(document).ready function.

2. I put my setInterval in a global variable.

3. My clearInterval pulls the variable and is inside my function and that checks the score for my condition.

4. Then I add 30 seconds and recall the timer.

Maybe not the best strategy but it works.