Scene change on Collision with animation of objects using Spritesheet and movement

[ManavHarkerni]

// In this game, the user moves around the map as a Mummy and has to go towards the pumpkin
// to proceed to the next level, in this example I have showcased Animation, Scene change and 
// Collision in Phaser 3.

// creating Game Scene 1

var GameScene1 = new Phaser.Class({

    Extends: Phaser.Scene,
    initialize:

    function GameScene1 ()
    {
        Phaser.Scene.call(this, { key: 'GameScene1' });
    },

// In the preload function, we load the objects from either from the web server or the local
// directories of the user.

    preload: function ()
    {
        this.load.spritesheet('Mummy', 'mummy.png', {frameWidth: 24, frameHeight:32, endFrame: 12});
        this.load.image('Room1', 's1.png');
        this.load.image('Room2', 's2.jpg');
        this.load.image('Pumpkin', 'pumpkin.png');
    },

// in this function we are instantiating objects as well as defining the animation
// and associating it to different keyboard keys.

    create: function ()
    {
        ground = this.add.sprite(390, 300, 'Room1');
        ground.setScale(1.5);
        cursors = this.input.keyboard.createCursorKeys();

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 3, end: 5 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 9, end: 11 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'up',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'down',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 0, end: 2 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'pause',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 6 }),
            frameRate: 3,
            repeat: -1
        });
            
        Mummy = this.physics.add.sprite(200, 100, 'Mummy');
        Pumpkin = this.physics.add.sprite(710, 510, 'Pumpkin');
        Pumpkin.setScale(0.06);
        Mummy.setScale(5);

    },

// Update function is used to detect user input and based on that move the player and
// play the assigned animation of the key.

    update: function(){
        if (cursors.right.isDown)
        {
            if (Mummy.x !=790)
            {
                Mummy.anims.play('left', true);
                Mummy.x += 2;
            }
        } 
        else if (cursors.left.isDown)
        {
            if (Mummy.x !=20)
            {
                Mummy.anims.play('right', true);
                Mummy.x -= 2;
            }
        }
        else if (cursors.up.isDown)
        {
            if (Mummy.y !=30)
            {
                Mummy.anims.play('down', true);
                Mummy.y -= 2;
            }
        }
        else if (cursors.down.isDown)
        {
            if (Mummy.y !=570)
            {
                Mummy.anims.play('up', true);
                Mummy.y += 2;
            }
        }
        else
        {
            Mummy.anims.play('pause', true);
        }

// destroying the enemy on Collision 

this.physics.world.collide(Mummy, Pumpkin, function () {
      Pumpkin.destroy(); console.log('hit?');  this.scene.scene.start('GameScene2');               this.scene.scene.pause('GameScene1');
    });

    }
});

//create a scene with class
var GameScene2 = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:

    function GameScene ()
    {
        Phaser.Scene.call(this, { key: 'GameScene2' });
    },

// in this function we are instantiating objects as well as defining the animation
// and associating it to different keyboard keys.
    create: function ()
    {
        ground = this.add.sprite(390, 300, 'Room2');
        ground.setScale(0.5, 0.7);
        cursors = this.input.keyboard.createCursorKeys();

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 3, end: 5 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 9, end: 11 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'up',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'down',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 0, end: 2 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'pause',
            frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 6 }),
            frameRate: 3,
            repeat: -1
        });
            
        Mummy = this.physics.add.sprite(150, 200, 'Mummy');
        Pumpkin = this.physics.add.sprite(710, 510, 'Pumpkin');
        Pumpkin.setScale(0.04);
        Mummy.setScale(3.2);

    },
// Update function is used to detect user input and based on that move the player and 
// play the assigned animation of the key.
    update: function(){
        if (cursors.right.isDown)
        {
            if (Mummy.x !=790)
            {
                Mummy.anims.play('left', true);
                Mummy.x += 2;
            }
        } 
        else if (cursors.left.isDown)
        {
            if (Mummy.x !=20)
            {
                Mummy.anims.play('right', true);
                Mummy.x -= 2;
            }
        }
        else if (cursors.up.isDown)
        {
            if (Mummy.y !=30)
            {
                Mummy.anims.play('down', true);
                Mummy.y -= 2;
            }
        }
        else if (cursors.down.isDown)
        {
            if (Mummy.y !=570)
            {
                Mummy.anims.play('up', true);
                Mummy.y += 2;
            }
        }
        
        else
        {
            Mummy.anims.play('pause', true);
        }

// destroying the enemy on Collision 

this.physics.world.collide(Mummy, Pumpkin, function () {
      Pumpkin.destroy(); console.log('hit?');  this.scene.scene.start('GameScene1');               this.scene.scene.pause('GameScene2');
    });

    }
});

//settings required to configure the game
var config = {
    type: Phaser.AUTO,   
    width: 800,
    height:  600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: 10,
        }
    },
    
    //set background color
    backgroundColor: 0x8080,
    scale: {
        //we place it in the middle of the page.
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
// defining the number / name of the scenes
    scene:[GameScene1, GameScene2]

};

var game = new Phaser.Game(config);