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

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

The [**full source code is here**](https://github.com/JeremyMorgan/Catch-The-Apples). [Here’s a **playable versi**](https://github.com/JeremyMorgan/Catch-The-Apples)[**on**](https://jeremymorgan.itch.io/catch-the-apples) [of the final gam](https://jeremymorgan.itch.io/catch-the-apples)e.

### **1\. Adding Placeholder Graphics**

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

```javascript
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();
}
```

### **2\. Moving the Player Left and Right**

Add movement logic to the `update` function:

```javascript
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;
    }
}
```

* The player can now move left and right using arrow keys!
    

### **3\. Adding Simple Collision Logic**

We need to update our config:

change:

```javascript
   type: Phaser.AUTO, // Auto-detect WebGL or Canvas
   width: 800,        // Game width
   height: 600,       // Game height
```

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

```javascript
type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 0 }
                }
            },
```

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

```javascript
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);
    }
}
```

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1734904382453/afa6187f-0bf4-4472-a530-0435b609592a.png align="left")

> 📝 **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,* [*it’s available here*](https://www.youtube.com/watch?v=gFrix6Bz-C0)*.*