← Back to prompts

Prompt · December 31, 2025

Doodle Dodge Game

Build a fully functional, polished, endless runner game called "Doodle Dodge" using React, TypeScript, Tailwind CSS, and the HTML5 Canvas API, featuring a unique "Hand-Drawn Notebook" aesthetic.

Goal: Build a fully functional, polished, endless runner game called "Doodle Dodge" using React, TypeScript, Tailwind CSS, and the HTML5 Canvas API, featuring a unique "Hand-Drawn Notebook" aesthetic.

Prompt:

"Act as a world-class Senior Creative Frontend Engineer and Game Developer. I want you to build a fully functional, polished, endless runner game called 'Doodle Dodge' using React, TypeScript, Tailwind CSS, and the HTML5 Canvas API.
**The Aesthetic: Hand-Drawn Notebook

  • Background: A scrolling notebook paper effect (white/cream background with faint blue horizontal lines and a vertical red margin line).
  • No Images: All graphics (player, obstacles, UI) must be drawn procedurally using Canvas paths.
  • Style: Implement a drawSketchyLine helper that draws lines twice with slight random jitter to simulate a hand-drawn ink look. Implement drawSketchyCircle for imperfect, wobbly circles.
  • Animations: The player (Stickman) should have procedural limb animations (sin/cos waves) for running and a specific 'tuck' animation for jumping.
  • The Pencil Mechanic: Obstacles should not just 'pop' in. A giant floating pencil should fly in, 'draw' the obstacle rapidly, and then the obstacle becomes physical. **Core Mechanics:
  • Lanes: 3 horizontal lanes. Player runs on left, obstacles come from right.
  • Controls: Up/Down (Switch Lanes), Space/Right (Jump with Pseudo-3D parabola), Enter (Shoot).
  • 3-Axis Collision:
  • Lane (Z): Must be in same lane.
  • Horizontal (X): Standard overlap.
  • Altitude (Y): Track player height. Ground obstacles (Rocks) hit low feet; Flying obstacles (Paper Planes) hit high body; Holes are safe if jumping.
  • Scoring: Distance + Destruction Bonus. **Game Content:
  • Player: Stickman with hearts.
  • Obstacles: Rock/Spike, Hole, Paper Plane, Ruler (blocks lane), Eraser (moving).
  • Power-Ups: Machine Gun, Shield, Eraser Bomb (wipe screen), Health Heart, Speed Boost/Slow Mo. **Technical Architecture:
  • Game Loop: Use requestAnimationFrame inside a useEffect.
  • State Management: Use useRef for ALL mutable game state (positions, arrays, particles) to ensure 60 FPS without React re-renders. React State only for HUD (Score, Menu).
  • Files: GameCanvas.tsx (Engine), drawing.ts (Sketchy utils), types.ts (Interfaces), App.tsx (UI). **Polish ('Juice'):
  • Particles: Sketchy bursts on destruction.
  • Screen Shake: On impact/bomb.
  • Parallax: Background grid moves slower than foreground.
  • Combos: 'Near Miss' bonus points.

Please generate the complete code for this application, ensuring all files are linked and the game is playable immediately."

Copy this prompt as markdown