Simple Counter Game - Phaser Typing CST Test

Loading…

Simple Counter Game — Phaser Code

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

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] });

Phaser Language Guide

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.

Primary Use Cases

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

Notable Features

▸Scene-based architecture
▸WebGL + Canvas dual rendering
▸Arcade, Matter.js, and Impact physics
▸Sprite animations + tilemaps
▸Asset loading + input handling

Origin & Creator

Phaser was created by Richard Davey (Photon Storm) to provide a powerful, accessible, open-source framework for modern HTML5 game creation.

Industrial Note

Phaser dominates the HTML5 gaming market, especially in educational games, advergames, casino & gambling front-ends, interactive marketing campaigns, and lightweight browser-based entertainment.

More Phaser Typing Exercises

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

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Simple Counter Game — Phaser Code

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

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] });

Phaser Language Guide

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.

Primary Use Cases

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

Notable Features

▸Scene-based architecture
▸WebGL + Canvas dual rendering
▸Arcade, Matter.js, and Impact physics
▸Sprite animations + tilemaps
▸Asset loading + input handling

Origin & Creator

Phaser was created by Richard Davey (Photon Storm) to provide a powerful, accessible, open-source framework for modern HTML5 game creation.

Industrial Note

Phaser dominates the HTML5 gaming market, especially in educational games, advergames, casino & gambling front-ends, interactive marketing campaigns, and lightweight browser-based entertainment.