StickMan Arena

Real-Time Multiplayer Stickman Fighting — Phaser 3, Socket.IO & Next.js

Features · Architecture · Tech Stack · Getting Started

---

StickMan Arena is a real-time multiplayer stickman fighting game. Two players, one arena, last stickman standing wins. Built as a three-package workspace: a Phaser 3 client, an Express + Socket.IO game server, and a shared package for types and validation — so client and server can never disagree on the game contract.

---

✨ Features

• ⚔️ 1v1 Arena Fights — real-time stickman combat with a friend
• 🔌 Socket.IO Realtime — authoritative server with live position sync
• 📦 Shared Contracts — types, constants, and validation shared between client & server
• 🎮 Phaser 3 Rendering — 60 FPS canvas gameplay
• 🧪 Tested Server — Vitest suite on the game server
• 🌍 Deployable Anywhere — client on Vercel, server on Railway

---

🏗️ System Architecture

flowchart LR
    subgraph Client [Client — Next.js + Phaser 3]
        A[Game Scene]
        B[Input Controller]
    end

    subgraph Server [Server — Express + Socket.IO]
        C[Game Rooms]
        D[Physics / State Sync]
        E[Validation]
    end

    subgraph Shared [Shared Workspace]
        F[Types · Constants · Validation]
    end

    A --> C
    B --> C
    C -->|State Broadcast| A
    F -.-> A
    F -.-> C
    E -.-> F

Loading

stickman-arena/
├── client/          # Next.js 14 + Phaser 3 (deploys to Vercel)
├── server/          # Express + Socket.IO (deploys to Railway)
└── shared/          # Types, constants, validation (workspace package)

Design principle: all gameplay contracts (message schemas, constants, input validation) live in shared and are imported by both ends — a type error anywhere in the pipeline is caught at compile time.

---

🧰 Tech Stack

Layer	Technology
Client	Next.js 14 · React 18 · Phaser 3.88
Realtime	Socket.IO 4.8 (client + server)
Server	Express 4.21 · uuid
Shared	TypeScript workspace package
Testing	Vitest (server)
Deployment	Vercel (client) · Railway (server)

---

🚀 Getting Started

Prerequisites

• Node.js 20+
• npm workspaces enabled (default)

Installation

# 1. Clone
git clone https://github.com/Manthan-13521/StickmanArena-Game.git
cd StickmanArena-Game

# 2. Install all workspaces
npm install

# 3. Build shared types (required before server/client)
npm run build --workspace=shared

# 4. Start both in dev mode
npm run dev

Open http://localhost:3000 for the client. The game server runs on port 3001.

Environment Variables

Variable	Where	Purpose
PORT	server	Server port (default 3001)
NEXT_PUBLIC_SERVER_URL	client	WebSocket server URL

---

🔭 Roadmap

• Spectator mode
• Power-ups & arenas selection
• Matchmaking + ranked ELO
• Mobile touch controls
• Replay / spectator camera

---

🤝 Contributing

Contributions welcome — fork, build the workspaces, and open a PR.

---

📄 License

All rights reserved.

---

© 2026 Manthan Jaiswal — Built with Phaser 3, Socket.IO & Next.js.