██████╗██╗ ██╗██████╗ ███████╗██████╗ ██████╗██╗ █████╗ ███████╗██╗ ██╗
██╔════╝╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗ ██╔════╝██║ ██╔══██╗██╔════╝██║ ██║
██║ ╚████╔╝ ██████╔╝█████╗ ██████╔╝ ██║ ██║ ███████║███████╗███████║
██║ ╚██╔╝ ██╔══██╗██╔══╝ ██╔══██╗ ██║ ██║ ██╔══██║╚════██║██╔══██║
╚██████╗ ██║ ██████╔╝███████╗██║ ██║ ╚██████╗███████╗██║ ██║███████║██║ ██║
╚═════╝ ╚═╝ ╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═════╝╚══════╝╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
[ ATTACKER vs DEFENDER — TYPE REAL COMMANDS — SURVIVE ALL 8 TIERS ]
> SYSTEM BREACH DETECTED
> INITIATING COUNTERMEASURES...
> LOADING CYBER-CLASH v2.0.0_
A browser-based cybersecurity battle game built with React + Three.js. Pick your side — attack or defend — and fight through 22 real-world hacking scenarios across 8 escalating tiers. The game validates actual security tool commands (nmap, sqlmap, metasploit, mimikatz...) and scores your technique in real time.
No tutorials. No training wheels. Just you, a terminal, and 8 tiers standing between you and Cyber Operative status.
┌─────────────┐ ┌──────────────┐ ┌────────────────────┐
│ ENTER │────▶│ SELECT TIER │────▶│ CHOOSE ROLE │
│ CALLSIGN │ │ (1 thru 8) │ │ ATTACKER/DEFENDER │
└─────────────┘ └──────────────┘ └────────────────────┘
│
▼
┌─────────────┐ ┌──────────────┐ ┌────────────────────┐
│ EARN XP + │◀────│ WIN / LOSE │◀────│ TYPE COMMANDS │
│ BADGES │ │ │ │ FIGHT THE BATTLE │
└─────────────┘ └──────────────┘ └────────────────────┘
TIER 1 ── RECONNAISSANCE [ nmap · theHarvester · Shodan · Maltego ]
TIER 2 ── SCANNING & ENUM [ Masscan · Gobuster · Nikto · Nessus ]
TIER 3 ── WEB APP ATTACKS [ SQLi · XSS · Burp Suite · OWASP Top 10 ]
TIER 4 ── ADVANCED WEB [ CSRF · SSRF · XXE · API exploitation ]
TIER 5 ── EXPLOITATION [ Metasploit · Privesc · RCE · Shells ]
TIER 6 ── SESSION & API [ Cookie theft · JWT attacks · IDOR ]
TIER 7 ── LATERAL MOVEMENT [ Mimikatz · BloodHound · Impacket · PTH ]
TIER 8 ── RED TEAM OPS [ C2 frameworks · APT kill chain · OPSEC ]
Win conditions unlock badges permanently saved to your profile.
| badge | condition |
|---|---|
| Ghost Protocol | win without being detected |
| Speed Hacker | win in under 30 seconds |
| SQLi Master | clear Tier 3 as attacker |
| Impenetrable | block 10 attacks in a row |
| Chain Breaker | clear Tier 7 |
| Cyber Operative | clear Tier 8 |
| + 6 more | ... |
Beyond the main game, career mode gives you structured learning paths toward actual cybersecurity roles:
PENETRATION TESTER red team · OSCP track · $80K–$160K
RED TEAM OPERATOR red team · CRTO track · $110K–$200K
SOC ANALYST blue team · detection · incident response
DEFENSIVE ENGINEER blue team · hardening · threat modeling
Each path has XP-gated modules, tool recommendations per stage, and cert roadmaps (OSCP, CEH, CRTO, PNPT...).
React 19 + TypeScript 5.9 frontend framework
Three.js + react-three/fiber 3D scene & matrix rain animation
Zustand + persist game state, saved locally between sessions
Tailwind CSS v4 + shadcn/ui component styling
Vite 7 build tooling
pnpm workspaces monorepo setup
# prereqs: Node 18+, pnpm
npm install -g pnpm
git clone https://github.com/eshaa7/Cyber-Clash.git
cd Cyber-Clash
pnpm install
cd artifacts/3d-game
pnpm devHit http://localhost:5173 and enter your callsign.
Cyber-Clash/
├── artifacts/
│ ├── 3d-game/
│ │ └── src/
│ │ ├── components/ 3D scene, matrix rain, terminal, attack animations
│ │ ├── pages/ landing, battle, briefing, career, result
│ │ └── lib/ game store, command validator, scenario data
│ └── api-server/ express backend
└── lib/ shared workspace packages
MIT — do whatever you want with it.
▸ AUTHORIZED ACCESS ONLY ▸ CLASSIFIED SIMULATION ▸ ENTER AT YOUR OWN RISK ▸