Why isnt this scene working?

Phaser 3
1

I am very new to scenes in phaser, I am wondering why this scene is not working.

this just shows a white screen, I think there might be something wrong in the config because it is a white screen and not the default black screen with phaser crashes.

2

this is my code

var config = 
{
    type: Phaser.AUTO,
    width: 600,
    height: 600,
    physics: 
    {
    default: 'arcade',
    arcade: {
        gravity: { y: 300 },
        debug: false
    }
    },
    scene: [ SwampBattle ]
};

new Phaser.Game(config);

class SwampBattle extends Phaser.scene 
{
    constructor() 
    {
        super({ key: 'SwampBattle'})
        function preload()
        {
            //preload stuff here
        }
        function create()
        {
            //create stuff here
            this.add.image(200, 200);
        }
        function update()
        {
            //update stuff here
        }
    }
}
3 
class SwampBattle extends Phaser.Scene {
	constructor() {
		super({ key: "SwampBattle" });
	}

	preload() {
		// preload stuff here
	}

	create() {
		// create stuff here
		this.add.image(200, 200);
	}

	update() {
		// update stuff here
	}
}
4

Errors Given By This Code

Uncaught ReferenceError: Cannot access ‘SwampBattle’ before initialization

Solution

Step 1: Code for “index.html”

If you are using “SwampBattle.js” as different file then use this.

<script src="SwampBattle.js"></script>

If you are using single file then write “SwampBattle” class here.

<script>
    var config = 
    {
        type: Phaser.AUTO,
        width: 600,
        height: 600,
        physics: 
        {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
        },
        scene: [ SwampBattle ]
    };

    new Phaser.Game(config);
</script>

Step 2: Code for “SwampBattle.js” Class

// Here, 'S' of "Phaser.Scene" is Capital
class SwampBattle extends Phaser.Scene {
    constructor() 
    {
        super({ key: 'SwampBattle'});
        // Write "create(), preload() and update()" Outside.
    }
    
	// dont use "function" keyword
    preload()
    {
        //preload stuff here
    }

	// dont use "function" keyword
    create()
    {
        //create stuff here
    }

	// dont use "function" keyword
    update()
    {
        //update stuff here
    }
}

Use This Documentation

Phaser 3 API Documentation