☠ COD Zombie Slug

Metal Slug × Call of Duty Zombies — Full 2D side-scrolling run-and-gun built with React 19 + HTML5 Canvas

---

🎮 About

COD Zombie Slug is a complete Metal Slug-style 2D side-scrolling game, reskinned as a Call of Duty Zombies experience. Every element of the original Metal Slug formula has been replaced with COD Zombies lore:

Metal Slug Original	COD Zombie Slug
Marco Rossi (player)	COD Soldier
Rebel soldiers	Shambling zombies
Fast rebel runners	Runner zombies
Allen O'Neil boss	Boss Zombie with toxic venom
Regular bullets	Pistol / Shotgun / Ray Gun
Urban backgrounds	Apocalyptic destroyed cityscape

---

🕹️ Controls

Key	Action
WASD / Arrow Keys	Move left/right, jump
Space	Jump
Z / J / Ctrl	Shoot
P	Pause
Enter	Start / Restart

Mobile touch controls included on-screen.

---

🧟 Features

• 5 escalating rounds of zombie carnage
• 3 enemy types: Regular Zombies, Fast Runners, Zombie Dogs
• Boss Zombie with 3-way toxic venom spray (enrages at 50% HP)
• 3 weapons: Pistol, Shotgun (5-bullet spread), Ray Gun
• Tile-based level (5,000px scrolling world) with 8 obstacle types:
  • One-way floating platforms
  • Destructible sandbag barricades (3 HP)
  • Barbed wire (damages on contact)
  • Toxic pits (instant kill)
  • Mystery Boxes (random weapon drop)
  • Ammo crates (refill ammo)
  • Concrete walls (indestructible)
• Combo multiplier system (up to x8)
• Parallax scrolling backgrounds (3 layers)
• Screen shake, blood particles, venom splashes, explosion sheets
• Web Audio API procedural sound effects
• High score saved to localStorage
• Responsive — works on desktop and mobile

---

🔬 Technical Architecture

Physics Engine

Physics modeled after the Super Mario Bros. source code (robertkleffner/mariohtml5):

• Ground inertia: 0.89 (exact SMB value)
• Air inertia: 0.89
• Separate X/Y collision passes (prevents corner-catching)
• One-way platform pass-through detection

Sprite System

Real Neo Geo Metal Slug sprite sheets from open-source preservation projects:

• alejru08/Metal-Slug — original sprite JSON frame data
• zzarcon/html5-slug — Marco Rossi atlas XML coordinates
• All sprites color-graded to COD Zombies green/dark aesthetic
• safeDrawImage() clamps source rects to prevent invisible sprites

Game Loop

requestAnimationFrame loop
  → tick(gd)
    → updatePlayer()    // SMB inertia + tile collision
    → updateEnemies()   // AI walk/attack/hit/dead states
    → updateBullets()   // AABB collision vs tiles + enemies
    → updateParticles() // blood, venom, sparks
    → updateExplosions()// sprite sheet animation
    → updateWave()      // spawn scheduling, boss trigger
    → updateCamera()    // lerp camera follow + screen shake
  → render(ctx, gd)
    → drawBg()          // sky gradient + parallax layers
    → drawTiles()       // 8 tile types with procedural art
    → drawParticles() / drawExplosions() / drawBullets()
    → drawEnemies()     // sprite atlas or fallback procedural
    → drawPlayer()
    → drawHUD()         // HP bar, ammo, lives, score, combo

---

🚀 Getting Started

# Clone the repo
git clone https://github.com/luisangelrod/cod-zombie-slug.git
cd cod-zombie-slug

# Install dependencies
pnpm install

# Start dev server
pnpm dev

Open http://localhost:3000 and press Enter to start.

Build for production

pnpm build

---

🛠️ Stack

• React 19 + TypeScript 5.6
• HTML5 Canvas API (no game engine dependency — pure vanilla canvas)
• Vite 7 (build tool)
• Tailwind CSS 4 (UI wrapper only)
• Web Audio API (procedural sound effects)
• pnpm (package manager)

---

📁 Project Structure

client/
  src/
    pages/
      Home.tsx        ← Entire game engine + renderer + UI (~1,100 lines)
    index.css         ← COD Zombies dark theme
  index.html          ← Press Start 2P pixel font
server/               ← Static Express server
shared/               ← Shared types

---

🎨 Design Philosophy

"Pixel Apocalypse" — Dark neo-noir pixel art with toxic green accents. Every visual element reinforces the COD Zombies atmosphere: blood-red title, glowing green venom, black sky with a crescent moon, and ground-level toxic fog drifting across the battlefield.

---

📜 Credits & Open Source References

Resource	Source
Metal Slug sprite sheets	alejru08/Metal-Slug (GitHub)
Marco Rossi atlas XML	zzarcon/html5-slug (GitHub)
SMB physics architecture	robertkleffner/mariohtml5 (GitHub)
Original game	Metal Slug (SNK / Neo Geo, 1996)
Theme inspiration	Call of Duty: World at War Zombies (Treyarch, 2008)

Fan-made educational project. Metal Slug is a trademark of SNK. Call of Duty is a trademark of Activision. No commercial use intended.

---

📄 License

MIT — free to use, modify, and distribute for non-commercial purposes.