Learn PHASER with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.