Learn Phaser - 10 Code Examples & CST Typing Practice Test

Phaser is a fast, open-source 2D HTML5 game framework used to create browser-based games for desktop and mobile, using JavaScript or TypeScript with WebGL/Canvas rendering.

View all 10 Phaser code examples →

Phaser Simple Counter Game Phaser Simple Click Game Phaser Keyboard Movement Example Phaser Simple Physics Example Phaser Text Typing Effect Phaser Sprite Animation Example Phaser Platformer Jump Example Phaser Timer Countdown Example Phaser Mouse Trail Example Phaser Background Parallax Example

Learn PHASER with Real Code Examples

Updated Nov 24, 2025

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

Code Sample Descriptions

Phaser Simple Counter Game

import Phaser from 'phaser';

class CounterScene extends Phaser.Scene {
    constructor() {
        super('CounterScene');
        this.count = 0;
    }

    create() {
        this.text = this.add.text(100, 100, 'Count: 0', { fontSize: '32px', color: '#fff' });

        this.add.text(100, 200, '+', { fontSize: '32px', backgroundColor: '#0f0' })
        .setInteractive()
        .on('pointerdown', () => this.updateCount(1));

        this.add.text(150, 200, '-', { fontSize: '32px', backgroundColor: '#f00' })
        .setInteractive()
        .on('pointerdown', () => this.updateCount(-1));
    }

    updateCount(delta) {
        this.count += delta;
        this.text.setText('Count: ' + this.count);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 300, scene: [CounterScene] });

A basic Phaser example that increments and decrements a counter displayed on screen with interactive buttons.

Let’s Try →

Phaser Simple Click Game

import Phaser from 'phaser';

class ClickScene extends Phaser.Scene {
    constructor() {
        super('ClickScene');
        this.score = 0;
    }

    preload() {
        this.load.image('star', 'assets/star.png');
    }

    create() {
        this.star = this.add.sprite(200, 200, 'star').setInteractive();
        this.text = this.add.text(10, 10, 'Score: 0', { fontSize: '24px' });
        this.star.on('pointerdown', () => this.addScore());
    }

    addScore() {
        this.score++;
        this.text.setText('Score: ' + this.score);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [ClickScene] });

A simple Phaser game that increases a score when you click a sprite.

Let’s Try →

Phaser Keyboard Movement Example

import Phaser from 'phaser';

class MoveScene extends Phaser.Scene {
    constructor() {
        super('MoveScene');
    }

    preload() {
        this.load.image('player', 'assets/player.png');
    }

    create() {
        this.player = this.add.sprite(200, 200, 'player');
        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        if(this.cursors.left.isDown) this.player.x -= 2;
        if(this.cursors.right.isDown) this.player.x += 2;
        if(this.cursors.up.isDown) this.player.y -= 2;
        if(this.cursors.down.isDown) this.player.y += 2;
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [MoveScene] });

A Phaser example demonstrating character movement using arrow keys.

Let’s Try →

Phaser Simple Physics Example

import Phaser from 'phaser';

class PhysicsScene extends Phaser.Scene {
    preload() {
        this.load.image('ball', 'assets/ball.png');
    }

    create() {
        this.physics.world.setBounds(0, 0, 800, 600);
        const ball = this.physics.add.image(400, 100, 'ball');
        ball.setBounce(0.8);
        ball.setCollideWorldBounds(true);
        ball.setVelocity(100, 200);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: [PhysicsScene] });

Demonstrates Phaser Arcade Physics with gravity and bouncing objects.

Let’s Try →

Phaser Text Typing Effect

import Phaser from 'phaser';

class TypeScene extends Phaser.Scene {
    create() {
        const message = 'Welcome to Phaser!';
        this.display = this.add.text(100, 100, '', { fontSize: '32px' });
        let i = 0;
        this.time.addEvent({
        delay: 100,
        callback: () => {
        if(i < message.length) {
        this.display.text += message[i++];
        }
        },
        repeat: message.length - 1
        });
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 500, height: 200, scene: [TypeScene] });

