Guess the Price

Ten products, ten rounds

Guess the Price is a ten-round game show with nobody hosting it. You get a photo of a product, a plain title like "Robot Vacuum (Self-Emptying)" or "Premium Air Fryer", and one box to type a number into. Hit Guess and the card tells you how wrong you were.

There are ten products in the deck and ten rounds in a game. The picker filters out anything it has already shown, so you see all ten every time, just in a different order. No difficulty curve, no shop, no unlocks. The whole thing is over in a couple of minutes.

The subtitle just describes the kind of product catalogue used. I typed every price in by hand, so treat them as rough list prices rather than live ones.

Score and accuracy are not the same number

Two numbers get tracked and they measure different things.

Score is coarse. An exact match to the cent is 100 points and the word BULLSEYE. Within 10% is 50. Within 20% is 20. Everything else is zero, with no partial credit. A perfect game is 1000.

Accuracy is the smooth version: 100 minus how far off you were as a percentage, floored at zero, averaged over the ten rounds and printed to one decimal place. So the $1,599 laptop guessed at $2,000 is 25.1% off. Nothing on the scoreboard, 74.9% accuracy for that round.

The leaderboard uses both. It sorts on score, breaks ties on accuracy, keeps the top ten and stores the lot in localStorage under guessPriceLeaderboard. It is your browser's leaderboard and nobody else's. Clear your site data and it is gone.

One Enter key doing two jobs

The part that took longest is invisible. Enter has two jobs: submit a guess while the input is showing, and advance to the next item while the result is showing. It also has to keep out of the way on the game-over screen, where a name field, a Save button and a Play Again button all want Enter for themselves.

The obvious approach is a handler on the input and another on the Next button, and the risk there is one keypress doing both jobs in the same tick, submitting a guess and instantly skipping past its own result. So it ended up as a single keydown listener on the document with three guards: bail if focus is on the name input or either of the end-screen buttons, bail if the game area is hidden, otherwise look at whether the feedback panel is visible and pick one job.

The price field re-focuses itself at the start of each round, so a fast game is type, Enter, Enter, type, Enter, Enter. You never touch the mouse.

Where the pictures come from

All ten images now ship with the game. Two are PNGs. A smart speaker and a pair of wireless earbuds, and the other eight are SVGs drawn for this project: an e-reader, an air fryer, a handheld console, headphones, a mouse, a laptop, a robot vacuum and a streaming stick. Nothing is fetched at load time, so the game makes no third-party requests at all.

It used to work the other way. Those eight came from loremflickr, which hands back a keyword-matched photo rather than an actual product shot. Ask it for a vacuum and you do get a vacuum, but you get somebody's vacuum, in somebody's hallway. That was the charitable version. Because the photo is chosen at random on every load, what you actually get is whatever a stranger uploaded under that tag, and at least once that was a nude figure wrapped in plastic, credited to a named photographer under a NonCommercial licence. On a page carrying ads, that is three separate problems in one image.

There is no keyword fix for a random draw, so the whole mechanism had to go. The eight SVGs are about 36 KB together, which is less than a single one of those photos, and they render identically every time. Which matters more than it sounds for a guessing game, where a picture that changes between plays quietly changes the puzzle. The spinner and the "Image Unavailable" fallback are still there for the two PNGs, and the placeholder is still an inline SVG data URI rather than a file, so it cannot fail the same way.

Confetti budgets, and what to try

The confetti is tiered deliberately. A within-20% win drops 45 pieces, an exact hit drops 90, and finishing all ten rounds drops 120. Each piece picks one of five colours, a horizontal drift of up to 100px either way, a fall lasting between 1.8 and 3.4 seconds, and a 40% chance of being a circle instead of a rectangle. They remove themselves on animationend rather than accumulating in the DOM. If your system asks for reduced motion, the launcher checks the media query and returns before building anything, and the CSS hides the pieces as well.

Things worth trying: guess $1 on the laptop and watch what a 99.9% miss does to your average. Or aim only for the 20% band, which is easier than it sounds and still lands you 200 points with a respectable accuracy figure. The score that is actually hard is 1000, because it wants ten exact prices to the cent, and one of the ten ends in .95.