Developing a Cross-Platform Mobile Game with React Native and Phaser #GameDev #ReactNative #Phaser

Table of Contents

Day 5: Adding Levels, Increasing Difficulty, and Power-Ups

Welcome to Day 5 of your journey to build a cross-platform mobile game with React Native and Phaser. Today’s focus is on progression: making the game harder over time by increasing enemy speed, introducing levels, and spawning basic power-ups.

🧠 What You’ll Learn

How to manage game difficulty using levels
How to dynamically increase enemy speed
How to create collectible power-ups
How to grant temporary benefits (like health boosts)

🧮 Step 1: Track Level and Difficulty Variables

Add to your global variables:

let level = 1;
let levelText;
let enemySpeed = 100;

📊 Step 2: Display Current Level

Inside create():

levelText = this.add.text(10, 30, 'Level: 1', {
  font: '16px Arial',
  fill: '#ffffff'
});

⏫ Step 3: Automatically Increase Level & Speed

Inside create(), add a timed event:

this.time.addEvent({
  delay: 10000, // Every 10 seconds
  callback: () => {
    level++;
    enemySpeed += 20;
    levelText.setText('Level: ' + level);
  },
  loop: true
});

Update your enemy spawn event to use enemySpeed:

enemy.setVelocityY(enemySpeed);

💎 Step 4: Add Power-Up Logic

1. Preload a power-up sprite

this.load.image('powerup', 'https://labs.phaser.io/assets/sprites/yellow_ball.png');

2. Create a group for power-ups

In create():

powerups = this.physics.add.group();

this.time.addEvent({
  delay: 15000, // every 15 seconds
  callback: () => {
    const x = Phaser.Math.Between(20, 300);
    const powerup = powerups.create(x, 0, 'powerup');
    powerup.setVelocityY(80);
  },
  loop: true
});

3. Handle power-up collection

Add this overlap detection:

this.physics.add.overlap(player, powerups, collectPowerup, null, this);

Define collectPowerup():

function collectPowerup(player, powerup) {
  powerup.destroy();
  if (health < 3) {
    health += 1;
    healthText.setText('Health: ' + health);
  }
}

🎮 Optional: Add Power-Up Flash Effect

For a visual cue, add a flash:

player.setTint(0x00ff00);
this.time.delayedCall(300, () => {
  player.clearTint();
});

📱 Step 5: Test Gameplay Progression

Start the game and observe how enemies fall faster every 10 seconds.
Watch level label increase.
Collect yellow power-ups to restore health.
Try surviving as long as possible!

✅ What You’ve Achieved

Implemented level and difficulty progression
Sped up enemies as levels increase
Spawned collectible power-ups
Extended the gameplay loop with dynamic elements

📌 Up Next

In Day 6, we’ll focus on adding animations, sound effects, and music to enhance immersion and polish your mobile game experience.

You’re now halfway through — and your game is coming alive!

Post Views: 87