# 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.

*Prompt · December 31, 2025*

**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."

[Open on the site →](https://www.agenticamit.com/prompt/doodle-dodge-game)