Stack Tower

By (@joshcopy) ·

Stack Tower - image 1

always wanted to make a game, and did it easily with AI

Tech stack

  • ChatGPT

Prompt

STACK TOWER: full project build prompt
Build the complete, polished, ready-to-ship web game STACK TOWER in one go. Do not stop to ask for approval along the way and do not split it into stages for me. Read this whole brief, build the entire project, test it yourself, fix what you find, and hand it back finished. At the end, tell me plainly what you tested and what you could not test.

Context and constraints
Static files only: HTML, CSS, JavaScript. No build step, no framework, no external libraries, no backend, no accounts. It must work when index.html is opened from disk and on any static host.
One Google Font is allowed with a safe fallback. Everything else is code: CSS, canvas, WebAudio. No image or audio files.
Files: index.html (markup, CSS, UI, rendering), logic.js (all pure game logic, no DOM, loads in Node), share.js (canvas share card), test/logic.test.js (Node tests), and a _deploy folder at the end containing only what the live site needs.
Style for all text in the game and in comments: short, punchy, natural. Never use em dashes or en dashes anywhere.
The game
A one-tap tower builder. A block slides left and right above the tower. Tap to drop it. Whatever part overlaps the block below stays, and any overhang is sliced off and falls away. The tower gets narrower with every sloppy drop. If a block misses the tower entirely, the game ends. The score is how many floors you stacked.

Core rules
The tower starts with a wide base block. The moving block has the same width as the top block of the tower.
The moving block slides horizontally across the screen, bouncing between edges. It alternates entering from the left and the right each floor (seeded for Daily).
Drop: the overlap with the block below becomes the new top block. The overhang is cut off and falls with simple physics, spinning and fading.
Perfect drop: if the offset is within a small tolerance (about 4 percent of the block width, minimum 3 pixels), snap it exactly into place, keep the full width, and flash a ring. Perfect streak: after 3 perfects in a row the block grows back a little (about 10 percent of the base width per perfect, up to the original base width). Show the streak.
Game over: no overlap at all. The last block falls, the tower holds, and the camera zooms out to show the whole tower.
Speed ramp: the slide speed increases gently with each floor and plateaus around floor 60 so it stays playable. It must always feel fair, never random.
Scoring: 1 point per floor, plus a bonus of 2 per perfect drop (scaling to 3 and 4 for long perfect streaks). Show floors and score clearly.
Controls
One input: tap or click anywhere, or press Space. Use pointerdown, not click, for the lowest latency. No double-tap zoom, no scroll, no accidental text selection.
Ignore repeated keydown events while the key is held.
Modes
Daily tower: the entry side and a small speed offset come from a seed based on the UTC date, so everyone builds the same tower that day. Label it "Daily" and keep a separate personal best for it.
Free play: a random seed each time.
Toggle between them on the title screen.
Logic (logic.js, pure and tested)
Put every rule in pure functions that run in Node:

A seeded RNG (mulberry32 or similar) and a seed-from-date function.
drop(topBlock, movingBlock) returns { outcome: 'perfect' | 'trim' | 'miss', newTop, cutoff } with exact geometry for the kept part and the sliced part (position and width), correct for overhang on either side.
speedFor(floor, baseSpeed) for the ramp and plateau.
scoreFor(outcome, perfectStreak) and the block-regrowth rule.
rank(floors) returns a title and a short line: under 10 "Wobbly", 10 to 24 "Builder", 25 to 49 "Architect", 50 to 99 "Skyline", 100 and up "Sky Piercer". Tune the thresholds so a decent first try lands around Builder.
Stats: floors, perfects, best perfect streak, accuracy (perfects divided by drops).
node test/logic.test.js must verify: exact overlap geometry for overhang on the left, the right and both extremes, the perfect tolerance boundary, regrowth never exceeding the base width, the miss case, speed ramp and plateau, scoring, determinism by seed, and rank boundaries. Print a clear pass or fail summary and run it after every change.

