Clay Merge

Prompt

CLAY MERGE Definition of done

Build the whole game described below in one pass. No check-ins, no drafts to approve. Work through the list, tick every box yourself by actually running things, and hand it back finished with an honest note on anything you couldn't verify.

The idea in a sentence: a merge-the-numbers puzzle where every number is a squishy, blinking blob of modeling clay.

A. The world it lives in
[ ] The whole game looks like a claymation set, photographed under warm studio light. Soft, thick, hand-pressed, slightly imperfect. Not glossy, not neon, not flat vector. [ ] Palette (soft but saturated, matte clay): - Table: a pale sage green clay slab with faint tool marks. - Board: a deep teal-grey clay tray with rounded wells. - Tile colors by value: 2 cream #F6E7C9, 4 butter #F9D976, 8 peach #F6A97A, 16 coral #EE7A6B, 32 rose #E1658F, 64 berry #B94F8F, 128 lilac #9C84D6, 256 periwinkle #6F8FE8, 512 sky #59B7E8, 1024 mint #62D3A4, 2048 sunshine gold #F4B73A with a tiny crown. [ ] Every surface has clay texture, made in code: fine grain, a few fingerprint swirls, small pinch marks and uneven edges. Draw the tiles with soft inner shadows and gentle highlights so each looks like a thick rounded lump, with a darker belly and a lighter top. No hard outlines. [ ] Numbers are pressed into the clay, not printed on top: a chunky rounded typeface (try "Fredoka" or "Baloo 2", with a system fallback) rendered with an inner shadow and a faint highlight on the lower edge, as if stamped by a thumb. [ ] Every tile has a face. Two small black bead eyes with white highlight dots, and a tiny mouth. Eyes blink at random intervals (every 2 to 5 seconds, each tile on its own timing). Faces get more excited as numbers get bigger (small smile, bigger smile, open happy mouth, star eyes at 1024, crown and a grin at 2048). [ ] The title is built from clay letters of different colors, slightly wonky, each with its own face on the "O" and "A".

B. The rules of the game
[ ] A 4 by 4 board. Slide all tiles in one direction (up, down, left or right) as far as they go. Two equal tiles that collide merge into one tile of double the value. A tile can merge only once per move, and merging resolves in the direction of travel (so [2,2,2,2] moving left gives [4,4,0,0], and [4,2,2,0] gives [4,4,0,0]). [ ] After every move that changed the board, a new tile appears in a random empty cell: a 2 (90 percent of the time) or a 4 (10 percent). A move that changes nothing is not a move and spawns nothing. [ ] Start with two tiles. [ ] Score goes up by the value of every merged tile created, as in the classic game. Show the score and the best score. [ ] Win: reaching a 2048 tile shows a celebration and a choice: "Keep squishing" (carry on, the win is only celebrated once) or "New game". [ ] Game over: no empty cell and no possible merge in any direction. Detect it right after the spawn. [ ] Wild lump: about once every 40 spawns, instead of a 2 or 4, a rainbow-swirled clay lump appears that merges with any tile and takes its value doubled. It looks different (a swirl of several clay colors) so it can't be confused with a normal tile. [ ] Undo: 3 undos per game (shown as three little clay pins), each reverting the last move exactly, including the spawn and score. A new game restores all three. [ ] Modes (choose on the title screen): - Classic: 4 by 4, random spawns. - Roomy: 5 by 5, the same rules, a more relaxed game. Its own best score. - Daily: 4 by 4 where the spawn positions and values come from a seed based on the UTC date plus the move count, so everyone who plays the same moves sees the same tiles. Its own best score and a daily result. [ ] Ranks by the highest tile reached: under 128 "Pebble", 128 "Lump", 256 "Blob", 512 "Mound", 1024 "Boulder", 2048 and over "Clay Titan". Show the rank on the game over screen.

C. How it moves (this is the heart of it)
[ ] Squash and stretch on everything. When tiles slide, they stretch slightly along the direction of travel and squash against the wall or the tile they hit, then settle back with a small springy overshoot. About 140 ms to slide, and a settle of about 120 ms. [ ] Merges pop: the two tiles blob together, the new tile jiggles (a damped squash and stretch), and a small ring of clay crumbs puffs out. Bigger merges mean bigger pops. [ ] New tiles don't fade in. They grow from a small ball in their cell with a bouncy overshoot. [ ] The faces react: eyes squint on impact, widen on a merge, and look toward the direction of travel while sliding. [ ] Everything is animated using delta time, never layout jumps, and holds 60 fps on a mid-range phone. Keep input responsive by queuing at most one pending move during an animation. [ ] Respect prefers-reduced-motion: drop the squash and the crumbs, keep the slide short.

D. Controls
[ ] Swipe anywhere on the board (touch and mouse drag) with a sensible minimum distance. Prevent page scrolling and pull-to-refresh while swiping the board. Respond as soon as the swipe passes the threshold, not when the finger lifts. [ ] Arrow keys and WASD on a keyboard. Z or Backspace for undo. N for a new game. [ ] No double-tap zoom and no accidental text selection. Buttons for New game, Undo and Menu are large and close to the board on phones.