A Phaser scene that shows a typing animation effect using timed events.

Let’s Try →

Phaser Sprite Animation Example

import Phaser from 'phaser';

class AnimationScene extends Phaser.Scene {
    preload() {
        this.load.spritesheet('walk', 'assets/walk.png', { frameWidth: 32, frameHeight: 48 });
    }

    create() {
        this.anims.create({ key: 'run', frames: this.anims.generateFrameNumbers('walk', { start: 0, end: 3 }), frameRate: 6, repeat: -1 });
        this.sprite = this.add.sprite(100, 200, 'walk').play('run');
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [AnimationScene] });

Example of playing sprite animations using a loaded spritesheet in Phaser.

Let’s Try →

Phaser Platformer Jump Example

import Phaser from 'phaser';

class PlatformScene extends Phaser.Scene {
    preload() {
        this.load.image('player', 'assets/player.png');
        this.load.image('ground', 'assets/platform.png');
    }

    create() {
        this.physics.add.staticImage(400, 580, 'ground').setScale(2).refreshBody();
        this.player = this.physics.add.sprite(400, 450, 'player');
        this.player.setBounce(0.2);
        this.physics.add.collider(this.player, this.physics.world.staticBodies);
        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        if(this.cursors.up.isDown && this.player.body.touching.down) {
        this.player.setVelocityY(-330);
        }
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, scene: [PlatformScene] });

Simple Phaser platformer setup where a player can jump using physics.

Let’s Try →

Phaser Timer Countdown Example

import Phaser from 'phaser';

class TimerScene extends Phaser.Scene {
    create() {
        this.timeLeft = 10;
        this.text = this.add.text(100, 100, 'Time: 10', { fontSize: '32px' });
        this.timer = this.time.addEvent({ delay: 1000, callback: this.tick, callbackScope: this, loop: true });
    }
    tick() {
        this.timeLeft--;
        this.text.setText('Time: ' + this.timeLeft);
        if(this.timeLeft <= 0) {
        this.text.setText('Game Over');
        this.timer.remove();
        }
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 200, scene: [TimerScene] });

Phaser timer countdown that updates text every second.

Let’s Try →

Phaser Mouse Trail Example

import Phaser from 'phaser';

class TrailScene extends Phaser.Scene {
    preload() {
        this.load.image('dot', 'assets/dot.png');
    }

    create() {
        this.input.on('pointermove', pointer => {
        this.add.image(pointer.x, pointer.y, 'dot').setScale(0.2);
        });
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: [TrailScene] });

Creates a particle trail effect following the mouse pointer.

Let’s Try →

Phaser Background Parallax Example

import Phaser from 'phaser';

class ParallaxScene extends Phaser.Scene {
    preload() {
        this.load.image('bg1', 'assets/bg1.png');
        this.load.image('bg2', 'assets/bg2.png');
    }

    create() {
        this.bg1 = this.add.tileSprite(400, 300, 800, 600, 'bg1');
        this.bg2 = this.add.tileSprite(400, 300, 800, 600, 'bg2');
    }

    update() {
        this.bg1.tilePositionX += 0.5;
        this.bg2.tilePositionX += 1;
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: [ParallaxScene] });

Phaser example showing multiple background layers for a parallax scrolling effect.

Let’s Try →

Frequently Asked Questions about Phaser

What is Phaser?

Phaser is a fast, open-source 2D HTML5 game framework used to create browser-based games for desktop and mobile, using JavaScript or TypeScript with WebGL/Canvas rendering.

What are the primary use cases for Phaser?

Browser-based 2D games. Educational games and e-learning apps. HTML5 mobile games. Prototypes and game jams. Advergames and marketing interactives

What are the strengths of Phaser?

