Reload Pandajs game

[VonTecha]

Hi all, 

 

I'm a web developer with no experience in gaming, and I have to integrate a Panda Game in my AngularJs app (SPA). First time I load the code everything goes fine, once the game is finished I redirect the user to my own states (angularjs pages) but he can start the game again. I don't know how to load the game again, because the scripts are already loaded in the single page app and "game.createScene('Main', {..." has to be called each time to load some new data mandatory.

 

Could someone give me some light....

Thanks in advance!

[ThatGuy]

Hi there!

I'm new to this framework, so take my suggestions with a grain of salt: generally, if you want to restart the game, you have to use an addTimer that recall the scene Main.

Somewhat like that:

game.scene.addTimer(2000, function() {game.system.startScene('Main');});

Hope that was fitting!

[VonTecha]

Thanks for your answer, but this is not my problem. I guess that Canvas object is not there anymore (at least not visible but in memory), and when I start the main scene again it runs but I see nothing....

I need some way to restart/reload the game object to create the new canvas object. is it possible?

[ThatGuy]

Hmm... may I see the code in discussion?

[enpu]

So what actually happens, when the game finishes and you redirect the user? If you stay in the same page, Panda should not remove your canvas, and you should be able to just restart your scene with game.system.setScene command.

[VonTecha]

Finally I "solved" the problem removing the canvas object and reloading the game scripts dynamically when I want to play again, and Panda uses the new canvas. So I can play any times I want reloading the game and executing the logic I need before starting it (angular functions).

But.... When I type anything on a Textbox the Panda events ara executed crashing the app, so I guess I'm not stopping the game correctly. Oh God, how can I STOP the game and all panda events with loading a new page (single page app)?

Here the code:
game.createScene('End', {

    init: function() {

        var background = new game.Sprite('pastilla.png').center().addTo(this.stage);

        this.scoreContainer = new game.Container().addTo(this.stage);
        this.score = new game.EndScore( SCORE );
        this.score.sprite.addTo(this.scoreContainer);

        this.btn = new game.PandaButton({
            container: game.system.stage,
            text: "CONTINUAR",
            font: { family: 'Arial', size: 100, color: "#262626"},
            scale: false, 
            position: { x: 675, y: 550 },
            size: { width: 600, height: 200 },
            background: 0xffbd31,
            border: 0x262626,
            borderSize: 8,            
            enabled: true 
        }, function () {
            game.system.setScene('Empty');            
        });

    }

});

game.createScene('Empty', {

    init: function () {
        var background = new game.Sprite('pastilla.png').center().addTo(this.stage);
        this.addTimer(100, callBackGame1, true);
        
    }
});

AngularJS callback code called by callBackGame1 (game1 is the canvas id):

 

  $scope.callBack = function () {
            exit();          
        }
        function exit() {
            if ($window.game) {
                var myEl = angular.element(document.querySelector('#game1'));
                myEl.remove();
                $window.game = null;
            }

            $state.go('studentMenu', { subMenu: 'game1' });
        }