The-Linting-Toddler

The Linting Toddler Project Report

1. The Concept

The Linting Toddler is a lightweight, web-based arcade cleanup game where the player tries to save a software build while a toddler creates chaos on a code screen. The core joke is simple: code is breaking, the toddler is making a mess, and the player must quickly choose TAP, DRAG, or WIPE actions to clean the right mistakes before build health drops. I chose this idea because it is easy to understand even for non-programmers, but still has a funny developer-parent theme. The goal was not to make a serious coding game. The goal was to make a fast, visual, premium-feeling browser game where code is mostly flavor and the real gameplay is quick reaction and cleanup.

1. The Stack

The Stack: HTML5 Canvas, Vanilla CSS, and JavaScript. The project is built as a single-page browser game in index.html, with generated PNG artwork assets stored in assets/generated. The game uses canvas rendering for the home screen, gameplay, menus, effects, theme tinting, hitboxes, and animation. The AI Assist: ChatGPT helped shape the original product idea, target user, and planning checklist. OpenAI Codex handled the implementation phase, including gameplay logic, UI rendering, asset integration, animation, sound effects, themes, menu screens, and repeated QA fixes based on screenshots.

1. The 1 Day Sprint

Morning (Hours 1-3): We started by defining the game idea and target user. The target became casual web players, including people who do not know how to code. The design direction was set around a premium 3D cartoon arcade style: cozy night bedroom, glowing monitor, cute toddler, glossy buttons, and simple actions. We also clarified the planning checklist: reference game, target user, reason to play, reason to continue, core value, and tester feedback. Afternoon (Hours 4-6): The coding phase focused on building the actual playable canvas game. Codex implemented the main home screen, gameplay screen, score/build/time HUD, action buttons, power-ups, levels 1-20, generated artwork assets, PNG conversion, sound effects, background music, and a short intro before gameplay. This phase also exposed the biggest problem: the UI kept becoming messy when dynamic canvas elements were layered on top of reference artwork. The Finish Line (Hour 7-8): The last stretch became heavy UI/UX repair. We fixed clipped buttons, bad shadows, oversized overlays, messy gameplay power buttons, black sidebars, weak home animation, incomplete theme screen, and a code cleanup board that looked like a small pasted book inside the monitor. The final sprint added multiple selectable themes, saved theme state, wider animated background art, cleaner menu screens, and better gameplay layout rules.

1. The Roadblocks

Roadblocks: The biggest roadblock was visual consistency. The reference images looked premium, but recreating that same feeling inside a live canvas game was difficult. Every time new dynamic UI was added, it risked covering, duplicating, or fighting the artwork underneath. The second roadblock was layering. The game uses full reference-style image assets as the base, then draws live text, code, mess icons, effects, hitboxes, and buttons on top. This made the game fast to build visually, but it also created problems: power-up icons duplicated, button text clipped, the code board looked pasted on, and gameplay labels overlapped the level badge. The third roadblock was scope. The project grew from a simple concept into a premium arcade interface with sound, intro flow, 20 levels, themes, menus, animations, responsive background, and many UI states. That made small fixes risky because one visual change could break another screen.

1. Key Takeaways

What worked best? The concept and visual direction. The game idea is funny, clear, and easy to explain. The premium toddler/code chaos theme gives the project personality, and the simple TAP, DRAG, WIPE actions make it playable for non-coders. What worked worst? UI polish through repeated overlay fixes. The hardest part was not the gameplay logic. It was making the live canvas UI sit cleanly on top of generated artwork without looking messy, duplicated, or cut off. My final thought: If I had one more day, I would split the reference artwork into cleaner separate layers: background, monitor frame, toddler, buttons, HUD, and props. That would make animation and layout much easier. If I could redo the project, I would generate each UI component as its own transparent PNG from the start instead of relying so heavily on full-screen reference images.