Game with AngularJS/Phaser.io and destroy method

Question

I am making a game with a friend and we have some problems with AngularJS and Phaser.

So, we have a page named game, it has a template, a controller and a factory. There is a page who "redirect" us to the game page (just with a link).

In the template :

<div id="game"></div>
<a href="#/page">Back</a>

In the factory :

// function prealod and create ....
init: function(data) {
     game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create });
},
destroy: function() {
     game.destroy();
}

In the controller :

gameFact.init();
$scope.$on('$destroy', function() {
     gameFact.destroy();
});

Of course, there are more code.

The problem is simple :

If i come to the game page, Phaser load very well the game (we just display a map with sprites). After that, i click on the back button and reclick on the link to return to the game page. If i do that 7 times, there is an error in the console :

Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6).

And after few seconds, i have this error :

Uncaught TypeError: Cannot read property 'gain' of undefined

I already search on the web, and the solution are :

Use an iFrame (I really don't think that iFrame is a good solution)
Use the destory method (it doesn't work)

Do you know how to solve this problem ?

If you have any ideas, don't hesitate. Even if you use another game framework (maybe it works the same way).

Not sure if you want to keep state when switching routes, but a simple target="_self" on the anchor will force angular to re-load everything. — Christopher Marshall
Thanks for your anwser but it doesn't work. I still have this error in the console : Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6). — lludol

Brett Gregson Brett Gregson · Accepted Answer · 2014-12-19T23:01:47

I had a similar issue, it seems that destroy() doesn't work correctly (issue discussed here) with the current version:

Could you please test out the dev branch, which has lots of fixes for this in.

I resolved the issue by using the dev branch (available here)

Game with AngularJS/Phaser.io and destroy method

3 Answers