How to Build an Interactive 1990s-Style Virtual Pet Game in the Browser Using Claude 3.5 Sonnet

The Charm of the LCD Keychain

In 1997, millions of school children were united by a single, terrifying responsibility: keeping a tiny cluster of monochrome LCD pixels alive during double history. The virtual pet craze was a masterclass in minimalist design. With just three buttons, a low-resolution grid, and a handful of state loops (hunger, discipline, sleep, and waste), these devices created surprisingly deep emotional connections.

While we cannot easily manufacture custom plastic injection-moulded shells, we can absolutely build an incredibly authentic, interactive 1990s virtual pet game directly in the browser. Using Claude, we can write the entire application—complete with pixel art, game state machine, and a nostalgic CRT monitor effect—in a single, self-contained HTML file. No complex build pipelines, no Node modules. Just pure retro-engineering.

Let’s dive into how to prompt and build a digital desktop companion, understanding what makes our pixelated companion tick under the hood.

Step 1: Architecting the Pet’s State Machine

Before we start writing code, we need to design the logic of our pet. A virtual pet is essentially a finite state machine. The pet has a pool of stats (Hunger, Happiness, Energy, Hygiene) that deplete over time. If they hit zero, the pet changes its visual state (from "Happy" to "Sick" or "Sleeping") and eventually triggers the "Game Over" state.

We want Claude to generate clean, readable JavaScript that manages this cycle using a standard interval timer. To ensure we get a robust structure, we will use a highly specific system prompt.

Open up Claude 3.5 Sonnet and feed it the baseline architectural prompt. If you need assistance writing precise prompts, you can always use our prompt builder for clean structure.

> "I want to build an interactive, single-file HTML virtual pet game inspired by 1990s Tamagotchi devices. The UI must look like a physical plastic handheld toy with a small, square LCD screen. Use Tailwind CSS for styling. The core game logic must run on a JavaScript interval that updates every 5 seconds, decreasing Hunger, Happiness, and Energy. Include buttons for Feed, Play, Clean, and Sleep. Please write a clean, well-commented ES6 class that manages the pet's state, UI updates, and retro sound effects using the Web Audio API."

Claude's default generation will typically use its interactive preview (Artifacts) to show you the working game instantly. If you run into any generation limits, check out our Claude troubleshooting hub.

Step 2: Styling the 90s LCD Aesthetic

To make this feel genuine, the visual design is critical. A modern, flat white UI will completely ruin the illusion. We want a greenish-grey, low-contrast LCD background, a glass glare effect, a rounded plastic device shell with bright primary colours, and physical-looking buttons that press down when clicked.

In your follow-up prompt, instruct Claude to style the viewport with these retro parameters:

• The Screen: A background of #8f9779 (that classic, murky Game Boy green-grey) with dark charcoal pixels (#2b2b2b).
• The Scanlines: A subtle CSS linear gradient overlay to mimic the physical screen lines of cheap 90s displays.
• The Pixels: A font style that matches classic low-res matrix grids (like Press Start 2P from Google Fonts).
• The Frame: A bright purple or neon yellow plastic oval shell with three circular buttons underneath labelled A, B, and C.

Your prompt to Claude can look like this:

> "Let's refine the styling. Enhance the visual design to look exactly like a physical, neon-purple plastic handheld toy frame surrounding a green-grey LCD screen. Use a CSS grid overlay on the screen to create pixel scanlines. Ensure the pet itself is represented by retro CSS-based pixel art or inline SVGs that animate (e.g., bouncing up and down when happy, drooping when sick). The three physical buttons under the screen (A: Select, B: Decide, C: Cancel) must have active press states with shadows."

Step 3: Coding the SVG Pixel Animations

Instead of loading external image assets (which can break or fail to load), the smartest way to build a self-contained game is using inline SVGs. Claude is exceptionally good at writing procedural SVGs.

Ask Claude to create a series of 16x16 or 32x32 SVG pixel grids for the different animations: 1. Idle Animation: A cute, round blob creature that bounces up and down. 2. Eating Animation: The creature moving towards a small pixelated bowl of food. 3. Sleeping Animation: The creature lying flat with tiny "Z" letters floating up. 4. Sick Animation: A static, unhappy expression with a skull icon next to it.

Claude will write these SVG shapes directly into the JavaScript state-rendering function. When the pet's state changes, the game dynamically swaps out the SVG code inside the screen container.

Step 4: Adding Nostalgic Web Audio API Sounds

Nothing says "retro" quite like the piercing 8-bit beeps of a virtual pet demanding food at 3:00 AM. We can use the browser's native Web Audio API to generate authentic square-wave tones without downloading audio files.

Instruct Claude to add a sound synthesis helper:

`javascript function playBeep(frequency, duration) { const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); oscillator.type = 'square'; oscillator.frequency.value = frequency; oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration); oscillator.stop(audioCtx.currentTime + duration); } `

Have Claude integrate this function into button presses (a high-pitched double beep) and alert states (a low, repetitive warning chime when hunger is critical).

Step 5: Testing and Running Your Game

Once Claude outputs the full, single-file HTML code, copy it and save it locally as index.html. Double-click to open it in any modern browser, and you are ready to play.

You now have a fully functional virtual pet that lives on your desktop. It is a fantastic foundation for further customisation—you could add local storage to save your pet's progress between page refreshes, build an evolution tree based on how well you care for it, or even add custom mini-games to play with your pet. It is proof that with the right prompting, modern AI can help us reconstruct our favourite physical childhood memories in pure software.