Cloud Hop

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 bright, kid-friendly 2D endless side-scrolling runner called “Cloud Hop,” rendered in a responsive 960x540 canvas with a soft cartoon aesthetic. The camera is fixed side-on: the player stays near x=160 while the world scrolls left. Use a pale blue vertical-gradient sky, six slow-moving white fluffy clouds, a yellow sun near the upper-right, parallax green rounded hills, and scattered small trees with brown trunks and dark-green circular crowns. The lower portion is a grassy green field beginning around y=430, with a thin brown soil line and repeating darker-green grass tufts along its top edge.

The player is an auto-running cheerful cartoon child represented by a roughly 24px-radius round character. Draw a pink/red circular body, peach face, brown hair, black dot eyes that periodically blink, a small smile, blue shirt, yellow scarf trailing left, thin dark arms and legs, and purple shoes. The character continuously runs in place and uses simple squash/stretch and a subtle bob; jumping leaves white dust puffs on takeoff and pale dust on landing. Physics should use gravity around 0.58 and jump velocity around -13, with the character landing back on the ground. Controls: Space, Arrow Up, or mouse/touch/pointer press performs a jump; only allow jumping when not already airborne. Start lightweight Web Audio after the first interaction: synthesize a short upbeat two-note jump sound, point sound, hit sound, level-up chime, and a gentle repeating triangle/sine melody. Audio must not be required for play.

Make the game endless. Advance the score by 1 every update frame while alive, maintain a best score, and gradually increase horizontal speed from about 5 up to roughly 9.5, with additional small increases by level. Increase the level from 1 to a maximum of 9, advancing every 450 score points; play a chime and emit sparkles when it changes. Spawn ground obstacles at randomized intervals that become somewhat more frequent with higher levels, with a minimum interval around 48 frames. Obstacles move left at the current speed and are removed after leaving the screen. Randomize their width around 42–60px and height: some short around 34–52px, some tall around 56px or higher. Include exactly these visual obstacle types: an orange rounded box with a yellow horizontal highlight, a purple rounded toy/block with two white circular marks and a white straight smile, or a green three-lobed bush with a brown stem. Use circle-vs-rectangle collision; touching any obstacle ends the run, emits reddish dust, and plays a low hit sound.

Periodically spawn rotating yellow five-point stars in the air at random y positions roughly 110–290. Stars drift left slightly faster or slower than obstacles. If the player touches a star, add 35 points, remove it, play a point sound, and create white/yellow cross-shaped sparkle particles. Passing an obstacle also triggers a throttled point sound, but does not award a separate score beyond the continuously increasing score. Use small fading particle effects for dust and sparkles.

HUD and layout: keep the HTML document in Arabic/right-to-left presentation, with a compact translucent white rounded instruction panel over the upper-left/upper area showing the title “Cloud Hop” and Arabic instruction equivalent to “Jump — Space / ↑ / touch.” Inside the canvas, draw a translucent white rounded HUD box at (18,18), approximately 270x94, containing Arabic labels for score, best score, and level in dark navy. Keep HUD text out of the play area as much as possible. On game over, stop updating gameplay but continue rendering: place a dark translucent overlay over the canvas and a centered cream rounded dialog around 460x175, with Arabic text for “Game Over!”, a restart instruction saying to press Space or touch, and the final score and level. Pressing jump/tapping while game over resets score, level, speed, obstacles, stars, particles, and player state, then starts again.

Use a clean responsive presentation: center the canvas in the viewport, preserve the 16:9 aspect ratio, add a dark blue border, rounded corners, and a soft shadow; hide overflow. Expose window.getGameState() returning player, score, bestScore, speed, level, gameOver, obstacle timing, obstacles, particles, and stars, and window.setGameState(patch) allowing those values to be patched for testing, including player, score, speed, level, gameOver, obstacle arrays, particles, and stars.