Extremely fast WebGL rendering. Perfect for browser and mobile web games. Large community + tons of examples. Simple JavaScript/TypeScript workflow. Zero installer: just code and run

What are the limitations of Phaser?

Not built for 3D. No built-in editor (third-party only). Large projects require custom architecture. Physics engines limited compared to Unity. Not suitable for console/native 3D games

How can I practice Phaser typing speed?

CodeSpeedTest offers 10+ real Phaser 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

Phaser Simple Counter Game

import Phaser from 'phaser';

class CounterScene extends Phaser.Scene {
    constructor() {
        super('CounterScene');
        this.count = 0;
    }

    create() {
        this.text = this.add.text(100, 100, 'Count: 0', { fontSize: '32px', color: '#fff' });

        this.add.text(100, 200, '+', { fontSize: '32px', backgroundColor: '#0f0' })
        .setInteractive()
        .on('pointerdown', () => this.updateCount(1));

        this.add.text(150, 200, '-', { fontSize: '32px', backgroundColor: '#f00' })
        .setInteractive()
        .on('pointerdown', () => this.updateCount(-1));
    }

    updateCount(delta) {
        this.count += delta;
        this.text.setText('Count: ' + this.count);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 300, scene: [CounterScene] });

A basic Phaser example that increments and decrements a counter displayed on screen with interactive buttons.

Let’s Try →

Phaser Simple Click Game

import Phaser from 'phaser';

class ClickScene extends Phaser.Scene {
    constructor() {
        super('ClickScene');
        this.score = 0;
    }

    preload() {
        this.load.image('star', 'assets/star.png');
    }

    create() {
        this.star = this.add.sprite(200, 200, 'star').setInteractive();
        this.text = this.add.text(10, 10, 'Score: 0', { fontSize: '24px' });
        this.star.on('pointerdown', () => this.addScore());
    }

    addScore() {
        this.score++;
        this.text.setText('Score: ' + this.score);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [ClickScene] });

A simple Phaser game that increases a score when you click a sprite.

Let’s Try →

Phaser Keyboard Movement Example

import Phaser from 'phaser';

class MoveScene extends Phaser.Scene {
    constructor() {
        super('MoveScene');
    }

    preload() {
        this.load.image('player', 'assets/player.png');
    }

    create() {
        this.player = this.add.sprite(200, 200, 'player');
        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        if(this.cursors.left.isDown) this.player.x -= 2;
        if(this.cursors.right.isDown) this.player.x += 2;
        if(this.cursors.up.isDown) this.player.y -= 2;
        if(this.cursors.down.isDown) this.player.y += 2;
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [MoveScene] });

A Phaser example demonstrating character movement using arrow keys.

Let’s Try →

Phaser Simple Physics Example

import Phaser from 'phaser';

class PhysicsScene extends Phaser.Scene {
    preload() {
        this.load.image('ball', 'assets/ball.png');
    }

    create() {
        this.physics.world.setBounds(0, 0, 800, 600);
        const ball = this.physics.add.image(400, 100, 'ball');
        ball.setBounce(0.8);
        ball.setCollideWorldBounds(true);
        ball.setVelocity(100, 200);
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: [PhysicsScene] });

Demonstrates Phaser Arcade Physics with gravity and bouncing objects.

Let’s Try →

Phaser Text Typing Effect

import Phaser from 'phaser';

class TypeScene extends Phaser.Scene {
    create() {
        const message = 'Welcome to Phaser!';
        this.display = this.add.text(100, 100, '', { fontSize: '32px' });
        let i = 0;
        this.time.addEvent({
        delay: 100,
        callback: () => {
        if(i < message.length) {
        this.display.text += message[i++];
        }
        },
        repeat: message.length - 1
        });
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 500, height: 200, scene: [TypeScene] });

A Phaser scene that shows a typing animation effect using timed events.

Let’s Try →

Phaser Sprite Animation Example

import Phaser from 'phaser';

