Build a Retro Game-Style Landing Page With a Fully Playable Mini Game (HTML, CSS & JavaScript)

Create a single-page retro-inspired landing page that includes one fully playable mini game embedded directly in the page.

This is not a demo mockup.
The game must actually work.

⸻

Core concept

The website looks like a retro game cartridge or arcade screen, and the landing page itself is the game.

The goal is to make visitors play first, read later.

⸻

Visual & design rules
• Retro arcade or early-console aesthetic
• Pixel-style UI (but clean and readable)
• Dark background with neon accents
• Rounded pixel buttons
• Subtle CRT or scanline effect (very light)
• No external assets or libraries

⸻

Page structure
1. Header (Game Title Screen)
• Big pixel-style title
• Subtitle like “Press Start”
• Start button triggers the game
2. Playable Mini Game
• Simple mechanic (choose ONE):
• Dodge falling objects
• Catch items with a basket
• Move a square through obstacles
• Keyboard controls (arrow keys or WASD)
• Score counter
• Reset button
• Short game session (10–20 seconds)
3. Post-Game Screen
• Display final score
• Show a short message that changes based on score
• Small “Play Again” button
4. Below-the-Game Content
• Short explanation of the product or idea
• Written like game lore, not marketing copy
5. Footer
• Looks like a console status bar
• Minimal text only

⸻

Technical requirements
• Pure HTML, CSS, and JavaScript
• One single HTML file
• No external libraries
• Game logic written clearly and commented
• Use requestAnimationFrame or setInterval
• Responsive for desktop and mobile

⸻

Interaction & effects
• Button press animation (pixel press-in)
• Score tick animation
• Small screen shake on collision
• Soft glow on game canvas
• Smooth transitions between screens

⸻

Tone & mood
• Fun
• Nostalgic
• Playful
• Slightly mysterious
• Not corporate

The finished page should feel like:

“Why is this landing page more fun than most games?”

⸻

✅ LLM Optimizations (honest picks)

Best for actually generating this correctly:
• ChatGPT 5.2 (strongest for logic + structure)
• Claude Opus (great for clean JS + comments)

Good for remixing themes and visuals:
• Gemini

⸻

✅ Programming Languages of the Outcome
• HTML
• CSS
• JavaScript

Optional techniques:
• Canvas API
• CSS animations
• CSS variables for theme control

⸻

✅ Additional Context

This prompt is ideal for:
• Lovable.dev creators
• Indie hackers
• Portfolio projects
• Viral demos on TikTok
• “I built this in one file” posts

It blends:
• Design
• Code
• Play
• Personality

⸻

✅ Tips & Remix Examples

Easy remixes:
• Cyberpunk version
• Cozy pastel version
• Horror-lite version
• Game Boy–style monochrome

Score-based messages example:
• Low score: “Still warming up…”
• Medium score: “You’ve played this before.”
• High score: “Okay, you’re good.”