Froschsprung
Ein Jump-&-Run-Browserspiel für Kinder, in dem Pepe der Frosch an einem Teich entlang hüpft, Hindernissen ausweicht und Moskitos fängt.
Jetzt spielen →Technik
Technik-Stack
Froschsprung ist eine einzige selbstständige HTML-Datei – kein Server, kein Build-Prozess, keine Installation. Einfach die Datei doppelklicken oder auf einen Webserver legen, fertig.
- HTML5 Canvas für die gesamte Spielgrafik (Hintergrund, Figuren, Hindernisse, Partikeleffekte).
- Vanilla JavaScript – keine Frameworks oder
Libraries, ein handgeschriebener Spiel-Loop über
requestAnimationFrame. - CSS für Menüs, HUD-Anzeigen und Layout, mit den Google Fonts „Baloo 2" (Überschriften) und „Nunito" (Fließtext).
- Web Audio API für die Soundeffekte (Sprung, Fang, Treffer) – synthetisch erzeugte Töne, keine Audiodateien.
- localStorage speichert Bestwert und Ton-Einstellung im Browser des Spielers, geräteweise.
Spielarchitektur
- Zustandsmaschine mit drei Phasen:
ready(Startbildschirm) →playing→over(Ergebnis-Bildschirm). - Physik: Schwerkraft- und Sprungwerte sind so kalibriert, dass alle Hindernisse bei rechtzeitigem Sprung sicher zu überwinden sind; „Coyote Time" und Sprung-Puffer machen die Steuerung kinderfreundlich-verzeihend.
- Prozedurale Hindernisse: Steine, Schilf und Schildkröten werden fortlaufend erzeugt, wobei der Mindestabstand aus der aktuellen Geschwindigkeit und der Sprungweite berechnet wird – jedes Hindernis ist garantiert schaffbar.
- Ein „Schutzschild" verzeiht den ersten Treffer pro Runde (kurze Unverwundbarkeit statt sofortigem Game Over) – wichtig für jüngere Spieler.
- Parallax-Ebenen (Libellen, Hintergrund-Schilf, Wasserwellen) erzeugen Tiefenwirkung beim Scrollen.
- Sprite-basierte Animation: Pepe wechselt je nach Spielzustand zwischen den bereitgestellten Illustrationen (sitzend, hüpfend, im Sprung, Zunge raus beim Fangen, liegend/jubelnd am Ende, schlafend bei Inaktivität).
Grafik-Pipeline
Alle Illustrationen (Frosch, Seerosen, Schilf, Steine, Schildkröte, Libellen, Moskitos) sind KI-generierte Comic-Grafiken, die als SVG bereitgestellt und dann in PNG umgewandelt und direkt als Base64-Daten in die HTML-Datei eingebettet wurden. Dadurch bleibt das Spiel eine einzige portable Datei ohne externe Bild-Verweise – funktioniert auch offline oder von einem beliebigen Webspace aus, ohne dass Bilderpfade angepasst werden müssen.
Für die Veröffentlichung
Die Datei kann unverändert auf jeden Webserver hochgeladen werden (z. B. per FTP in einen Ordner der Homepage). Ein Hosting-Hinweis: Da alle Bilder eingebettet sind, ist die Datei mit rund 1–1,5 MB etwas größer als eine reine Text-HTML-Seite, aber jeder Webhoster kommt damit problemlos zurecht.
Credits
- Konzept, Programmierung & Spieldesign: Claude (Anthropic), auf Zuruf entwickelt und iterativ verfeinert.
- Grafiken: KI-generiert im Comic-Stil, Auswahl und Art Direction von Michael.