1a9710ec88
Wimmel-Suchspiel: finde 3 versteckte Fuesse in einer randvollen Szene. - Node/Express-Server generiert Szenen prozedural aus einer gemeinsamen Library (library/props = Deko, library/feet = Fuesse); Spezial-Level (emoji) unter scenes/ - Serverseitige Trefferpruefung (nicht per DOM austrickbar) - Frontend rendert die Szene als ein Bild -> fluessiges Zoom/Pan (panzoom) - Dark Mode, kein Start-Screen, Installationsskript + Deploy-Doku (Proxmox LXC) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
99 lines
4.1 KiB
Markdown
99 lines
4.1 KiB
Markdown
# fuesse.sexy — „Where's the Feet" 🦶
|
|
|
|
Ein Wimmel-Suchspiel im Stil von „Wo ist Waldo?" — nur werden **Füße** in einem
|
|
detailreichen Wimmelbild gesucht. Pro Szene sind **3 verschiedene Füße** versteckt;
|
|
finde alle drei, dann kommt die nächste zufällige Szene.
|
|
|
|
- **Kein Start-Screen, keine Auswahl** — Seite öffnen und sofort losspielen.
|
|
- **Google-Maps-Gefühl:** ziehen, Mausrad-Zoom am PC, Zwei-Finger-Pinch am Handy.
|
|
- **Prozedural generiert:** Der Server würfelt jede Szene aus einer gemeinsamen
|
|
**Library** neu zusammen und prüft Klick-Treffer serverseitig (nicht durch „im Code
|
|
spicken" austrickbar).
|
|
- **Library statt Level:** Normale Szenen ziehen Deko + Füße aus `library/`. Themen sind
|
|
unsichtbar/zufällig gemischt. **Spezial-Level** (z.B. Emoji-Chaos) sind die Ausnahme.
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
./install.sh # prüft Node, installiert Abhängigkeiten
|
|
npm start # startet den Server
|
|
```
|
|
|
|
Dann im Browser: **http://localhost:3000**
|
|
|
|
(Alternativ: `npm run setup` statt `./install.sh`.)
|
|
|
|
## Die Library erweitern (der Normalfall)
|
|
|
|
Normale Szenen ziehen ihre Bildchen aus der gemeinsamen Library:
|
|
|
|
```
|
|
library/
|
|
props/ ← Deko-Bildchen (alles, was KEIN Fuß ist: Ball, Muschel, Krabbe …)
|
|
feet/ ← Fuß-Bildchen. Der Server wählt pro Szene 3 als Ziele aus,
|
|
die übrigen streut er als Ablenker mit ein.
|
|
```
|
|
|
|
Zum Erweitern einfach neue Bildchen in den passenden Ordner legen und **Server neu
|
|
starten** — fertig. Kein Code, kein Level.
|
|
|
|
- **Deko** (kein Fuß) → `library/props/`
|
|
- **Füße** (zum Suchen) → `library/feet/` · **mind. 3** müssen vorhanden sein
|
|
- **Formate:** `.svg`, `.png`, `.webp`, `.jpg`
|
|
- **Tipp:** freigestellte Bildchen mit **transparentem Hintergrund**, grob quadratisch —
|
|
dann sitzt die Trefferzone gut. Der Dateiname wird zum Namen in der „Gesucht"-Leiste.
|
|
|
|
## Spezial-Level (die Ausnahme)
|
|
|
|
Ein Spezial-Level ist ein eigenständiger Ordner unter `scenes/` mit eigener `config.json`.
|
|
Es taucht gelegentlich zwischen den normalen Library-Szenen auf.
|
|
|
|
- `emoji` — Emojis statt Bilddateien; man sucht den Fuß 🦶 im Emoji-Gewimmel.
|
|
Siehe `scenes/emoji-chaos/config.json`. Einheitlicher Look: `public/emoji/README.md`.
|
|
- `photo` — freigestellte Fotos statt Zeichnungen (eigene `props/` + `targets/`).
|
|
Vorlage: `scenes/strand-foto/README.md`.
|
|
|
|
Wie oft normale Library-Szenen im Vergleich zu Spezial-Leveln kommen, steuert
|
|
`LIBRARY_WEIGHT` in `server/index.js`.
|
|
|
|
## Woher bekomme ich Bildchen? (Gratis-Quellen)
|
|
|
|
**Clipart (SVG/PNG):**
|
|
- **openclipart.org** — gemeinfrei (CC0), riesig. *Sicherste Quelle.*
|
|
- **svgrepo.com** — nach Lizenz „CC0 / Public Domain" filtern.
|
|
- **kenney.nl** — hochwertige Asset-Packs, CC0.
|
|
- **pixabay.com** — Vektoren + freigestellte PNGs (kommerziell ok).
|
|
- **flaticon.com / freepik.com** — riesig, aber Gratis-Tier braucht Namensnennung.
|
|
- **game-icons.net** — 4000+ SVG-Icons (CC-BY).
|
|
|
|
**Fotos (für Foto-Level, danach freistellen):**
|
|
- **pexels.com**, **unsplash.com**, **pixabay.com** (kostenlos, kommerziell nutzbar)
|
|
- Freistellen: **remove.bg** (1-Klick) oder **photopea.com** (Gratis-Editor)
|
|
|
|
**Emoji:** OpenMoji / Twemoji / Noto — siehe `public/emoji/README.md`.
|
|
|
|
> Achte pro Datei auf die jeweilige Lizenz. Am sorgenfreisten sind openclipart, SVGRepo
|
|
> (CC0-Filter), Kenney und Pixabay.
|
|
|
|
## Deployment (Ausblick)
|
|
|
|
Das Spiel ist ein normaler Node-Server. Zum Livestellen auf **fuesse.sexy**:
|
|
|
|
1. Auf einen Node-Host bringen (z.B. **Railway**, **Render**, oder ein **VPS**).
|
|
2. `npm install` und `npm start` (Standard-Port 3000; via `PORT`-Env änderbar).
|
|
3. Die Domain **fuesse.sexy** per DNS/Reverse-Proxy auf den Server zeigen (HTTPS via
|
|
dem Host oder z.B. Caddy/Nginx + Let's Encrypt).
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
server/ Express-Server + Szenen-Generator (die "Wimmelbild-Fabrik")
|
|
public/ Frontend (Vanilla JS + SVG, Szene wird als 1 Bild gerendert)
|
|
emoji/ optionales Emoji-Bildset
|
|
library/ die Fundgrube für normale Szenen
|
|
props/ Deko (kein Fuß)
|
|
feet/ Fuß-Bildchen (Ziele + Ablenker)
|
|
scenes/ Spezial-Level (Ausnahmen: emoji, photo)
|
|
install.sh Ein-Befehl-Setup
|
|
```
|