Prototype Demo

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 responsive browser-based 2D canvas movement prototype titled "Prototype Demo". Use a full-viewport canvas that scales with the window and a dark atmospheric background: a vertical gradient from #2e3340 at the top to #1a1c22 at the bottom. In the center of the canvas, generate a single rectangular room. Give it an outer margin of at least 42 pixels or about 8% of the shorter viewport dimension, cap the room width and height at 800x400, center it in the viewport, and keep the player within an inset 30-pixel boundary inside the room. Render the room floor as a 32-pixel checker/tile pattern using alternating gray colors around #7c7d80 and #737478, with a thick dark #33363d border about 10 pixels wide.

Place a circular fountain at the exact center of the room. Draw a soft cyan radial glow around it, a gray circular basin/body, and a bright pale-blue ring inset near its edge. Size the fountain radius to roughly 8.5% of the smaller room dimension, with a minimum of 30 pixels. Add the canvas title text "Prototype Demo Room" in bold 24px Arial near the upper-left of the canvas at x=20, y=34.

The playable avatar is a simple masked prototype character represented in 2D from above: a dark/black outer circle about 18 pixels radius, a white face circle slightly above center, two tiny black eye dots, and a subtle translucent white outline ring around the avatar. Start the avatar below the fountain, centered horizontally at the fountain's x coordinate and about 70 pixels below the fountain radius. Movement speed is 260 pixels per second. Support normalized eight-directional movement with WASD and the arrow keys, prevent diagonal movement from being faster, and clamp the avatar position to the room's inner rectangular bounds. There are no enemies, collectibles, combat, scoring mechanics, countdown, jumping, or fountain collision; this is a simple room-layout and movement test.

Add mobile touch controls as a virtual joystick fixed at the bottom-left. The joystick should be a 132px translucent white circular pad with a subtle border, inset glow, and shadow; place a 54px white-to-pale-blue circular thumb in its center. On pointer/touch down and move, displace the thumb toward the pointer but cap displacement at 28% of the joystick width, convert the displacement to a normalized x/y movement vector, and clear it on pointer up or cancel. Touch input should take priority over keyboard input whenever its vector is nonzero. Keep the canvas and joystick touch behavior from scrolling the page.

Create a fixed, pointer-transparent HUD over the canvas. At the top, show two translucent dark rounded pills with thin light borders and blur: left and right aligned with 16px margins. The left label should be updated to "Room: Demo" and the right label should show the current canvas dimensions in the form "WIDTH×HEIGHT"; use bold white Arial text and subtle shadowing. Under them, show a translucent rounded instruction panel aligned to the upper-left, responsive to viewport width, with the exact text: "Walk with the joystick or WASD / arrow keys. R resets your position." Place a hidden rounded orange/yellow "Play Again" button at the bottom-right; it need not appear during normal play, but if implemented it should reset the avatar when pressed. Pressing the R key must immediately reset the player to the starting position and recenter/clear the joystick. Rebuild the room and clamp the player appropriately on window resize.

Run a requestAnimationFrame game loop with a capped frame delta (maximum 0.05 seconds), update movement, then redraw the room and avatar every frame. Optionally expose window.getGameState() returning player coordinates/speed, room geometry, and current keyboard/touch input, plus window.setGameState(patch) allowing player coordinates/speed, resetPlayer, and touch input to be changed for live testing.