Escape Among Us 🚀

Live Game : escape.dwani.ai

Demo Video : https://youtu.be/uHD2E5JG4so

---

---

Game QR Code :

An exciting multiplayer educational escape room game featuring Among Us-style characters! Players must solve puzzles, answer quiz questions, and escape through 5 themed rooms. Create a game session and invite friends with a unique game code!

---

---

🎮 Features

Multiplayer

• 1-4 Players per game session
• Game Codes - Create and share 6-character codes to invite friends
• Real-time Sync - See other players move in real-time via WebSockets
• Chat System - Communicate with teammates during gameplay
• Live Map View - Track all players across rooms
• Leaderboard - Compare scores with other players

Gameplay

• 5 Themed Escape Rooms:

  • 🏛️ Seven Wonders of the World
  • ⚽ World Cup Football
  • 🚀 Space Travel
  • 🧮 Maths & Logic
  • ⚛️ Science & Physics

• Random Room Order - Each player gets a randomized room sequence

• Interactive Items - Walk around and interact with objects

• Quiz Questions - Answer correctly to unlock items

• 3 Strikes System - 3 wrong answers = EJECTED! 💀

• Victory Dances - Fortnite-style celebration when you escape!

Visual Features

• Among Us Characters - 10 customizable colors
• 3D-Styled Rooms - Immersive environments
• Ejection Animation - Dramatic space ejection sequence
• Victory Celebration - Dance party with confetti!

🚀 Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Local Development

# Install dependencies
npm install

# Start the multiplayer server (includes Socket.io)
npm run dev

# Or use the standard Next.js dev server (no multiplayer)
npm run dev:next

Open http://localhost:3000 in your browser!

Production Build

npm run build
npm start

🐳 Docker Deployment

Using Docker Compose (Recommended)

# Build and start
docker-compose up -d

# View logs
docker-compose logs -f

# Stop
docker-compose down

Using Docker Directly

# Build the image
docker build -t escape-among-us .

# Run the container
docker run -p 3000:3000 escape-among-us

The game will be available at http://localhost:3000

☁️ GCP Cloud Run Deployment

# Set your project ID
export PROJECT_ID=your-gcp-project-id

# Build and push to Google Container Registry
docker build -t gcr.io/$PROJECT_ID/escape-among-us .
docker push gcr.io/$PROJECT_ID/escape-among-us

# Or use Cloud Build
gcloud builds submit --tag gcr.io/$PROJECT_ID/escape-among-us

# Deploy to Cloud Run
gcloud run deploy escape-among-us \
  --image gcr.io/$PROJECT_ID/escape-among-us \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated \
  --port 3000 \
  --memory 512Mi \
  --cpu 1 \
  --min-instances 0 \
  --max-instances 10

☁️ GCP Compute Engine Deployment

# SSH into your VM
gcloud compute ssh your-vm-name --zone=us-central1-a

# Pull and run the container
docker pull gcr.io/$PROJECT_ID/escape-among-us
docker run -d -p 80:3000 --restart=always gcr.io/$PROJECT_ID/escape-among-us

