DEV Community

Cover image for How to Make a Retro 2D JavaScript Game Part 2
Jeremy Morgan
Jeremy Morgan

Posted on • Originally published at howtomakegames.org

4 1 1 1 1

How to Make a Retro 2D JavaScript Game Part 2

Let’s make this game interactive! We’ll add a player, movement controls, and falling items.

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

1. Adding Placeholder Graphics

Update the create function to add shapes representing the player and falling items:

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

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

    // Enable physics
    this.physics.add.existing(this.player);
    this.physics.add.existing(this.item);

    // Player controls
    this.cursors = this.input.keyboard.createCursorKeys();
}
Enter fullscreen mode Exit fullscreen mode

2. Moving the Player Left and Right

Add movement logic to the update function:

function update() {
    // Move player left
    if (this.cursors.left.isDown) {
        this.player.x -= 5;
    }
    // Move player right
    else if (this.cursors.right.isDown) {
        this.player.x += 5;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • The player can now move left and right using arrow keys!

3. Adding Simple Collision Logic

We need to update our config:

change:

   type: Phaser.AUTO, // Auto-detect WebGL or Canvas
   width: 800,        // Game width
   height: 600,       // Game height
Enter fullscreen mode Exit fullscreen mode

To this, to add physics and gravity to our scene.

type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 0 }
                }
            },
Enter fullscreen mode Exit fullscreen mode

Make the falling item reset its position when it reaches the bottom:

function update() {
    // Move falling item
    this.item.y += 3;

    // Reset item position
    if (this.item.y > 600) {
        this.item.y = 50;
        this.item.x = Phaser.Math.Between(50, 750); // Random x-position
    }

    // Check for overlap
    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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Now you'll see a screen that looks like this: and you should see green blocks falling. You can also move the player with your arrow keys:

How to make a 2D JavaScript Game

📝 Recap: You added player movement, falling items, and basic collision detection. Your game is interactive! Now on to part 3

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

Source Code
Playable Version

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
ciphernutz profile image
Ciphernutz

Thanks for sharing step-by-step guidance—perfect for diving into retro game development!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up