Castle Clash Duel

A vibe-coded 2D strategy game prototype showcasing rapid game development with AI agent skills

🎯 What is This?

This is a prototype 2D tactical strategy game built through vibe coding - a rapid development workflow powered by specialized AI agent skills. The game was created by combining a well-structured PRD (from TinyPRD) with three specialized Claude Code skills, demonstrating how AI-assisted development can go from concept to playable prototype.

The Result: A turn-based strategy game prototype with warriors, archers, particle effects, dynamic UI, and test coverage - all in ~580KB of carefully curated assets.

Note: This is a prototype demonstrating the vibe coding workflow. It's not production-ready or highly polished - the focus is on showcasing rapid AI-assisted development rather than delivering a finished product.

🎮 Play the Game

🎯 Play Online Now →

Or run locally by opening public/index.html in a modern web browser. No build process or dependencies required!

Game Features:

• Two-player turn-based strategy combat
• Recruit warriors and archers with unique abilities
• Dynamic health bars and visual feedback
• Animated unit sprites and particle effects
• Custom tilemap rendering with terrain variety
• Interactive UI with nine-slice scaling for responsive panels

⚡ The Vibe Coding Workflow

This project demonstrates the complete vibe coding workflow:

1. PRD Creation (TinyPRD)

Started with a clear, concise Product Requirements Document that defined:

• Game mechanics and win conditions
• Visual style and color palette
• Technical constraints (Phaser 3, single HTML file)
• Asset specifications and UI requirements

📄 See the full PRD: docs/prd.md

Why TinyPRD? A well-structured PRD helps with vibe coding. TinyPRD helps you write clear, actionable requirements that AI agents can work with more effectively.

2. Technical Design Document

Translated the PRD into detailed technical specifications:

• Scene architecture and state management
• Asset loading strategies
• UI component breakdown
• Testing requirements

📄 See the full TDD: docs/tdd.md

3. Asset Metadata Structure (assets.json)

Created a comprehensive metadata file documenting the Tiny Swords asset pack structure:

• Spritesheet frame dimensions for units, terrain, and particles
• Color variant mappings (blue, red, yellow, etc.)
• Path templates for buildings and UI elements
• Tile sizes and grid specifications

📄 See the asset metadata: public/assets/tinyswords/assets.json

Why this matters: AI agents can reference this metadata to make informed decisions about asset loading, frame extraction, and spritesheet handling without manual trial-and-error. It serves as a "contract" between the asset pack and the code.

4. Implementation with Agent Skills

With the PRD, TDD, and asset metadata in place, the game was built using three specialized Claude Code skills that handle complex, domain-specific tasks:

🎨 Phaser GameDev

Advanced 2D game development with the Phaser 3 framework:

• Scene lifecycle management (Boot, Menu, Gameplay)
• Sprite animation systems
• Turn-based combat logic
• Particle effects and visual polish
• Custom UI architecture with nine-slice scaling

Key Challenge Solved: Nine-slice panel rendering with the Tiny Swords asset pack. The sprites have heavy transparent padding, which creates visual artifacts when scaled naively. The solution involved custom texture stitching with calculated overlap to hide edges.

See implementation: test.html:282-315 (createStitchedTexture method)

🗺️ TinySwords Tilemap

Professional tilemap rendering optimized for the Tiny Swords asset pack:

• 64×64 tile grid system
• Multiple terrain color variants
• Procedural decoration placement (trees, rocks, bushes)
• Elevation rendering for visual depth

Asset Optimization: The skill knew exactly which Tiny Swords assets to use and how to combine them, eliminating guesswork and trial-and-error.

✅ Frontend Testing

Basic UI testing infrastructure:

• Dedicated test harness (test.html) for visual regression testing
• Isolated component tests for nine-slice panels, ribbons, and health bars
• Test hooks for Playwright integration
• Interactive debugging (press 1-6 to cycle through test scenarios)

Test Coverage: UI components have side-by-side comparisons of raw vs. stitched textures for visual verification.

🛠️ The Agent Skills Advantage

Traditional Development:

1. Research Phaser API documentation
2. Trial-and-error with nine-slice scaling
3. Debug rendering artifacts
4. Manually optimize asset

...