How to Make a Retro 2D JavaScript Game

Welcome, aspiring game developers! 🚀 In this beginner-friendly guide, we’ll build a simple, retro-themed "Catch the Items" game using Phaser 3, a powerful JavaScript game development framework. This series of tutorials is designed for absolute beginners, so don’t worry if you’re new to coding or Phaser—you’re in good hands.

Note: If you'd rather have a video tutorial, here it is:

The full source code is here. Here’s a playable version of the final game.

Tutorial 1: Project Setup & Basics

Let’s start by setting up the environment, introducing key JavaScript concepts, and creating our first Phaser scene.

Note: In many of our tutorials we use Node/Vite to set up our games. But I want to keep this as simple as possible. To run this you can install the NPM package serve or just open the document with Chrome.

1. What is Phaser 3?

Phaser 3 is a popular 2D game development framework for creating browser-based games using JavaScript. It’s beginner-friendly, flexible, and powerful—perfect for making retro-inspired games like this one!

2. Setting Up Your Development Environment

To keep things simple, we’ll use Phaser via its CDN link. Here’s the setup:

Create a project folder:
- Make a new folder on your computer, e.g., catch-game.
- Inside the folder, create a file named index.html.
Add the basic HTML structure: Paste the following code into your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catch the Items</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
</head>
<body>
    <script>
        // Phaser Game Configuration
        const config = {
            type: Phaser.AUTO, // Auto-detect WebGL or Canvas
            width: 800,        // Game width
            height: 600,       // Game height
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        };

        const game = new Phaser.Game(config);

        function preload() {
            // Preload assets (none yet)
        }

        function create() {
            // Add game objects here
            this.add.text(300, 250, 'Hello, Phaser!', { fontSize: '32px', fill: '#fff' });
        }

        function update() {
            // Game loop (empty for now)
        }
    </script>
</body>
</html>

Run your game:
- Open the index.html file in any browser (Chrome is recommended).
- You should see a simple canvas with the text "Hello, Phaser!".

🎉 Congratulations! You’ve set up Phaser and displayed your first scene!

3. JavaScript Basics for Phaser

Before diving deeper, let’s quickly review some JavaScript concepts:

Variables: Store data.
```
  let playerName = 'PhaserHero';
```

Functions: Reusable blocks of code.

  function greetPlayer() {
      console.log('Welcome to the game!');
  }
  greetPlayer();

Objects: Collections of properties and methods.

  let player = {
      name: 'Hero',
      score: 0,
      jump: function() {
          console.log('Player jumps!');
      }
  };
  player.jump();

You’ll use these concepts as you develop your game in Phaser.

4. Creating a Minimal Phaser Scene

Modify the create function to display a basic game canvas and some text:

function create() {
    this.add.text(300, 250, 'Catch the Items!', { fontSize: '32px', fill: '#fff' });
    this.add.rectangle(400, 300, 50, 50, 0xff0000); // Red square
}

Reload the browser—you should see a red square in the center of the screen.

What does create() mean?

Phaser uses three core functions to manage the game lifecycle: preload, create, and update.

Let's break down what each function does:

preload(): This function is called before the game starts. It's where you load your game assets like images, sounds, and more.
create(): This function is called after the assets are loaded. It's where you create your game objects, set up the game world, and define initial game settings.
update(): This function is called repeatedly throughout the game loop. It's where you update the game state, handle user input, and make things happen in your game world.

This diagram may not make sense now but it will as you get deeper into Phaser.

We'll be using these functions extensively as we build our games in this tutorial and future tutorials.

📝 Recap: You’ve set up a Phaser game, learned some JavaScript basics, and displayed simple shapes on the canvas. Great start! Now on to Part 2!

How to Make a Retro 2D JavaScript Game Part 1

Comments