# How to Make a Retro 2D JavaScript Game Part 1
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](https://github.com/JeremyMorgan/Catch-The-Apples). Here’s a [playable version](https://jeremymorgan.itch.io/catch-the-apples) 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](https://www.npmjs.com/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:
1. **Create a project folder**:
* Make a new folder on your computer, e.g., `catch-game`.
* Inside the folder, create a file named `index.html`.
2. **Add the basic HTML structure**: Paste the following code into your `index.html` file:
```html
Catch the Items
```
3. **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!"**.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734903726567/9cd5fba5-d8f1-41cb-9de3-28aeee1980ac.png align="left")
> 🎉 **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.
```javascript
let playerName = 'PhaserHero';
```
* **Functions**: Reusable blocks of code.
```javascript
function greetPlayer() {
console.log('Welcome to the game!');
}
greetPlayer();
```
* **Objects**: Collections of properties and methods.
```javascript
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:
```javascript
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.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734903749862/6cf4e363-ac07-45a7-ae06-3fee530acb59.png align="left")
### 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.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734903763187/5831ee96-5eaf-4af4-adc4-a0701a3f5b5f.png align="left")
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!