Doodle Clash - Prototype

A prototype of portrait mobile strategy game where players draw custom deployment paths on graph paper. Command blue-ink doodles, manage a symmetrical ink economy, and defeat a red-ink bot.

Comment

Inspiration

I wanted to build something that feels like drawing in the margins of a school notebook. Doodle Clash is based on classic pencil-and-paper games where players sketch armies on squared math paper. The design focuses on tactile gesture controls instead of buttons.

What it does

The game is a portrait strategy battle played on a squared math notebook grid. You draw custom ink paths starting from your baseline to deploy units. The goal is to destroy the enemy fortress before the 3-minute timer runs out.

Features:

  • 6 playable units: Speeder, Scribblers, Splat, Wall, Ranger and Bulker.
  • Escalating economy: Ink regenerates automatically and speeds up in the second and third minutes of the match.
  • Tactical capture points: Neutral ink bottles grant a random +1, +2, or +3 ink bonus to whichever team lands the last hit.

How I built it

I built Doodle Clash as a self-contained, offline web game. The gameplay renders at 60 frames per second on a single HTML5 canvas. I used Canvas path drawing with squash-and-stretch attack animations to give the procedurally-drawn units a loose, hand-inked feel without a single image asset. Standard HTML and CSS handle the HUD overlay, which displays your four-card hand and the ink progress bar. The code uses pure, unminified vanilla JavaScript with no build steps, bundlers, or compilers.

Challenges I ran into

Balancing the numbers was the hardest part. Tuning unit health, movement speed, ink costs, and attack intervals to ensure distinct roles took many rounds of testing. It is easy to make a strategy game, but difficult to make it actually fun to play. After adjusting the stats, the game now feels balanced and rewarding.

Accomplishments that I'm proud of

The entire game is about 200KB. All unit sprites and map grids are drawn procedurally in code - no image assets for gameplay. The code is completely modular and decoupled, which let us test drawing gestures and combat mechanics in isolation before final assembly.

What I learned

Generative AI models usually default to modern, heavy framework templates even when you ask for something simple. We learned to write explicit, strict instructions to keep the output focused on vanilla code. Building and verifying systems on isolated debug pages before full integration saved us a lot of time.

What's next for Doodle Clash - Prototype

  1. Expand the playable roster to include the remaining units from original design document.
  2. Implement final art style from original design.
  3. Implement a real-time multiplayer system with a custom matchmaking lobby.

Original design: https://devpost.com/software/doodle-clash

Built With

Share this project:

Updates