CODEWITHSUNDEEP
javascriptjquerytimer
Luke
Luke

Reputation: 990

Timer doesn't stop and perform check

functinality:

Timer will start counting from 0s to time limit of 3 minute. Users have to pressed on button to stop timer, else timer will continue to count till it reaches the time limit.

When time limit of 3 minute has been reached, an alert will be displayed: "Game Over".

Issue:

Timer is able to start counting from 0s, however, when time limit is at 3 minutes, it doesn't stop to show the alert.It will continue counting.

Need to ask why does it not stop the counter and prompt the alert after timer has reached time limit of 3 minutes?

Code:

var GameTimer = 0;

var SetGameTimer;

var minutes = "";
var seconds = "";

function StartGame() {

  $("#Game_Elements").fadeIn({
    queue: false,
    complete: function() {

      RugbyGameTimer();

    }
  });
}
//Start Game Timer Count
function RugbyGameTimer() {


  //Start Game Timer
  SetGameTimer = setInterval(function() {

    GameTimer++;

    //get inidvidual value elements of the timer
    minutes = ('0' + Math.floor(GameTimer / 60)).slice(-2);
    seconds = ('0' + (GameTimer - minutes * 60)).slice(-2);

    //append timer to timer game elements
    $("#Game_Minute_timer").html(minutes);
    $("#Game_Second_timer").html(seconds);
  }, 1000);

  //Check Time value
  if (minutes < 3) {

    //Method call to check if button is pressed
    Interrupt_Game();

  } else if (minutes > 3) {
    //Check on time, if more than 10mins, automatically navigate to last game page

    //Stop Counter
    clearInterval(SetGameTimer);

    alert("Game Over");
  }
}


function InterruptGame() {

  //Method to do something
}
<!-- Game Timer Element -->
<div id="Game_Elements" style="display:none; position:absolute; z-index:7; top:0px; left:0px; width: 1920px; heigth: 1080px; margin:auto;">
  <table id="Game_Timer_Element">
    <tr>
      <td>
        <div id="Game_Minute_timer" style="z-index:50; position:absolute; top:440px; left:850px; font-size:160px; font-family:'Avenir'; width:1080; color:#fff;">
          <font face="Avenir"></font>
        </div>
      </td>

      <td>
        <div id="Game_Second_timer" style="z-index:50; position:absolute; top:440px; left:1195px; font-size:160px; font-family:'Avenir'; width:1080; color:#fff;">
          <font face="Avenir"></font>
        </div>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 157

Answers (2)

Radek Pech
Radek Pech

Reputation: 3098

Check for the 3 minutes must be insite the timer method to check with every tick.

//Start Game Timer
    SetGameTimer = setInterval(function() {

        GameTimer++;

        //get inidvidual value elements of the timer
        minutes = ('0' + Math.floor(GameTimer / 60)).slice(-2);
        seconds = ('0' + (GameTimer - minutes * 60)).slice(-2);

        //append timer to timer game elements
        $("#Game_Minute_timer").html(minutes);
        $("#Game_Second_timer").html(seconds);

        //Check Time value
        if (minutes < 3) {

            //Method call to check if button is pressed
            Interrupt_Game();

        } else if (minutes >= 3) {
            //Check on time, if more than 10mins, automatically navigate to last game page

            //Stop Counter
            clearInterval(SetGameTimer);

            alert("Game Over");
        }
    }, 1000);
}

Otherwise it will check only once when the game start.

Upvotes: 2

Bulent Vural
Bulent Vural

Reputation: 2688

You are comparing a string with integer which probably the reason its failing. Try to test the seconds (counter) : 

...
} else if (GameTimer > (3*60)) {
...

Upvotes: 0

Related Questions