Learn PHASER3 with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Phaser 3 Scene

# phaser3/demo/index.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
        preload: preload,
        create: create,
        update: update
        }
        };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player');
        }
        function update() {
        player.x += 1;
        }
    </script>
    </body>
</html>

A basic Phaser 3 program that creates a game with a moving sprite.

Let’s Try →

Phaser 3 Moving Circle

# phaser3/demo/moving_circle.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let circle;
        function preload() {}
        function create() {
        circle = this.add.circle(100, 300, 50, 0xff0000);
        }
        function update() {
        circle.x += 2;
        }
    </script>
    </body>
</html>

Draws and moves a circle across the screen.

Let’s Try →

Phaser 3 Keyboard Input

# phaser3/demo/keyboard_input.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let player, cursors;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player');
        cursors = this.input.keyboard.createCursorKeys();
        }
        function update() {
        if (cursors.left.isDown) player.x -= 2;
        if (cursors.right.isDown) player.x += 2;
        if (cursors.up.isDown) player.y -= 2;
        if (cursors.down.isDown) player.y += 2;
        }
    </script>
    </body>
</html>

Moves a sprite with arrow keys.

Let’s Try →

Phaser 3 Bouncing Sprite

# phaser3/demo/bouncing_sprite.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.physics.add.sprite(400, 300, 'player');
        player.setBounce(1);
        player.setCollideWorldBounds(true);
        player.setVelocity(200, 150);
        }
    </script>
    </body>
</html>

Makes a sprite bounce around the screen edges.

Let’s Try →

Phaser 3 Mouse Drag

# phaser3/demo/mouse_drag.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player').setInteractive();
        this.input.setDraggable(player);
        this.input.on('drag', (pointer, gameObject, dragX, dragY) => { gameObject.x = dragX; gameObject.y = dragY; });
        }
    </script>
    </body>
</html>

Drags a sprite with the mouse.

Let’s Try →

Phaser 3 Animated Sprite

# phaser3/demo/animated_sprite.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.spritesheet('dude', 'https://examples.phaser.io/assets/sprites/dude.png', { frameWidth: 32, frameHeight: 48 });
        }
        function create() {
        player = this.add.sprite(400, 300, 'dude');
        this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });
        player.play('walk');
        }
    </script>
    </body>
</html>

Plays an animated sprite sheet.

Let’s Try →

Phaser 3 Random Stars

# phaser3/demo/random_stars.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { create, update } };
        const game = new Phaser.Game(config);

        let stars = [];
        function create() {}
        function update() {
        const x = Phaser.Math.Between(0, 800);
        const y = Phaser.Math.Between(0, 600);
        stars.push(this.add.circle(x, y, 5, 0xffff00));
        }
    </script>
    </body>
</html>

Creates stars at random positions every frame.

Let’s Try →

Phaser 3 Collision Example

# phaser3/demo/collision.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let player, enemy;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        this.load.image('enemy', 'https://examples.phaser.io/assets/sprites/asteroid.png');
        }
        function create() {
        player = this.physics.add.sprite(400, 500, 'player');
        enemy = this.physics.add.sprite(400, 100, 'enemy');
        this.physics.add.collider(player, enemy, () => { console.log('Collision!'); });
        }
        function update() {
        enemy.y += 1;
        }
    </script>
    </body>
</html>

Detects collision between two sprites.

Let’s Try →

Phaser 3 Tilemap Example

# phaser3/demo/tilemap.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        function preload() {
        this.load.image('tiles', 'https://examples.phaser.io/assets/tilemaps/tiles/dungeon.png');
        this.load.tilemapTiledJSON('map', 'https://examples.phaser.io/assets/tilemaps/maps/dungeon.json');
        }
        function create() {
        const map = this.make.tilemap({ key: 'map' });
        const tileset = map.addTilesetImage('dungeon', 'tiles');
        map.createLayer('Ground', tileset);
        }
    </script>
    </body>
</html>

Creates a simple tilemap scene.

Let’s Try →

Code Sample Descriptions

Simple Phaser 3 Scene

# phaser3/demo/index.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
        preload: preload,
        create: create,
        update: update
        }
        };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player');
        }
        function update() {
        player.x += 1;
        }
    </script>
    </body>