Note: The server binds to 0.0.0.0 to accept external connections. Make sure your firewall rules allow traffic on port 3000 (or 80 if you're mapping ports).

🎯 How to Play

Creating a Game

1. Click "Create Game"
2. Enter your name and choose a color
3. Share the 6-character game code with friends
4. Wait for players to join (1-4 players)
5. Click "Ready" and then "Start Game"

Joining a Game

1. Click "Join Game"
2. Enter the game code from your friend
3. Enter your name and choose an available color
4. Click "Ready" when you're set to play

In-Game Controls

Key	Action
W/↑	Move Up
A/←	Move Left
S/↓	Move Down
D/→	Move Right
E/Space	Interact with items / Enter exit

Game Rules

• Walk to glowing items and press E to interact
• Answer quiz questions correctly to unlock items
• Complete all 4 items in a room to unlock the exit door
• 3 wrong answers = EJECTED! 💀
• Each player has a randomized room order
• First to escape all 5 rooms wins!

🏁 Room Competition

When 2+ players are in the same room:

• Race Mode activates - first to complete wins!
• The winner proceeds to the next room
• All other players in that room are EJECTED!

⚔️ Face-Off Duels

Challenge other players in the same room to a Face-Off:

1. Click on another player to initiate
2. Select 3 Yes/No questions from a list of 10
3. The challenged player must answer all 3 questions
4. If they get any wrong → They're ejected! ✅
5. If they answer all 3 correctly → YOU get ejected! 💀

Face-Off Risk/Reward
High Risk: If they answer all correctly, you're out!
High Reward: Eliminate competitors instantly!

Strategy Tips:

• Pick tricky questions to maximize your chances
• Use face-offs when you're behind in the race
• Be careful - smart players can turn your challenge against you!

🗺️ Map View

Press the "🗺️ Map" button to see:

• All players' current rooms
• Who's escaped (🏆)
• Live leaderboard with scores
• Item progress per room

💬 Chat

Click the "💬" button to open chat:

• Send messages to all players
• Coordinate strategies
• Celebrate victories!

🏗️ Project Structure

├── server.js              # Custom Node.js server with Socket.io
├── Dockerfile             # Docker production build
├── docker-compose.yml     # Docker Compose configuration
├── src/
│   ├── app/
│   │   ├── api/health/    # Health check endpoint
│   │   ├── globals.css    # Animations & styles
│   │   ├── layout.tsx     # Root layout
│   │   └── page.tsx       # Main game page
│   ├── components/
│   │   ├── AmongUsCharacter.tsx   # SVG character
│   │   ├── EjectionAnimation.tsx  # Ejection sequence
│   │   ├── FaceOffSelectModal.tsx # Choose duel questions
│   │   ├── FaceOffQuestionModal.tsx # Answer Yes/No
│   │   ├── FaceOffResultModal.tsx # Duel outcome
│   │   ├── FaceOffWaitingModal.tsx # Spectator view
│   │   ├── GameCanvas.tsx         # Game world
│   │   ├── Lobby.tsx              # Create/Join screens
│   │   ├── MapView.tsx            # Player map
│   │   ├── MultiplayerHUD.tsx     # Game HUD
│   │   ├── QuizModal.tsx          # Quiz interface
│   │   └── VictoryAnimation.tsx   # Win celebration
│   ├── data/
│   │   ├── rooms.ts       # Room data & questions
│   │   └── faceoffQuestions.ts  # Yes/No duel questions
│   ├── hooks/
│   │   └── useSocket.ts   # Socket.io hook
│   └── lib/
│       ├── gameStore.ts   # Zustand state
│       ├── multiplayerTypes.ts  # MP types
│       └── types.ts       # Core types

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• State: Zustand
• Realtime: Socket.io
• Deployment: Docker

🔧 Environment Variables

Variable	Description	Default
PORT	Server port	3000
NODE_ENV	Environment	development
HOSTNAME	Server hostname	localhost

📡 WebSocket Events

Client → Server

• create-game - Create new session
• join-game - Join existing session
• player-ready - Toggle ready status
• start-game - Start the game (host)
• player-move - Send position updates
• item-completed - Mark item done
• wrong-answer - Report wrong answer
• room-completed - Move to next room
• chat-message - Send chat message
• faceoff-challenge - Initiate face-off duel
• faceoff-select-questions - Choose 3 questions
• faceoff-answer - Answer Yes/No question

Server → Client

• game-created - Session created
• game-joined - Successfully joined
• player-joined - New player arrived
• session-updated - State changed
• game-started - Game began
• player-moved - Other player moved
• player-ejected - Someone ejected
• chat-message - New chat message
• room-competition-lost - Lost room race
• faceoff-select-questions - Select questions UI
• faceoff-challenge-received - Being challenged
• faceoff-started - Face-off beginning
• faceoff-question - Next question to answer
• faceoff-answer-result - Answer feedback
• faceoff-completed - Face-off ended

🎨 Customization

Adding New Rooms

Edit src/data/rooms.ts:

{
  id: 'your-room-id',
  name: 'Your Room Name',
  theme: 'your-theme',
  description: 'Room description',
  backgroundGradient: 'from-color-900 to-color-700',
  accentColor: '#hexcolor',
  icon: '🎯',
  exitDoor: { x: 85, y: 50 },
  items: [...],
  questions: [...],
  clues: [...],
}

Changing Max Players

Edit server.js:

const session = {
  maxPlayers: 4,  // Change this
  minPlayers: 1,
  // ...
};

📝 API Endpoints

• GET /api/health - Health check for Docker/Kubernetes

🚢 Production Deployment

Docker Swarm / Kubernetes

The app includes health checks compatible with orchestration platforms:

healthcheck:
  test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/api/health"]
  interval: 30s
  timeout: 10s
  retries: 3

Scaling Considerations

For production with multiple instances, consider:

• Redis for session storage (adapter included in Socket.io)
• Load balancer with sticky sessions
• Shared state management

📄 License

MIT License - feel free to use for hackathons or personal projects!

---

Made with ❤️ for the Escape Room Hackathon