escape from setInterval at end of game level

Question

I'm writing a game using HTML5 canvas and Javascript. I'm using setInterval to animate the game and check for events at regular intervals. I've written multiple levels for the game, but I can't seem to escape the setInterval when a given level ends in order to start the next one. The code accurately detects when a level is won or lost and successfully clears the interval and renders the button, but the button does not fire.

Adding a button was my latest idea. I've also tried removing the canvas using jQuery and inserting a new one. I've also tried using clearRect on the canvas but it doesn't fire either.

Given that I can't return a value from setInterval, what are my options, if any? Is there another way to accomplish the same thing? Is there a separate error with my code that I've overlooked? Thanks!

Game.prototype.win = function(int) {
    clearInterval(int);
    var content = "<p style='color:white;'>You win</p><br><button id='next-level'>Next Level</button></menu>"
    $('#controls').append(content)
};

Game.prototype.lose = function(int) {
    clearInterval(int);
    var content = "<p style='color:white;'>You Lose</p><br><button id='next-level'>Start Over?</button></menu>"
    $('#controls').append(content)
};

Game.prototype.run = funtion () {    
    $('#start').click( function () {
      $('#controls').empty();
      var waveOne = new window.CrystalQuest.Wave(this.X_DIM, this.Y_DIM, this, Game.WAVE_ONE)
      var game = this

      var int = setInterval( function () {
        if (waveOne.step() === "lost" ) {
          game.lose(int);
        } else if (waveOne.step() === "won") {
          game.win(int);
        }
        waveOne.draw(this.ctx)
      }, 20)
      this.bindKeyHandlers(waveOne);
   }.bind(this));

   $('#next-level').click( function () {
      $('#controls').empty();
      ...more code...
   });
};

Answer 1

To stop a setInterval() you have to store the returned value from the original call to setInterval() in some persistent location and then call clearInterval() on that value.

Because you declared your interval with var as in var int, it was local only to that method and was not available anywhere else in the code.

There are a number of ways to do that in your code. I would probably suggest storing it as an instance variable like this:

Game.prototype.run = funtion () {    
    $('#start').click( function () {
      $('#controls').empty();
      var waveOne = new window.CrystalQuest.Wave(this.X_DIM, this.Y_DIM, this, Game.WAVE_ONE)
      var game = this;

      this.stop();
      this.interval = setInterval( function () {
        if (waveOne.step() === "lost" ) {
          game.lose(int);
        } else if (waveOne.step() === "won") {
          game.win(int);
        }
        waveOne.draw(this.ctx)
      }, 20)
      this.bindKeyHandlers(waveOne);
   }.bind(this));

   $('#next-level').click( function () {
      $('#controls').empty();
      ...more code...
   });
};

Then, you can make a method that will stop the interval like this:

Game.prototype.stop = function() {
      if (this.interval) {
          clearInterval(this.interval);
          this.interval = null;
      }
}

And, change your other methods like this:

Game.prototype.win = function(int) {
    this.stop();
    var content = "<p style='color:white;'>You win</p><br><button id='next-level'>Next Level</button></menu>"
    $('#controls').append(content)
};

Game.prototype.lose = function(int) {
    this.stop();
    var content = "<p style='color:white;'>You Lose</p><br><button id='next-level'>Start Over?</button></menu>"
    $('#controls').append(content)
};

---

For your event handling issues, if you are destroying and recreating a button, then you will lose any event handlers that were attached to any DOM elements that got replaced.

You have two choices for how to fix it:

1. After you create the new DOM elements, you can again set the event handlers on the new DOM elements.
2. You can use "delegated event handling". This attaches the event handlers to a parent DOM object that is itself not replaced. The click event bubbles up to the parent and is handled there. The child can be replaced as many times as you want and the event handler will still work.

See these references for how to use delegated event handling with jQuery:

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

JQuery Event Handlers - What's the "Best" method