simba-runner — bo strona 404 też zasługuje na grę
┌─[ status: live ]─[ version: 2.0 ]─[ license: MIT ]─[ price: 0 zł ]─[ deps: 0 ]─[ runtime: vanilla JS ]─[ size: ~18 KB ]─┐
simba-runner — endless runner gdzie kot jest bohaterem, parallax tłem, a strona 404 — sceną.
Każda strona ma 404. Większość 404 to „Strona nie istnieje, zawróć”. Moja 404 to arcade z kotem. Bo Simba zasługuje na coś więcej niż leniwe spanie na klawiaturze (chociaż to też lubi).
📖 Table of Contents
▶ Play now
Jeden klik: esej.space/404 (tak, ZAMIERZONE 404 — gra ładuje się tam zamiast standardowego błędu).
Lub jakikolwiek URL co nie istnieje — np. esej.space/lalala. Każda zła ścieżka prowadzi do arcade.
🎯 About
Simba — maine coon, kot domowy, 7 kg żywego protestu przeciwko ludzkim deadline’om. Po jakimś czasie pomyślałem: „szkoda go nie utrwalić cyfrowo.”
Pomysł: endless runner w stylu Chrome dino, ale:
- na 404 page — bo strona błędu nie musi być nudna
- z kotem zamiast dinozaura — bo Simba jest fotogeniczniejszy niż T-Rex
- z parallax tłem — bo bez parallax to byłaby kolejna gra dino
- z power-upami — bo każda gra zasługuje na shield, magnet, slow-mo
- z leaderboardem — bo bez konkurencji nie ma motywacji
✨ Features
- 🐈 Simba jako protagonista — biegnie, skacze, łapie power-upy, czasem ginie
- 🏔️ Parallax background — góry (warstwa 1) + sylwetka miasta (warstwa 2) + chmury dryfujące (warstwa 3)
- ⭐ Particle effects — przy zbieraniu power-upów, przy śmierci, przy 1000m milestonach
- 🌅 Day-night cycle co 1100m — niebo zmienia gradient, gwiazdy migoczą w nocy
- 💎 5 power-upów — TARCZA / MAGNES / x2 / SLOW-MO / BOOST
- 🏆 Leaderboard top 50 — localStorage, twój nick + best score
- 💾 Zero backend — wszystko client-side, działa offline po pierwszym załadowaniu
- 📱 Touch controls — tap to jump na mobile
💎 Power-ups
| ikona | nazwa | czas trwania | efekt |
|---|---|---|---|
| 🛡️ | TARCZA | 8s | Wpadasz w przeszkodę, ale przeszkoda nie zabija. Jeden hit i tarcza znika. |
| 🧲 | MAGNES | 10s | Wszystkie monety w promieniu 200px przyciągane do Simby. |
| ×2 | DOUBLE POINTS | 12s | Każdy zebrany punkt liczy się podwójnie. |
| 🐌 | SLOW-MO | 5s | Świat zwalnia 2x, Simba normalnie. Time-perception dilation. |
| 🚀 | BOOST | 3s | Simba sprintem, 3x prędkość bazowa. Trail particle effect. |
🎮 Controls
| akcja | klawisz | touch |
|---|---|---|
| skok | Space lub ↑ | tap |
| podwójny skok | 2× Space | 2× tap |
| schylenie | ↓ | swipe down |
| pause | P lub Esc | — |
| restart | R | tap on game over |
Save modal: Space / Enter submit · Esc skip · nick bez spacji.
🛠️ Stack
| warstwa | czym | dlaczego |
|---|---|---|
| silnik | vanilla JS + Canvas 2D | endless runner nie potrzebuje WebGL ani Unity |
| render | requestAnimationFrame | 60 FPS na każdym sprzęcie od 2010 |
| storage | localStorage (simba_leaderboard_v2) |
zero backend, zero kosztów |
| physics | własny (gravity + collision boxes) | ~50 linii kodu, działa |
| assets | SVG inline + emoji | brak HTTP requestów dla grafik |
| plik | assets/js/simba-runner.js |
integralna część motywu, ładowana tylko na 404 |
| container | <div id="simba-runner"> w 404.php |
theme renderuje gdy WP zwraca 404 status |
🏆 Leaderboard
Top 50 wszech czasów per browser/urządzenie (localStorage, nie sync’owane między przeglądarkami).
- Klucz:
simba_leaderboard_v2(bumpowany z v1 — stare scores zostały wyczyszczone przy upgrade) - Nick: max 16 znaków, bez spacji (compromise dla parsingu)
- Sortowanie: po score DESC, ties → starszy wynik wyżej
Globalne leaderboard jest na roadmapie — wymagałoby backendu, kolejki, anti-cheat. Może w v3.0.
📜 Changelog
v2.0 — 2026-05-19 — Power-up Edition
- 5 power-upów (TARCZA / MAGNES / x2 / SLOW-MO / BOOST)
- Parallax background (góry + sylwetka miasta + chmury)
- Particle effects (zbieranie, śmierć, milestone’y)
- Day-night cycle co 1100m
- Migoczące gwiazdy w nocy
- Save modal: SPACE/ENTER submit, ESC skip
- Leaderboard klucz bumped (
v1→v2) — clean slate - Container ID przemianowane (
simba-runner-container→simba-runner)
v1.0 — wcześniej — Initial release
- Endless runner core gameplay
- Simba + jedna przeszkoda
- Score counter, basic leaderboard
- Single static background
🗺️ Roadmap
v2.1 — Polish
- [ ] sound effects (jump, hit, power-up pickup, death)
- [ ] music toggle (chiptune loop)
- [ ] settings panel (volume, particles on/off, FPS counter)
- [ ] colorblind mode (alt palette dla power-upów)
v2.2 — More biomes
- [ ] biome 2: las (zamiast city), nocą — robaczki świętojańskie
- [ ] biome 3: kosmos (po przebiegnięciu 5000m), grawitacja słabsza
- [ ] random biome rotation co 1500m
v2.3 — Enemies
- [ ] przeszkoda 2: dron (latający, trzeba się schylić)
- [ ] przeszkoda 3: pies sąsiada (ścigający przez 3s)
- [ ] boss co 3000m: odkurzacz Roomba
v3.0 — Global leaderboard (wymaga backend)
- [ ] POST /score endpoint w WP REST
- [ ] anti-cheat: checksum score + replay validation
- [ ] global top 100 wyświetlane obok local top 50
- [ ] daily challenges (każdy dzień ma seeded RNG)
❓ FAQ
Czemu na 404 a nie na osobnej stronie?
Bo 404 i tak miała tylko „Strona nie istnieje”. Lepiej żeby ktoś, kto się zgubił, miał ze swojej pomyłki coś więcej niż 503 słowa „wróć do domu”.
Czy Simba dostaje tantiemy?
Tak. W formie żwirku. Codziennie.
Mogę zhakować leaderboard?
Tak. To localStorage. localStorage.setItem('simba_leaderboard_v2', ...) w konsoli i jesteś w top 1. Ale liczy się honor, nie liczby.
Czemu nie React/Phaser/Unity?
Bo to nie potrzebne. 18KB vanilla JS robi to samo. Bez 200MB node_modules.
Będzie Android/iOS app?
Nie. Strona jest PWA-ready, więc „Dodaj do ekranu głównego” i masz appkę.
Najwyższy wynik twój?
~12 400m. Ale to bez power-upów (v1.0). W v2.0 nie miałem jeszcze czasu pograć.
// PS: Simba nigdy nie zagrał w simba-runner. Twierdzi że to obraźliwe — kot nie biega 12km bez powodu.