How to Make a Retro 2D JavaScript Game Part 3

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

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

1. Adding a Score

Modify the create function to display a score:

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:

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:

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

So change this:

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:

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:

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:

this.itemSpeed = 3;

in our update() function, delete this:

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

And replace it with this:

  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

in preload, add the following:

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

Then remove this:

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

And replace it with this:

   // 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

In preload(), add:

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

In create(), delete this:

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

and replace it with this:

    // 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!

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

In preload():

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

and in create():

    // 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:

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

Now save it and reload it:

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 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: