overrun/README.md

3.8 KiB

Overrun

A Smash TV-style top-down arena shooter built with Phaser 3.

Overview

Overrun is a fast-paced twin-stick shooter where you battle waves of enemies across multiple zones. Kill enemies to earn XP, level up, and unlock powerful skills from a branching skill tree.

How to Play

Running the Game

Since the game uses ES6 modules, it must be served over HTTP (not file://):

# Option 1: Using npx
npx serve .

# Option 2: Using Python
python3 -m http.server 8080

# Option 3: Using the provided script
./start_web.sh

Then open http://localhost:8080 in your browser.

Controls

Key Action
W / A / S / D Move player
Mouse Aim direction
Left Click Fire weapon
R Restart (on game over)

Gameplay

  • Lives: Start with 3 lives, 100 HP per life
  • XP & Leveling: Earn XP by killing enemies. When you level up, the game pauses and you can pick a skill
  • Zones: Progress through multiple zones, each with increasingly difficult enemy waves
  • Victory: Complete all zones to win

Skill Tree

The skill tree branches into two main paths:

Defense

  • Take 10% less damage (and additional upgrades)

Offense

  • Increase damage by 20%
  • Increase fire rate by 40%

New skills can be added by editing js/data/skillTree.json.

Project Structure

overrun/
├── index.html           # Entry HTML file
├── main.js              # Game entry point, Phaser config
├── phaser.min.js        # Phaser 3 library (minified)
├── start_web.sh         # Convenience script to start server
│
├── js/
│   ├── main.js          # Phaser game configuration
│   ├── scenes/          # Game scenes
│   │   ├── IntroScene.js
│   │   ├── GameScene.js
│   │   └── GameOverScene.js
│   │
│   ├── entities/        # Game entities
│   │   ├── Player.js
│   │   └── enemies/
│   │       ├── BaseEnemy.js
│   │       ├── ChaseEnemy.js
│   │       ├── BomberEnemy.js
│   │       ├── SprayerEnemy.js
│   │       ├── ShooterEnemy.js
│   │       └── SwarmerEnemy.js
│   │
│   ├── systems/         # Game systems
│   │   ├── WaveManager.js
│   │   ├── SkillTree.js
│   │   ├── XPSystem.js
│   │   └── BarrierManager.js
│   │
│   ├── ui/              # UI components
│   │   ├── HUD.js
│   │   ├── SkillTreeUI.js
│   │   └── Reticle.js
│   │
│   └── data/            # JSON data files
│       ├── zones.json
│       └── skillTree.json
│
└── assets/
    └── sprites/         # Game sprites (player, enemies)

Enemy Types

Enemy Behavior
Chaser Directly pursues the player
Swarmer Fast, erratic movement in groups
Shooter Fires projectiles at the player
Sprayer Fires multiple projectiles in a spread
Bomber Explodes on contact or when near player

Development

Adding New Enemies

  1. Create a new file in js/entities/enemies/
  2. Extend BaseEnemy or create a new class
  3. Implement update(), takeDamage(), and attack() methods
  4. Register the enemy in js/data/zones.json

Adding New Skills

  1. Edit js/data/skillTree.json
  2. Add a new node with:
    • id: Unique identifier
    • parent: ID of the parent node (or null for root)
    • effect: Object with stat, add, and/or multiply values

Adding New Zones

Edit js/data/zones.json to define new zones with increasing difficulty.

Tech Stack

  • Phaser 3 - Game framework
  • Vanilla JavaScript - No bundlers, ES6 modules
  • No build tools - Runs directly in browser

License

MIT License