Phaser.js is a game framework written in JavaScript that lets you build video games right in the browser, without starting from scratch on every project. It bundles everything you need — rendering, sound, animation, input handling — into one lightweight library you load in an HTML page.
Why start with Phaser?
Phaser takes care of the most tedious parts of building a game: the game loop, drawing to the canvas, loading images and sounds, collisions. That lets you focus on the idea of the game instead of the technical plumbing. The result runs in any modern browser and is shared with a simple link.
Throughout this series, we’ll see how to draw shapes and images, play sounds and music, add realism with animation and bring in mouse interactivity. We’ll start from a basic project and gradually add richer logic.
We focus on the third version of the framework. Earlier versions (Phaser 2 and CE) aren’t compatible with the code shown here.
Setting up the project
You don’t need complicated tools to get started: a simple HTML file that loads Phaser from a CDN is enough. You add a script tag with the game configuration and open the file in your browser. Here’s a complete example that shows "Hello World" on screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: "#1d1d2b",
scene: { create: create }
};
const game = new Phaser.Game(config);
function create() {
this.add.text(400, 300, "Hello World", {
fontFamily: "Arial",
fontSize: "48px",
color: "#ffffff"
}).setOrigin(0.5);
}
</script>
</body>
</html>Let’s break the code down. The config object tells Phaser the render type (Phaser.AUTO picks WebGL or Canvas depending on the browser), the size of the game area and the scene to run. A scene is one screen of the game; here its create() function adds centered text at position (400, 300). The line new Phaser.Game(config) starts everything. Open the page and you get your first Phaser render: a dark canvas with "Hello World" in the middle.
From this base, you only need to enrich the create() function — load an image, show a sprite, react to the keyboard — to turn the skeleton into a real game.
Experienced JavaScript developers will notice the function keyword used instead of the newer arrow syntax: a choice that keeps the code readable and compatible with the framework’s design.
Building a video game is, above all, a form of art.
To keep up with Phaser news, subscribe to the official Phaser World newsletter, run by the original creator and maintainer of the framework.
To go further, check out our HTML5 and game development guide, our article on asset management in Phaser, and all our online courses.
0 Comments