Attention Retro Disorder

A retro-themed HTML5 video game built with Phaser 3.90. "Attention Retro Disorder" features a modular architecture where players progress through levels, each consisting of a random selection of mini-games.

🎮 About the Game

The game consists of a parent framework that manages levels, lives, and scene flow, alongside several self-contained mini-games:

1. Colorado Defense: A Missile Command-style defense game.
2. Code Bug Invaders: A Space Invaders-style shooter.
3. DotDude: A Pac-Man style maze chase game.
4. SmashOut: [Description pending - check src/games/smash-out/ for details].

Each mini-game level is designed to be completed in under 2 minutes. Upon completing all mini-games in a level, the player advances to the next level.

🛠️ Tech Stack

• Framework: Phaser 3.90 (loaded via CDN)
• Language: JavaScript (ES6 Modules)
• Build: No bundler required (Vanilla JS/HTML)
• Assets: Vector graphics (Phaser Graphics) and temporary sprites during development

🚀 Getting Started

No complex build process is required. You can run the game locally using any static HTTP server.

Prerequisites

• Python 3 (for the built-in server) OR npx (for serve)

Installation & Run

1. Clone the repository:

   git clone <repository-url>
   cd attention-retro-disorder
   

2. Start a local server:

   Option A: Using Python

   python3 -m http.server 8080
   

   Option B: Using Node.js

   npx serve .
   

3. Open your browser and navigate to:

   http://localhost:8080
   

📂 Project Structure

The project follows a modular architecture. Mini-games are self-contained scenes that can be added independently.

index.html              # Main HTML entry point
config/
  game.json             # Global configuration (lives, level mappings, game pool)
src/
  main.js               # Phaser initialization and scene registration
  scenes/
    MainMenu.js         # Title screen and start logic
    GameManager.js      # Core game logic: level sequencing, lives, state management
    GameOver.js         # Game over screen
    LevelComplete.js    # Level transition screen
  games/                # Mini-game directory
    colorado-defense/   # Missile Command clone
      ColoradoDefense.js
    code-bug-invaders/  # Space Invaders clone
      CodeBugInvaders.js
    dot-dude/           # Maze chase game
      DotDude.js
    smash-out/          # [Game Name]
      SmashOut.js

🧩 Architecture & Mini-Game Contract

Scene Flow

1. MainMenu → User clicks start.
2. GameManager → Reads config/game.json, selects N mini-games for the current level, and sequences them.
3. Mini-Game Scene → Runs the level.
4. GameManager → Receives completion/failure signals, updates global state (lives/level), and transitions to the next scene.

Adding a New Mini-Game

To add a new mini-game:

1. Create a new subdirectory under src/games/ (e.g., src/games/new-game/).
2. Create a JavaScript file (e.g., NewGame.js) exporting a Phaser Scene.
3. Implement the Mini-Game Contract:
   • Accept onComplete and onFail callbacks (passed via Phaser scene data).
   • Call onComplete when the level is beaten.
   • Call onFail when a life is lost.
4. Register the scene in src/main.js by importing it and adding it to the scene array in the Phaser config.
5. Add the game to the active pool in config/game.json.

Configuration

Most game settings are controlled via JSON files:

• config/game.json: Controls level-to-game-count mapping, total lives, and the active game pool.
• Individual game folders may contain specific JSON configs for that mini-game's balance and layout.

📝 Development Guidelines

• Scaling: The codebase is designed for modular scaling. New games do not require changes to the core GameManager logic if they adhere to the scene contract.
• Assets: Use Vector Graphics (Phaser.Graphics) for initial development. Replace with sprites later as needed.
• Modularity: Use ES6 import/export for all dependencies. Do not use global variables for game state.
• Viewport: The game renders at 1600x900 and scales to fit the user's viewport.

📄 License

MIT