Look and feel (this is where votes are won)
Rendering: a canvas with a faux 3D look. Each block is drawn with a lit top face and darker side faces (a shallow isometric or front-on style with a visible depth edge), soft shadows, and rounded or beveled edges. It should look like polished toy blocks, not flat rectangles.
Color: block hue shifts smoothly by floor along a pleasing gradient, so the tower becomes a rainbow. Keep saturation and lightness consistent so every block is readable.
Camera: smoothly scrolls up as the tower grows so the active block stays in the same area of the screen. On game over, ease out to show the whole tower.
Background by height: a gradient that changes as you climb: sunrise, day, dusk, then night with stars and a faint moon, then deep space with drifting particles beyond floor 60. Smooth cross-fades, no hard cuts.
Juice: a squash-and-settle animation on each landing, a dust puff, floating "+1" or "PERFECT +2" text, a bright ring on perfects that expands and fades, screen shake that is tiny on trim and none on perfect, and falling offcuts that spin and drop away. On a new personal best, a confetti burst.
Particles: use one canvas and a small pool. Keep it smooth.
Title screen: the logo "STACK TOWER" with letters stacked like blocks and a gentle idle block sliding in the background, the one-line rule ("Tap to drop. Stack it high."), the Daily and Free play toggle, a big Start button, and your best score. On the first ever play (remembered in localStorage) show a quick one-tap tutorial hint over the first drop.
End screen: the tower stays visible behind it. Show floors (count up), the rank title, perfects, best perfect streak, accuracy, personal best with a "NEW BEST" flourish, and the buttons.
Respect prefers-reduced-motion by removing shake, confetti and parallax. Add a toggle for sound and one for haptics.
Audio (all WebAudio, no files)
Each landing plays a soft block-thud plus a note. On perfects the note climbs a pentatonic ladder with the streak so it sounds musical and satisfying. Trims play a lower, duller note.
A whoosh and a crumble for the falling offcut, and a soft descending tone on game over.
A fanfare on a new personal best.
A mute button, remembered. Audio starts only after the first tap and must work on iOS Safari.
Vibrate briefly on drop if the device supports it and haptics are on.
Share, challenge and replay
Result card (share.js): a canvas-rendered image (1080x1350 and 1200x630) in the game's style, with a small drawing of the player's finished tower (use the real block positions and colors), the floors, the rank, perfects, the mode (Daily with the date, or Free play) and the URL. Buttons: Save image, Copy result text, Play again.
Copy text format (short, made for X): Stack Tower: 47 floors, Architect. 18 perfects, best streak 7. Can you build higher? <url>
Challenge link: ?beat=<floors> shows a banner on the title screen ("Beat 47 floors") and, at the end, says whether you beat it. The Copy text button includes this link.
Replay speed: from the end screen to a new tower in one tap. No reload, no menu detour.
Quality, mobile and performance
Works from 360px width up with no horizontal scroll, in portrait and landscape. Handle device pixel ratio so it stays sharp without being heavy (cap at 2).
60 fps on a mid-range phone. Use delta-time based movement so speed is identical at 60 Hz and 120 Hz.
No console errors. Pause the game when the tab is hidden and resume safely.
Everything stored in localStorage is wrapped in try and catch, and the game works without it.
Open Graph and Twitter tags in the head with a good title and description, and a small inline SVG favicon.
Finish line: deliver all of this
The complete working game in the project folder, all tests passing, checked at 360px, 768px and desktop widths with no console errors.
A _deploy folder with only the files the live site needs, and the exact command to deploy it to Vercel (npx vercel --prod from inside _deploy, creating a new project named stack-tower). Do not try to log in or deploy yourself.
A Prompted post pack, ready to paste: a punchy title under 70 characters, a short caption (what it is, one surprising detail about making it, how to play), the tools list, a "prompt behind it" version of this brief cut to under about 1,500 characters plus 3 realistic follow-up prompts, and a 15 to 20 second screen-recording shot list.
A short honest report: what you tested and the results, and what you could not verify (for example real-phone feel and sound).
Working rules
Do not add features outside this brief without asking. If time is tight, cut breadth, never quality.
Do not claim anything works until you have run it. If you cannot see or hear something, say so.
Keep the game fun above all. If a drop feels unfair, a tolerance feels off or the speed feels wrong when you play it, fix it.

Explore more on Prompted

Loading