E. Sound (synthesized, no files)
[ ] All audio comes from WebAudio. The sound is squishy foley: wet pops, soft thumps and boings. [ ] Slide: a very soft squelch (filtered noise with a quick downward sweep), quieter for short moves. [ ] Merge: a rounded "bloop" whose pitch climbs a pentatonic scale with the tile value, so bigger tiles sound higher and happier. Chain several merges in a move and they play as a quick run. [ ] Spawn: a tiny pop. Undo: a reversed squish. Wild lump: a funny wobbly slide-whistle. Win: a bright chorus of bloops. Game over: a sad, slow descending squelch. [ ] A mute button, remembered. Audio starts only after the first input and works on iOS Safari. A short vibration on a big merge if the device supports it, with a toggle.

F. Code shape
[ ] Static files only. No build step, no libraries, no backend, no accounts. Works from a double-clicked index.html and on any static host. No image or audio files: clay textures, faces and sounds are all created in code. One Google Font is fine with a fallback. [ ] Files: - index.html: structure, styles, screens. - rules.js: pure functions, no DOM, loadable in Node: the seeded random generator, the date seed, slide(board, direction) returning the new board, score gained and the list of merges and movements (so the UI can animate them), spawn logic, the wild lump rule, game over and win detection, the undo stack, and ranks. - clay.js: procedural clay textures, tile drawing, the faces and the squash and stretch animation. - foley.js: the audio. - plinth.js: the share image. - test/rules.test.js: Node tests. [ ] Draw the board on a canvas (or with transformed elements) in a way that stays crisp at device pixel ratio 2 and avoids layout thrash.

G. Tests that must pass
[ ] A table of slide cases in all four directions, including [2,2,2,2], [2,2,4,0], [4,2,2,0], [2,0,2,4], [2,4,8,16] (no change), a full board with no merge, and a full board with a merge. [ ] No tile ever merges twice in one move, over thousands of random boards. [ ] A move that changes nothing never spawns a tile and is not counted. [ ] Spawns happen only in empty cells, with the 90/10 split within tolerance over thousands of spawns, and a wild lump about every 40. [ ] Score equals the sum of merged values, exactly. [ ] Undo restores board, score and the spawn state exactly, and never goes beyond 3. [ ] Win and game over are detected correctly, including a board that is full but still has a merge available. [ ] Daily mode is deterministic: the same date and the same moves give the same tiles, and a different date gives different ones. [ ] Rank boundaries are right. [ ] Run all tests after every change. Also have a random-move bot play thousands of games, and print the score distribution so you can sanity check the difficulty.

H. Screens and sharing
[ ] Title: wonky clay letters, a row of little faces that blink and follow the cursor, mode buttons for Classic, Roomy and Daily, a big Start button, and your best score on a clay badge. First time only, a one-line hint: "Swipe to slide. Matching blobs merge." [ ] Game over: the board stays visible behind a soft clay overlay, with the rank, the score, the biggest tile, the number of moves, and the buttons. [ ] Share image: drawn on a canvas as a museum exhibit: a spotlighted clay sculpture of the final board (the real tiles, with faces) standing on a small plinth, with a printed placard below it reading "Exhibit No. : ", the score, the highest tile and the date. Warm studio light, a soft vignette, a gallery wall. Output 1080 by 1350 and 1200 by 630. Buttons: Save image, Copy result text, Play again. [ ] Result text: Clay Merge: made a 512 Mound, 6,420 pts in 238 moves. Can you out-squish me? <link> [ ] Challenge link: ?mode=daily opens the daily, and ?beat=<score> shows a "Beat 6,420" badge. [ ] Play again restarts in one tap, with no reload.

I. The finishing details
[ ] Works from 360 px wide and up, portrait and landscape, with no horizontal scroll. The board is as large as the screen allows, and the tiles keep readable numbers even in Roomy mode. [ ] No console errors. Pause when the tab is hidden. The best scores and settings are stored in localStorage inside try and catch, and the game works without it. [ ] Page title, Open Graph and Twitter tags, and a tiny inline SVG favicon of a smiling cream clay tile. [ ] Every word in the game is short, warm and friendly. Never use em dashes or en dashes anywhere, including comments.

J. What to hand back
[ ] The finished game in its folder, all tests passing, checked at 360, 768 and desktop widths with no console errors. [ ] A _deploy folder with only what the live site needs, plus the exact command to deploy it to Vercel from inside that folder as a new project named clay-merge. Don't log in or deploy it yourself. [ ] A short write-up for sharing: a punchy title under 70 characters, a caption of a few lines, the tools list, this brief condensed to under about 1,500 characters, and three believable follow-up prompts. [ ] An honest report: what you tested and the results, and what you couldn't verify (real-phone swipe feel, how the squish sounds, and how the claymation look reads on a real screen).

Rules of the road: no extras nobody asked for. If time runs short, cut breadth and never polish. Don't tick a box you haven't run. And if the game ever looks like a flat app instead of lumps of clay, fix that before anything else.