# How to Make a Retro 2D JavaScript Game Part 3

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

<iframe class="youtubevid" src="https://www.youtube.com/embed/rCgDvYNoaoc"></iframe>

Let’s make the game more fun with scoring and difficulty progression.

### **1\. Adding a Score**

Modify the `create` function to display a score:

```javascript
this.score = 0;
this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff' });
```

Now you'll see a score in the upper left hand corner of the screen:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734904806967/3be1a2f8-cb83-4474-b676-ce50fa28df03.png align="left")

Let’s update the score when the player catches an item. In the update function where we created collision detection, add the following to update the score:

```javascript
this.score += 10;
this.scoreText.setText('Score: ' + this.score);
```

So change this:

```javascript
if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), this.item.getBounds())) {
        console.log('Caught an item!');
        this.item.y = 50;
        this.item.x = Phaser.Math.Between(50, 750);
}
```

to this:

```javascript
if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), this.item.getBounds())) {
        console.log('Caught an item!');
        this.item.y = 50;
        this.item.x = Phaser.Math.Between(50, 750);
        this.score += 10;
        this.scoreText.setText('Score: ' + this.score);
}
```

And now every time you catch a block, the score updates:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734904845293/1131fadf-2780-4a74-a976-4d818e9746c0.png align="left")

### **2\. Increasing Difficulty**

Let's make this more difficult and make the items fall faster as the score increases:

In our create function, add this:

```javascript
this.itemSpeed = 3;
```

in our update() function, delete this:

```javascript
    // Move falling item
    this.item.y += 3;
```

And replace it with this:

```javascript
  this.item.y += this.itemSpeed;

    if (this.score > 0 && this.score % 500 === 0) {
        this.itemSpeed += 0.5;
        console.log('Going faster! Speed is now: ' + this.itemSpeed);
    }
```

Now, every time you get 500 points, your speed increases, and it gets more difficult!

### **3\. Retro Feel Enhancements**

So let's add some graphics to this to make it more exciting.

I just drew up these images, don't judge me.

*You can* [*download the pail.png from here*](https://github.com/JeremyMorgan/Catch-The-Apples)

in preload, add the following:

```javascript
// Load the player sprite
this.load.image('player', 'pail.png');
```

Then remove this:

```javascript
// Player (Blue rectangle)
this.player = this.add.rectangle(400, 550, 50, 50, 0x0000ff);
```

And replace it with this:

```javascript
   // Replace rectangle with sprite
    this.player = this.add.sprite(400, 550, 'player');
    this.player.setScale(1); // Adjust this value if needed to match desired size
```

Let's turn the falling objects into apples.

*You can* [*download the apple.png from here*](https://github.com/JeremyMorgan/Catch-The-Apples)

In preload(), add:

```javascript
this.load.image('apple', 'apple.png');  // Loa
```

In create(), delete this:

```javascript
    // Falling item (Green rectangle)
    this.item = this.add.rectangle(400, 50, 50, 50, 0x00ff00);
```

and replace it with this:

```javascript
    // Apple sprite
    this.item = this.add.sprite(400, 50, 'apple');
    this.item.setScale(1); // Adjust scale if needed
```

And now you'll see a different look!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734904861042/849761ea-0298-40e3-a180-8719eb92e51c.png align="left")

Now we see an apple and a pail, but it's in a dark room. Let's enhance our look by adding in a background.

*You can* [*download the background.png from here*](https://github.com/JeremyMorgan/Catch-The-Apples)

In preload():

```javascript
 this.load.image('background', 'background.png');  // Load background image
```

and in create():

```javascript
    // Add background first so it appears behind other sprites
    this.add.image(400, 300, 'background');  // Position at center of game (800/2, 600/2)
```

And let's make the score black so we can see it:

```javascript
this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff' });
```

Now save it and reload it:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734904895553/58378674-d8f1-4a44-aea5-d9ed59fe877e.png align="center")

Hey that looks awesome!

## **Final Thoughts**

Congratulations! 🎉 You’ve built a working *"Catch the Items"* game using Phaser 3. Here’s [a playable version of it](https://jeremymorgan.itch.io/catch-the-apples) as well.

### **Next Steps to try on your own:**

* Customize the shapes with images or sprites.
    
* Add sound effects.
    
* Experiment with game parameters like speed and item spawn rates.
    

Keep practicing, and have fun creating your games. The possibilities are endless—go make something awesome! 🚀

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

<iframe class="youtubevid" src="https://www.youtube.com/embed/rCgDvYNoaoc"></iframe>