🌈 Colour Gang 💥

Cooperative Arcade Shooter — Game Design Document

🎮 1. Game Concept & Overview

Core Concept

Colour Gang is a fast-paced, 2-player online cooperative puzzle game inspired by the mechanics of Puzzle Bobble. Instead of competing, players must work together to clear a shared obstacle (the Wall) by strategically shooting matching coloured balls.

Theme: Teamwork, Precision, Colour Matching.

Player Experience

Players are positioned symmetrically on opposite sides of a central barrier. Each player always sees themselves at the bottom and their opponent at the top — the viewport is flipped/mirrored for each player.

The goal is not to eliminate the opponent, but to facilitate shared progress toward a collective objective: clearing the board.

🕹️ 2. Player Controls

Input Mechanism: Slingshot Aiming

Controls are designed primarily for touch interfaces, but mouse input maps to the same logic.

Aiming: The player drags backward from the ball launcher (the "tongue/slingshot").
Angle: The direction of the drag determines the shot angle.
Power: The distance of the drag determines the launch velocity.
Firing: Releasing the drag launches the ball toward the Wall.

🧱 3. Level 1: The Wall Breaker

Setup

Two play areas separated by a solid central Wall.
Player 1 is at the bottom; Player 2 is at the top (mirrored view).
Each player starts with a set of coloured balls — the opponent starts with different colours.
The Wall is initially solid; no balls can pass through.

Phase 1: Breaking the Wall

Players shoot balls at the Wall. When matching colours hit the same segment of the Wall from both sides, a hole is punched through.

Coordination is required — one player alone cannot break through.

Phase 2: Passing Balls

Once a hole exists, players can shoot balls through it to the other side.

The receiving player must have empty hands (their launcher must be free).
Successfully passing a ball clears it from the sender's side and loads the receiver.

Win Condition

Both players cooperatively clear all balls from both sides of the board. The board is cleared when no balls remain in either play area.

🌐 4. Multiplayer Architecture

Client (Frontend)

Renders game via HTML5 Canvas.
Handles local touch/mouse input.
Sends action packets to the server via Socket.io.
Applies server state updates to the local canvas.

Server (Node.js / Express)

Manages authoritative game state.
Runs matchmaking queue (first 2 waiting players are paired).
Validates shots and resolves physics/collisions.
Broadcasts state updates via Socket.io rooms.

Socket.io Event Flow

Client emits join_queue → server pairs two clients → server emits match_found to both with their assigned role (bottom / top).
Client emits player_shot (trajectory vector, colour) → server validates → server updates state → server broadcasts state_update to both players in the room.
Server emits state_update on every significant event: ball position, wall integrity, player inventory, win/loss.
Client emits leave_queue or disconnects → server cleans up the room and notifies the remaining player.

🚀 5. Roadmap

Phase 1 — MVP

Placeholder page + spec (done)
Canvas game loop with slingshot controls
Socket.io matchmaking + state sync
Level 1: wall-breaking + ball-passing

Phase 2 — Depth

Special ball types (bombs, colour-shifters)
Environmental hazards and moving wall segments
Cooperative scoring / combo system
Level 2+ with new layouts

Phase 3 — Polish & Social

Leaderboards (best cooperative completion times)
Cosmetic unlocks for launchers / avatars
Timed challenge and survival modes
Mobile PWA packaging