Computer Error: System Recovery Game

A multi-stage puzzle game themed around fixing a computer system error through various challenges.

🎮 Game Overview

The game follows a computer error story where you must:

1. Watch the opening story videos (g1.mp4, g2.mp4, g3.mp4)
2. Connect electrical wires to restore system communication
3. Watch the success video (g4.mp4)
4. Enter the game space to complete multiple challenges:
   • Secret code decoding
   • Tunnel map navigation
   • Tunnel escape

🎯 Game Flow

Stage 1: Story Introduction

• Video Sequence: g1.mp4 → g2.mp4 → g3.mp4
• Purpose: Sets up the computer error narrative
• Action: Watch videos or skip to begin recovery process

Stage 2: Wire Connection Puzzle

• Objective: Connect the correct word pairs to restore system communication
• Correct Connections:
  • SYSTEM ↔ FIX
  • ERROR ↔ REPAIR
  • RECOVERY ↔ RESTORE
• How to Play:
  1. Click on a word node to select it (turns yellow)
  2. Click on another word node to create a connection
  3. Repeat until all correct pairs are connected
  4. Click "Check Connections" to verify
  5. Use "Reset" to start over

Stage 3: Success Video

• Video: g4.mp4 plays after successful wire connections
• Purpose: Shows system recovery initiation
• Action: Click "Enter Game Space" to continue

Stage 4: Game Space Hub

• Purpose: Central hub with multiple challenges
• Features: Three challenge cards and progress indicators
• Challenges Available:
  • 🔐 Secret Code Decoder
  • 🗺️ Tunnel Map Navigation
  • 🚇 Tunnel Escape

Stage 5: Secret Code Challenge

• Objective: Decode the secret message
• Code: "ERRORSYSTEMRECOVERY" (combine the three words)
• Hint: Combine ERROR + SYSTEM + RECOVERY in sequence
• Input: Type the code and press Enter or click Decode

Stage 6: Tunnel Map Challenge

• Objective: Navigate through the digital maze
• Path: START → PATH 1 → PATH 2 → PATH 3 → EXIT
• Controls: Click "Next Path" to advance
• Goal: Complete the entire path sequence

Stage 7: Tunnel Escape Challenge

• Objective: Navigate through obstacles to reach the exit
• Controls: Arrow keys to move
• Goal: Reach the yellow exit circle
• Features:
  • Red obstacles block your path
  • Green player dot must reach yellow exit
  • "Reset Position" button to restart

Stage 8: Victory Screen

• Reward: All challenges completed
• Features: Completion statistics and restart option

🎨 Visual Design

• Theme: Computer terminal/cyberpunk aesthetic
• Colors: Green (#00ff00) on black background
• Effects: Glitch animations, glowing elements
• Typography: Courier New monospace font

🎵 Audio/Video

• Story Videos: g1.mp4, g2.mp4, g3.mp4 (opening sequence)
• Success Video: g4.mp4 (after wire puzzle)
• Video Progression: Tells the story of computer error and recovery

🎮 Controls

• Mouse: Click to interact with buttons and wire nodes
• Keyboard: Arrow keys for tunnel navigation
• Enter: Submit secret code

🔧 Technical Features

• Responsive Design: Works on desktop and mobile
• State Management: Tracks game progress through stages
• Progress Tracking: Visual indicators for completed challenges
• Collision Detection: Tunnel obstacles block movement
• Dynamic Wire Drawing: Visual connections between nodes
• Game Reset: Complete restart functionality

🚀 How to Run

1. Open index.html in a web browser
2. The game will start with the intro video (g1.mp4)
3. Follow the on-screen instructions
4. Complete each stage to progress

🎯 Complete Game Flow

Intro Video (g1.mp4) 
    ↓
Story Video 1 (g2.mp4)
    ↓
Story Video 2 (g3.mp4)
    ↓
Wire Connection Puzzle
    ↓
Success Video (g4.mp4)
    ↓
Game Space Hub
    ↓
[Secret Code] [Tunnel Map] [Tunnel Escape]
    ↓
Victory Screen
    ↓
Play Again

🏆 Winning Strategy

1. Wire Puzzle: Connect SYSTEM-FIX, ERROR-REPAIR, RECOVERY-RESTORE
2. Secret Code: Combine "ERROR" + "SYSTEM" + "RECOVERY" = "ERRORSYSTEMRECOVERY"
3. Tunnel Map: Follow START → PATH1 → PATH2 → PATH3 → EXIT
4. Tunnel Escape: Use arrow keys carefully, avoid red obstacles

🐛 Troubleshooting

• If videos don't play, check file paths in assets folder
• If wire connections don't draw, try refreshing the page
• If tunnel movement is unresponsive, click in the tunnel area first
• If challenges don't register completion, try refreshing the page

📁 File Structure

game test/
├── index.html          # Main game file
├── style.css           # Game styling
├── script.js           # Game logic
├── README.md           # This file
└── assets/
    ├── g1.mp4          # Intro video
    ├── g2.mp4          # Story video 1
    ├── g3.mp4          # Story video 2
    └── g4.mp4          # Success video

🎮 Challenge Details

Secret Code Challenge

• Display: Shows ERROR, SYSTEM, RECOVERY segments
• Solution: Combine all three words: "ERRORSYSTEMRECOVERY"
• Hint: Think about the sequence of the words

Tunnel Map Challenge

• Layout: 5 nodes in a row (START → PATH1 → PATH2 → PATH3 → EXIT)
• Mechanics: Click "Next Path" to advance through the sequence
• Goal: Complete the entire path from START to EXIT

Tunnel Escape Challenge

• Maze: 600x400 pixel area with obstacles
• Player: Green dot that moves with arrow keys
• Exit: Yellow circle in bottom-right corner
• Obstacles: Red blocks that block movement

Enjoy the game! 🎮 # H-n-L-a