Jump to content

Reload Pandajs game


Recommended Posts

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.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.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 () {
        function exit() {
            if ($window.game) {
                var myEl = angular.element(document.querySelector('#game1'));
                $window.game = null;

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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...