</html>

A basic Phaser 3 program that creates a game with a moving sprite.

Let’s Try →

Phaser 3 Moving Circle

# phaser3/demo/moving_circle.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let circle;
        function preload() {}
        function create() {
        circle = this.add.circle(100, 300, 50, 0xff0000);
        }
        function update() {
        circle.x += 2;
        }
    </script>
    </body>
</html>

Draws and moves a circle across the screen.

Let’s Try →

Phaser 3 Keyboard Input

# phaser3/demo/keyboard_input.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let player, cursors;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player');
        cursors = this.input.keyboard.createCursorKeys();
        }
        function update() {
        if (cursors.left.isDown) player.x -= 2;
        if (cursors.right.isDown) player.x += 2;
        if (cursors.up.isDown) player.y -= 2;
        if (cursors.down.isDown) player.y += 2;
        }
    </script>
    </body>
</html>

Moves a sprite with arrow keys.

Let’s Try →

Phaser 3 Bouncing Sprite

# phaser3/demo/bouncing_sprite.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.physics.add.sprite(400, 300, 'player');
        player.setBounce(1);
        player.setCollideWorldBounds(true);
        player.setVelocity(200, 150);
        }
    </script>
    </body>
</html>

Makes a sprite bounce around the screen edges.

Let’s Try →

Phaser 3 Mouse Drag

# phaser3/demo/mouse_drag.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        }
        function create() {
        player = this.add.sprite(400, 300, 'player').setInteractive();
        this.input.setDraggable(player);
        this.input.on('drag', (pointer, gameObject, dragX, dragY) => { gameObject.x = dragX; gameObject.y = dragY; });
        }
    </script>
    </body>
</html>

Drags a sprite with the mouse.

Let’s Try →

Phaser 3 Animated Sprite

# phaser3/demo/animated_sprite.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        let player;
        function preload() {
        this.load.spritesheet('dude', 'https://examples.phaser.io/assets/sprites/dude.png', { frameWidth: 32, frameHeight: 48 });
        }
        function create() {
        player = this.add.sprite(400, 300, 'dude');
        this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });
        player.play('walk');
        }
    </script>
    </body>
</html>

Plays an animated sprite sheet.

Let’s Try →

Phaser 3 Random Stars

# phaser3/demo/random_stars.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { create, update } };
        const game = new Phaser.Game(config);

        let stars = [];
        function create() {}
        function update() {
        const x = Phaser.Math.Between(0, 800);
        const y = Phaser.Math.Between(0, 600);
        stars.push(this.add.circle(x, y, 5, 0xffff00));
        }
    </script>
    </body>
</html>

Creates stars at random positions every frame.

Let’s Try →

Phaser 3 Collision Example

# phaser3/demo/collision.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload, create, update } };
        const game = new Phaser.Game(config);

        let player, enemy;
        function preload() {
        this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
        this.load.image('enemy', 'https://examples.phaser.io/assets/sprites/asteroid.png');
        }
        function create() {
        player = this.physics.add.sprite(400, 500, 'player');
        enemy = this.physics.add.sprite(400, 100, 'enemy');
        this.physics.add.collider(player, enemy, () => { console.log('Collision!'); });
        }
        function update() {
        enemy.y += 1;
        }
    </script>
    </body>
</html>

Detects collision between two sprites.

Let’s Try →

Phaser 3 Tilemap Example

# phaser3/demo/tilemap.html
<html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    </head>
    <body>
    <script>
        const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload, create } };
        const game = new Phaser.Game(config);

        function preload() {
        this.load.image('tiles', 'https://examples.phaser.io/assets/tilemaps/tiles/dungeon.png');
        this.load.tilemapTiledJSON('map', 'https://examples.phaser.io/assets/tilemaps/maps/dungeon.json');
        }
        function create() {
        const map = this.make.tilemap({ key: 'map' });
        const tileset = map.addTilesetImage('dungeon', 'tiles');
        map.createLayer('Ground', tileset);
        }
    </script>
    </body>
</html>

Creates a simple tilemap scene.

Let’s Try →