Added README.md
This commit is contained in:
parent
d1627d6e74
commit
3527a1e3ef
|
|
@ -0,0 +1,118 @@
|
|||
# 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:
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd attention-retro-disorder
|
||||
```
|
||||
|
||||
2. Start a local server:
|
||||
|
||||
**Option A: Using Python**
|
||||
```bash
|
||||
python3 -m http.server 8080
|
||||
```
|
||||
|
||||
**Option B: Using Node.js**
|
||||
```bash
|
||||
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
|
||||
Loading…
Reference in New Issue