Skin Bubble

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 top-down arcade collection game titled “Skin Bubble.” Use an HTML canvas that fills the viewport, with a responsive camera following the player through a bounded 1800×1100 world. The world has a dark navy-blue background (#1d3557) overlaid with very subtle thin grid lines every 80 pixels; the viewport background outside the world is an even darker navy. Keep the visual style minimal, clean, geometric, and flat with bright cyan, pink, and yellow accents.

The player is a cute cyan-blue circular bubble at the center of the world initially, radius 26, with a pale-cyan 5-pixel outline and two small dark navy eyes positioned like a simple face. Move it directly using WASD or arrow keys. Also support touch/mouse input through a virtual joystick in the lower-left: a dark circular base of radius 58 with a cyan outline, centered around (88, viewport height minus 92), and a cyan knob of radius 25 that moves within the base according to the pointer, clamped to a maximum displacement of 58 (visual knob displacement can be 34 times the normalized joystick direction). Only activate the joystick from the lower-left portion of the screen; release resets it to neutral. Normalize diagonal keyboard/joystick input so movement speed remains consistent. The bubble travels at 230 world pixels per second, is clamped to remain at least 45 pixels from each world edge, and the camera centers on it when possible while clamping camera scrolling to the world bounds.

Place one collectible coin at a random position on each spawn, with both coordinates at least 120 pixels from the world edges. Draw it as a gold/yellow circle of radius 18 with a pale yellow 5-pixel outline. When the player comes within 42 pixels of it, increase the coin counter by 1 and immediately respawn the coin at another random valid location. There is no attack mechanic.

Place eight fixed hazards in the world at these exact positions and radii: (250,220,r=30), (620,350,r=34), (1040,210,r=28), (1460,330,r=36), (360,820,r=35), (820,720,r=30), (1240,900,r=34), and (1580,700,r=30). Render each hazard as a bright pink rotated square/diamond: rotate a square by 45 degrees, fill it #ef476f, and give it a lighter pink #ff9bb2 outline about 4 pixels wide. If the player overlaps a hazard using a collision threshold of hazard radius plus 26, subtract one health point, start 1.25 seconds of invulnerability, and teleport/reset the player to the world center with zero velocity. During invulnerability, make the player blink between white and cyan. Start with 3 health. Health can reach zero, but there is no visible game-over screen or restart UI; continue rendering and movement as implemented.

Use a fixed HUD over the world in the upper-left: a translucent very-dark navy rectangle at (14,14) sized approximately 235×96. Show “Skin Bubble” in bold white system sans-serif text around 22px, then “Coins: N” in yellow around 18px, and “Health: ♥♥♥” in pink around 18px, with the number of heart symbols matching remaining health. In the lower-right, show the small light translucent instruction “WASD / arrows” around 14px. Keep HUD and controls screen-fixed rather than affected by camera movement. Make the canvas touch-action disabled so the virtual joystick works on mobile, and handle resizing/device pixel ratio cleanly while preserving the full-screen presentation.