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 Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
ciphernutz profile image
Ciphernutz

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

Retry later