Meine Nichte übt gerade das Einmaleins. Lernkarten sind langweilig, YouTube-Videos lenken ab — also habe ich kurzerhand ein kleines Browser-Spiel gebaut.
→ Slothy’s 1×1 Abenteuer jetzt spielen
Was steckt dahinter?#
Das Spiel ist simpel: Eine Malaufgabe erscheint, ein Timer läuft herunter, die Antwort muss per Zahlenfeld eingegeben werden. Richtige Antworten bringen Sterne, bei falschen oder zu langsamen sinkt Slothy — das namensgebende Faultier — ein Stück tiefer.
Slothy hängt auf einem Ast im Dschungel und animiert sich je nach Spielzustand:
- Idle — entspannt baumeln
- Climb — nach oben kraxeln bei richtigen Antworten
- Cheer — jubeln bei perfekten Serien
- Fall — langsam abrutschen bei Fehlern
Der Sprite ist ein 4×4-Grid mit 312px-Frames, alles händisch in Canvas gerendert.
Technisch#
Rein vanilla — kein Framework, kein Build-Step, eine einzelne HTML-Datei plus drei kleine JS-Module:
engine.js— Timer, Score, Aufgabengeneratorsloth.js— Sprite-Animationgame.js— verbindet alles
Das Design läuft über CSS Custom Properties, damit Farben und Größen an einem Ort sitzen. Funktioniert auf dem Handy genauso wie am Desktop — wichtig, weil Kinder oft das Tablet ihrer Eltern kapern.
Fazit#
Manchmal ist ein kleines selbst gebautes Tool einfach die beste Lösung. Kein Abo, keine Ablenkung durch Werbung, kein Account — einfach aufmachen und losspielen.