class AnimationScene extends Phaser.Scene {
    preload() {
        this.load.spritesheet('walk', 'assets/walk.png', { frameWidth: 32, frameHeight: 48 });
    }

    create() {
        this.anims.create({ key: 'run', frames: this.anims.generateFrameNumbers('walk', { start: 0, end: 3 }), frameRate: 6, repeat: -1 });
        this.sprite = this.add.sprite(100, 200, 'walk').play('run');
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 400, scene: [AnimationScene] });

Example of playing sprite animations using a loaded spritesheet in Phaser.

Let’s Try →

Phaser Platformer Jump Example

import Phaser from 'phaser';

class PlatformScene extends Phaser.Scene {
    preload() {
        this.load.image('player', 'assets/player.png');
        this.load.image('ground', 'assets/platform.png');
    }

    create() {
        this.physics.add.staticImage(400, 580, 'ground').setScale(2).refreshBody();
        this.player = this.physics.add.sprite(400, 450, 'player');
        this.player.setBounce(0.2);
        this.physics.add.collider(this.player, this.physics.world.staticBodies);
        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        if(this.cursors.up.isDown && this.player.body.touching.down) {
        this.player.setVelocityY(-330);
        }
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, scene: [PlatformScene] });

Simple Phaser platformer setup where a player can jump using physics.

Let’s Try →

Phaser Timer Countdown Example

import Phaser from 'phaser';

class TimerScene extends Phaser.Scene {
    create() {
        this.timeLeft = 10;
        this.text = this.add.text(100, 100, 'Time: 10', { fontSize: '32px' });
        this.timer = this.time.addEvent({ delay: 1000, callback: this.tick, callbackScope: this, loop: true });
    }
    tick() {
        this.timeLeft--;
        this.text.setText('Time: ' + this.timeLeft);
        if(this.timeLeft <= 0) {
        this.text.setText('Game Over');
        this.timer.remove();
        }
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 200, scene: [TimerScene] });

Phaser timer countdown that updates text every second.

Let’s Try →

Phaser Mouse Trail Example

import Phaser from 'phaser';

class TrailScene extends Phaser.Scene {
    preload() {
        this.load.image('dot', 'assets/dot.png');
    }

    create() {
        this.input.on('pointermove', pointer => {
        this.add.image(pointer.x, pointer.y, 'dot').setScale(0.2);
        });
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: [TrailScene] });

Creates a particle trail effect following the mouse pointer.

Let’s Try →

Phaser Background Parallax Example

import Phaser from 'phaser';

class ParallaxScene extends Phaser.Scene {
    preload() {
        this.load.image('bg1', 'assets/bg1.png');
        this.load.image('bg2', 'assets/bg2.png');
    }

    create() {
        this.bg1 = this.add.tileSprite(400, 300, 800, 600, 'bg1');
        this.bg2 = this.add.tileSprite(400, 300, 800, 600, 'bg2');
    }

    update() {
        this.bg1.tilePositionX += 0.5;
        this.bg2.tilePositionX += 1;
    }
}

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: [ParallaxScene] });

Phaser example showing multiple background layers for a parallax scrolling effect.

Let’s Try →

Frequently Asked Questions about Phaser

What is Phaser?

Phaser is a fast, open-source 2D HTML5 game framework used to create browser-based games for desktop and mobile, using JavaScript or TypeScript with WebGL/Canvas rendering.

What are the primary use cases for Phaser?

Browser-based 2D games. Educational games and e-learning apps. HTML5 mobile games. Prototypes and game jams. Advergames and marketing interactives

What are the strengths of Phaser?

Extremely fast WebGL rendering. Perfect for browser and mobile web games. Large community + tons of examples. Simple JavaScript/TypeScript workflow. Zero installer: just code and run

What are the limitations of Phaser?

Not built for 3D. No built-in editor (third-party only). Large projects require custom architecture. Physics engines limited compared to Unity. Not suitable for console/native 3D games

How can I practice Phaser typing speed?

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