Gnome Goes Fishing

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a single-screen 2D-style fishing game titled “Gnome Goes Fishing,” rendered with simple flat geometric shapes in Three.js (orthographic camera, no textures or 3D lighting). Keep the world at a wide 32-by-18 logical aspect and scale it responsively to the browser. Use a bright sky-blue background. The upper portion is sky with several soft white cloud clusters drifting horizontally, a yellow sun/glow toward the left, and simple green distant shoreline hills at the waterline. The lake begins around the upper-middle of the scene: draw a thin pale sandy shoreline band, then a large turquoise-blue water area extending to the bottom. Add short pale horizontal wave streaks and many small translucent bubbles that drift upward and respawn at the bottom.

Place a small stylized gnome in a simple brown rowboat near the surface. The boat has a trapezoidal brown hull and a narrow golden-yellow trim. The gnome is made of flat shapes: a green oval body, cream oval beard, peach circular nose, tall red triangular pointed hat, and a small white pom-pom. Give him a brown fishing rod angled up and outward, with a yellow tip/bobber. The boat gently bobs vertically. The player moves the gnome/boat horizontally across the lake, clamped within the screen; the boat mirrors horizontally to face the movement direction. Support ArrowLeft/ArrowRight and A/D keyboard movement, plus large touch/mouse hold buttons at the bottom-left and bottom-center/right labeled left and right arrows.

Fill the underwater area with 100 colorful flat cartoon fish moving continuously left or right at different speeds and depths. Each fish consists of an oval body, triangular tail, translucent white triangular fin, and a small dark eye. Use ordinary colors such as orange, cyan, green, coral, lime, and blue. About 12% are rare “glitter fish,” visibly larger and using gold, pink, bright green, or purple colors; catching one is worth 3 score instead of 1. Fish gently wobble vertically while swimming, wrap around from one side to the other, and stay visible until caught. Add occasional bubbles and wave streaks for motion.

Implement the core timing fishing mechanic. The game starts with score 0 and line state Ready. Press Space or tap the large bottom-right CAST button to cast from the rod; the hook/bobber appears and the line extends toward a randomly selected underwater depth between shallow and deep. A player can also click/tap in the water while Ready to cast toward that clicked vertical depth (clamped safely below the surface); the hook x-position is just in front of the gnome in the direction he faces. During Casting, animate the line/hook down to its target, then enter Waiting. While Waiting, the player must watch for a bite. After a randomized delay, find the nearest uncaught fish to the hook; if it is within a generous radius, enter BITE, pulse/bounce the hook vertically, and pull that fish toward the hook. Show the message “BITE! Press Space or tap REEL now!” At that exact bite stage, Space or the REEL button must start Reeling. Reeling gradually raises the hook back to the surface while pulling the fish toward it; rare fish reel in more slowly. Once the reel completes, award 1 or 3 fish, hide the caught fish, return to Ready, and show a caught-fish message. If the player reels during Waiting before a bite, cancel the cast, scatter/leave the fish moving, return to Ready, and show “Too soon — the fish scattered. Cast again!” Ignore reel input during Casting.

The objective is to reach 100 fish score. On reaching 100, stop normal play and display: “You caught 100 fish! The gnome is a lake legend. Press R to play again.” Press R at any time to reset score to zero, restore all caught fish, reset the fishing line and return to Ready. Show contextual instructions initially: “Move the gnome, cast your line, then reel when a fish bites.” After temporary messages expire, when ready show “Cast near moving fish. Rare glitter fish count as 3!”

Build a fixed overlay HUD above the canvas. Across the top, show three rounded translucent white pills with dark navy bold text: “Fish: 0 / 100” (updating with score), “Line: Ready/ Casting/ Waiting.../ BITE!/ Reeling” (updating state), and depth classification based on hook depth: “Depth: Shallows” near the surface, “Depth: Middle,” or “Depth: Deep.” Under the top bar, show a wide centered rounded translucent white instruction/message panel. At the bottom center above the controls, show a translucent rounded hint reading “Keyboard: ← → move · Space cast/reel · R reset.” Put large cream/yellow rounded buttons with dark text and a gold drop shadow at the bottom: left arrow and right arrow movement controls, and a larger yellow button labeled CAST when Ready, REEL when Waiting or BITE, and WAIT during Casting/Reeling. Make the interface responsive for narrow mobile screens, preserve touch interaction, prevent page scrolling, and use a friendly playful high-contrast cartoon palette matching the screenshot.”