404game

404game.js

Turn boring 404 pages into playable mini-games. Drop-in, zero dependencies, < 30KB.

🎮 Live Demo →

<script src="404game.js"></script>
<div id="game"></div>
<script>Game404.mount('#game');</script>

That's it. Your 404 page now has Snake, Flappy Bird, Breakout, or a Dino runner.

---

🎮 Games included

Plus 4 themes: neon, retro, minimal, dark.

---

📦 Install

npm install 404game

or use the CDN-style UMD bundle:

<script src="https://unpkg.com/404game/dist/404game.umd.cjs"></script>

---

🚀 Usage

Vanilla / <script> tag

<div id="game"></div>
<script src="404game.umd.cjs"></script>
<script>
  Game404.mount('#game', {
    game: 'random',   // 'snake' | 'flappy' | 'breakout' | 'dino' | 'random'
    theme: 'neon',    // 'neon'  | 'retro'  | 'minimal'  | 'dark'
  });
</script>

ES Modules / bundlers

import Game404 from '404game';

Game404.mount('#game', { game: 'snake' });

React

import { useEffect, useRef } from 'react';
import Game404 from '404game';

function NotFoundPage() {
  const ref = useRef(null);
  useEffect(() => {
    const instance = Game404.mount(ref.current, { game: 'random' });
    return () => instance.destroy();
  }, []);
  return <div ref={ref} />;
}

---

⚙️ Options

---

🔧 API

const instance = Game404.mount(selector, options);

instance.restart();        // Restart current game
instance.getScore();       // Current score
instance.destroy();        // Remove from DOM, free resources

Game404.unmount(selector); // Same as instance.destroy()

Game404.games;             // ['snake', 'flappy', 'breakout', 'dino']
Game404.version;           // '0.1.0'

---

✨ Features

• 🎮 4 classic games built in
• 🎨 4 themes included
• 📱 Touch + keyboard controls — works everywhere
• 💾 Local high scores per game
• 🪶 Zero dependencies — pure browser APIs
• 📦 < 30KB minified + gzipped
• 🧩 TypeScript types included
• ♻️ Auto-cleanup with destroy()
• 🎯 Framework-friendly (React, Vue, Svelte, vanilla, anywhere)

---

🛠️ Development

npm install
npm run dev        # Vite dev server at http://localhost:5173
npm run build      # Build to dist/
npm run preview    # Preview built demo at http://localhost:4173

Open demo/index.html after building to see all 4 games at once. Open demo/404.html to see a real-world 404 page integration.

---

📄 License

MIT