Pencil Rush Project Report
1. The Concept
Pencil Rush is a playful, school-themed single-player snake game for desktop and mobile browsers. The player guides a customizable snake around a Canvas game board, collects school supplies to grow and score points, earns coins, unlocks cosmetic skins and worlds, and competes against AI-controlled snakes.
The game has three distinct modes: Endless for high-score play, Survival 50 for a last-snake-standing challenge against 49 AI snakes, and Arena for a focused battle against five AI opponents. The visual direction combines notebook-paper backgrounds, colorful stationery, friendly cartoon snakes, and a portrait 9:16 game layout.
2. The Stack
The Stack: A single index.html application built with vanilla HTML, CSS, and JavaScript. Gameplay is rendered with the HTML5 Canvas API. The app uses browser localStorage for saved progress and local PNG/MP3 files for artwork and audio. There is no framework, backend, external library, build tool, game engine, or real multiplayer service.
The AI Assist: Codex was used to help plan the implementation, build the game systems, refine the responsive UI, generate and integrate local game artwork, connect local sound effects, test the application structure, and document the finished project.
3. The 1 Day Sprint
Morning (Hours 1–3): Established the single-file application foundation, application state, local persistence, home screen, collections, settings, and the responsive 9:16 layout. Set the visual language around the Pencil Rush school-supplies theme.
Afternoon (Hours 4–6): Built the Canvas game loop, player snake movement, mouse and touch steering, collectible spawning and collision, growth, HUD, AI snake models, and AI behaviours across the three game modes.
The Finish Line (Hours 7–8): Completed mode rules, progression and cosmetic collections, game-over and victory states, local audio, gameplay polish, Survival 50 rendering, mobile no-scroll behaviour, and project documentation.
4. The Roadblocks
Roadblocks: The central challenge was keeping the game fully self-contained while supporting both desktop and mobile. The project needed a full-screen portrait layout without breaking Canvas input, a smooth snake-following system, and Survival 50 with 49 visible AI snakes. The solution was to keep all gameplay in one Canvas, use pointer events for both mouse and touch input, preserve a consistent 9:16 viewport, and render every AI body segment so Survival snakes match the appearance of the other modes. Another important concern was persistence: localStorage validation and safe defaults were added so progress remains reliable even if stored browser data is missing or invalid.
5. Key Takeaways
A focused scope makes a complete browser game achievable in a short sprint. Vanilla browser APIs are sufficient for responsive UI, a Canvas game loop, local persistence, audio, and AI-driven gameplay when the systems are kept modular inside one file.
Visual consistency matters as much as gameplay: responsive sizing, local artwork, coherent colors, readable HUD elements, and connected snake rendering make the experience feel intentional across all screens and game modes.
My final thought: Pencil Rush proves that a polished, mobile-friendly arcade game can be built as a lightweight single-file web application without sacrificing progression, variety, or personality.