Game

Prompt

Build a polished, single-file HTML game called “How Heavy Is It?” inspired by visual comparison games like Size It Up, but focused entirely on weight. The core mechanic should be simple: show two large SVG illustrations side by side. One object is the known reference, and the other is the mystery object. Underneath, the player must answer: “How many [reference object]s weigh the same as 1 [mystery object]?” For example: “How many Bowling Balls equal 1 Cow?” “How many House Cats equal 1 Motorcycle?” “How many Elephants equal 1 Boeing 747?” “How many Smartphones equal 1 Great Dane?” The player should not type a weight directly. Instead, give them a large interactive quantity selector below the objects. It should have a horizontal logarithmic-feeling slider, a large live number display, minus and plus buttons, and optional text input for exact values. The selector should support very small and very large ratios, such as 0.01 up to 1,000,000. Use the actual real-world average weight of each object internally. The answer is calculated as: mysteryWeight / referenceWeight Do not show either object’s real weight before the player answers. When the player presses “LOCK IN”, freeze their guess and reveal: their guess, the correct ratio, the real average weight of both objects, percentage error, points earned, a visual comparison showing how close they were. For example: YOUR GUESS 31.5 cats ACTUAL 34.8 cats Cat: 4.5 kg Motorcycle: 156.5 kg ERROR: 9.5% SCORE: 914 Scoring should reward proportional accuracy, not raw numerical difference. Being 2× too high should be treated similarly to being 2× too low. Use logarithmic ratio error internally so guesses across wildly different scales are scored fairly. Create a five-round game. At the top show: ROUND 2 / 5 SCORE 1824 After the fifth round, show a results screen with total score, average percentage error, best round, worst round, and a “Play Again” button. The SVG objects are extremely important. Do not use emoji, external images, image URLs, icon fonts, or raster images. Every object must be represented by an original inline SVG silhouette or simplified vector illustration. The SVG should still make the object instantly recognisable. Use clean solid shapes and subtle internal detail rather than generic rectangles. Include at least 50 objects across very different weight classes. Include things such as: paperclip AA battery smartphone shoe laptop bowling ball dumbbell house cat dachshund Great Dane human adult bicycle motorcycle washing machine vending machine grand piano cow horse polar bear small car SUV Formula 1 car pickup truck forklift rhinoceros hippopotamus elephant shipping container school bus excavator tank fire truck Tyrannosaurus rex helicopter fighter jet passenger jet Boeing 747 blue whale locomotive yacht cargo ship Statue of Liberty Saturn V rocket Add sensible additional objects until there are at least 50. Store each object in JavaScript with data structured roughly like: { name: "House Cat", plural: "House Cats", weightKg: 4.5, category: "animal", svg: ... } Use realistic approximate average weights. The purpose is a fun intuition game, so one representative value per object is fine. After an answer is revealed, label the values clearly as approximate averages. Round selection should deliberately create interesting comparisons rather than completely random pairings. Avoid boring ratios that are almost exactly 1:1 too often. Prefer answers ranging roughly from 2× to 10,000×, but occasionally include weird sub-1 ratios where the reference object is heavier than the target. Do not repeatedly use the same objects within one five-round session. Add category combinations that produce funny or surprising comparisons, such as: animals vs vehicles household items vs animals tiny objects vs huge machines humans vs dinosaurs vehicles vs aircraft animals vs famous structures Visually, make the game feel premium and modern. Use a nearly-black navy background, subtle grid inside the comparison area, off-white text, muted secondary text, bright coral/red accent, thin dark borders, rounded corners, soft shadows, and restrained animations. Make it feel like a real polished web game rather than a school project. Layout: Top: HOW HEAVY IS IT? “Build an intuition for the weight of things.” Then: ROUND 1 / 5 SCORE 0 Main comparison panel: [ large SVG reference ] [ large SVG mystery ] REFERENCE House Cat MYSTERY Motorcycle Then a question card: HOW MANY HOUSE CATS ONE MOTORCYCLE? Below this, show the interactive quantity control. Large centered value: 34.0 Label: HOUSE CATS Slider beneath it. [-] [+] Then the large coral: LOCK IN After locking in, smoothly reveal the actual answer and visually animate the guessed ratio toward the real ratio. Include a horizontal error gauge with “Perfect” in the middle and increasingly worse regions toward the sides. Give encouraging result labels based purely on accuracy, such as: PERFECT INCREDIBLE VERY CLOSE CLOSE NOT BAD WAY OFF Add subtle sound effects using the Web Audio API only. No external audio files. Include sounds for changing the selector, locking an answer, a very accurate answer, and moving to the next round. Include a sound toggle. Controls must work with mouse, touch, and keyboard. Arrow keys should adjust the guess. Shift + Arrow should make larger changes. Enter should lock in. Space should continue to the next round after the reveal. Make it responsive. On desktop the SVG objects sit side-by-side. On a narrow phone layout, keep them side-by-side if possible, but shrink appropriately. The number selector and buttons should be easy to tap. Important: the visual size of the SVG should NOT indicate the objects’ weights. Keep both drawings displayed at comparable visual sizes so the player has to rely on knowledge rather than visual scale. Add a small expandable “How it works” section explaining that the game compares approximate real-world mass, not physical dimensions. Use no libraries, frameworks, external fonts, external images, APIs, or CDNs. Everything must be contained in ONE standalone .html file with inline HTML, CSS, JavaScript, SVG, and Web Audio. The completed file must run by double-clicking it locally with no server. Do not give me a mockup, partial implementation, pseudo-code, or explanation. Generate the entire finished HTML game with all gameplay systems and at least 50 complete SVG objects.

A system prompt was added to support web rendering