2026-09-01 · javascript · canvas · svelte · spiel
Schneeballschlacht überm Berg
Ein Wurfspiel nach Gorillas-Prinzip in einem Canvas: Wurfparabel, Wind als Störgröße und eine KI, die aus drei Zeilen Fehlerkorrektur besteht. Läuft komplett im Browser.
Links der Hog mit Schal, rechts der Roboter, dazwischen ein Berg. Beide werfen Schneebälle, der Wind pfuscht in die Flugbahn, und wer den anderen trifft, bekommt den Punkt. Das Prinzip ist so alt wie QBasic: Gorillas, 1991, nur mit Bananen. Hier ist es in einem Canvas nachgebaut, wahlweise vollautomatisch oder mit dir am Wurfarm des Hogs.
Bereit. Starte die Automatik oder übernimm den Hog.
Die Demo braucht JavaScript; einen Server gibt es nicht. Winkel und Kraft sind die einzigen Parameter, der Wind würfelt sich nach jedem Wurf neu.
Die ganze Physik sind vier Zeilen
Pro Simulationsschritt passiert nichts weiter als das hier:
ball.vy += G; // Gravitation zieht nach unten
ball.vx += wind; // der Wind schiebt seitwärts
ball.x += ball.vx;
ball.y += ball.vy;Keine Physik-Engine, keine Integration höherer Ordnung. Für eine Wurfparabel mit Seitenwind reicht der einfachste Euler-Schritt, und dass der Wind als konstante Beschleunigung statt als Luftwiderstand modelliert ist, merkt im Spiel niemand. Der Berg ist ein Linienzug mit linearer Interpolation dazwischen: Liegt der Ball unter der Linie, gibt es einen Einschlag am Hang.
Eine KI aus drei Zeilen
Der Roboter zielt nicht, er schießt sich ein. Nach jedem Wurf wird gemessen, wie weit der Einschlag am Ziel vorbeiging, und die Kraft proportional korrigiert:
const fehler = (splatX - zielX) * richtung; // >0 zu weit, <0 zu kurz
kraft = clamp(kraft - fehler * 0.055, 30, 95);
winkel += zufall(-3, 3);Das ist Artillerie-Taktik aus dem 18. Jahrhundert, Gabeln genannt: zu weit, zu kurz, dazwischen liegt der Treffer. Weil der Wind nach jedem Wurf wechselt, trifft die Korrektur nie perfekt, und genau das hält die Automatik lebendig. Zwei Regelmaschinen, die einander beschießen, sehen erstaunlich absichtsvoll aus. Nach ELIZA im letzten Beitrag ist das der zweite Fall dieser Woche, in dem ein paar Zeilen Regelwerk mehr Verhalten vortäuschen, als drinsteckt.
Blueprint statt Sprites
Gezeichnet wird alles pro Frame direkt ins Canvas: der Berg als Polylinie,
der Hog als Kreis mit Stachelstrichen und Glow-Schal, der Roboter als zwei
Rechtecke mit Antenne, die Flugspur als gepunktete Linie. Die Farben kommen
zur Laufzeit aus den CSS-Tokens der Site (getComputedStyle liest die
OKLCH-Werte, Canvas versteht sie direkt). Ändert sich die Palette der
Site, spielt das Spiel automatisch in den neuen Farben.
Bewegung gibt es nur nach einem Klick. Wer nichts startet, sieht ein stilles Standbild mit Windanzeige, und der Rest der Seite bleibt davon unberührt.
