Lädt...


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


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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:

How to make a 2D JavaScript Game

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:

How to make a 2D JavaScript Game

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.

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.

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!

How to make a 2D JavaScript Game

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.

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:

How to make a 2D JavaScript Game

Hey that looks awesome!

Final Thoughts

Congratulations! 🎉 You’ve built a working "Catch the Items" game using Phaser 3.

Next Steps

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

Source Code
Playable Version

...

🔧 How to Make a Retro 2D JavaScript Game Part 1


📈 30.68 Punkte
🔧 Programmierung

🔧 How to Make a Retro 2D JavaScript Game Part 2


📈 30.68 Punkte
🔧 Programmierung

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


📈 30.68 Punkte
🔧 Programmierung

📰 Retro Computing: Die Totensaga der Retro-Spielkonsole Coleco Chameleon


📈 18.75 Punkte
📰 IT Nachrichten

📰 Nanoxia Ncore Retro: Erste Tastatur trägt Retro-Look


📈 18.75 Punkte
📰 IT Nachrichten

📰 Retro Computing: Die Totensaga der Retro-Spielkonsole Coleco Chameleon


📈 18.75 Punkte
📰 IT Nachrichten

📰 Retro Computing: Die Totensaga der Retro-Spielkonsole Coleco Chameleon


📈 18.75 Punkte
📰 IT Nachrichten

🍏 The Retro 67 Charger from Shargeek Rocks Retro Looks with Modern Functionality


📈 18.75 Punkte
🍏 iOS / Mac OS

🐧 Ubuntu Retro Remix: A New Raspberry Pi Linux Distro For Retro Gamers


📈 18.75 Punkte
🐧 Linux Tipps

📰 NeoGeo: Arcade Stick Pro ist Retro-Konsole im Retro-Controller


📈 18.75 Punkte
📰 IT Nachrichten

🐧 TIL That Arch Linux has retro websites of Arch in URL form : https://www.archlinux.org/retro/2002/


📈 18.75 Punkte
🐧 Linux Tipps

📰 Nanoxia Ncore Retro Aluminium: Retro-Tastatur im US-Design mit besserem Gehäuse


📈 18.75 Punkte
📰 IT Nachrichten

📰 Nanoxia Ncore Retro: Erste Tastatur trägt Retro-Look


📈 18.75 Punkte
📰 IT Nachrichten

📰 Retro Computing: Die Totensaga der Retro-Spielkonsole Coleco Chameleon


📈 18.75 Punkte
📰 IT Nachrichten

🔧 Game Dev Digest — Issue #239 - Steam, Game Architecture, Retro Graphics, and more


📈 18.29 Punkte
🔧 Programmierung

📰 Game Boy Macro: Schritt für Schritt vom Nintendo DS zum Retro-Game-Boy


📈 18.29 Punkte
📰 IT Nachrichten

🔧 Lazy Loading: Why Make Your Users Wait? Let's Make the Web Faster (and Fun!) | Web Theory: Part 11


📈 17.4 Punkte
🔧 Programmierung

🔧 make your JavaScript code more efficient, readable, and maintainable.(Part 1)


📈 16.85 Punkte
🔧 Programmierung

🔧 Deno : Let's Make JavaScript Uncomplicated. A Powerful NextGen JavaScript Runtime


📈 16.59 Punkte
🔧 Programmierung

🔧 V8 Internals for JavaScript Developers (Make Your JavaScript Faster)


📈 16.59 Punkte
🔧 Programmierung

🔧 JavaScript Essentials: Part 6 (Mastermind in Javascript)


📈 16.3 Punkte
🔧 Programmierung

🔧 The History of JavaScript Frameworks: Part 1 - The DynAPI JavaScript Library


📈 16.3 Punkte
🔧 Programmierung

🔧 Build Your First Typing Game with JavaScript - Part 3


📈 15.41 Punkte
🔧 Programmierung

🔧 Building Your First Typing Game with JavaScript - Part 1


📈 15.41 Punkte
🔧 Programmierung

📰 heise+ | Make-Projekt: Bauanleitung für einen Retro-Audio-Player


📈 15.27 Punkte
📰 IT Nachrichten

📰 Nintendo Warns It Won't Make More Retro NES and SNES Consoles


📈 15.27 Punkte
📰 IT Security Nachrichten

🔧 JavaScript Game Dev Tutorial – Build Gorillas with HTML Canvas + JavaScript


📈 15.15 Punkte
🔧 Programmierung

🔧 JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript


📈 15.15 Punkte
🔧 Programmierung

matomo