Learn Phaser3 - 9 Code Examples & CST Typing Practice Test

Phaser 3 is a fast, open-source HTML5 game framework for creating 2D games for the web and mobile. It provides a complete ecosystem for rendering, physics, input, audio, and animation, allowing developers to build rich, interactive games in JavaScript or TypeScript.

View all 9 Phaser3 code examples →

Simple Phaser 3 Scene Phaser 3 Moving Circle Phaser 3 Keyboard Input Phaser 3 Bouncing Sprite Phaser 3 Mouse Drag Phaser 3 Animated Sprite Phaser 3 Random Stars Phaser 3 Collision Example Phaser 3 Tilemap Example

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 →

Frequently Asked Questions about Phaser3

What is Phaser3?

What are the primary use cases for Phaser3?

2D browser-based games. Interactive educational content. Gamified UI experiences. HTML5 advertising and promotional games. Rapid prototyping of interactive experiences

What are the strengths of Phaser3?

Full-featured 2D game engine. Fast and optimized for web and mobile. Extensible via plugins and custom components. Strong community support and documentation. Easy to prototype and deploy games quickly

What are the limitations of Phaser3?

Limited 3D capabilities (2D focused). Large games may require careful performance optimization. Physics engines have limitations for complex simulations. Browser performance variability. Requires understanding of game loop and scene management

How can I practice Phaser3 typing speed?

CodeSpeedTest offers 9+ real Phaser3 code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Phaser3

What is Phaser3?

What are the primary use cases for Phaser3?

2D browser-based games. Interactive educational content. Gamified UI experiences. HTML5 advertising and promotional games. Rapid prototyping of interactive experiences

What are the strengths of Phaser3?

What are the limitations of Phaser3?

How can I practice Phaser3 typing speed?

CodeSpeedTest offers 9+ real Phaser3 code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.