Torwartspiele: Wie Keeper echten Reaktionsdruck nachbildet

Ich wollte ein Fußballspiel um den schwersten Teil einer Parade bauen: das kurze Zeitfenster zwischen dem Lesen des Schusses und dem Moment, in dem ein Körperteil im Weg des Balls sein muss.

Damit fielen Knöpfe praktisch sofort weg. Mit einem Klick nach links oder rechts kann man das Ergebnis nachbilden, aber nicht das Gefühl des Reagierens. Der Spieler sollte den Anlauf beobachten, die Flugbahn lesen, sich strecken, lehnen und sich festlegen. Die Webcam musste zum Controller werden, und die Person davor zum Torwart.

So entstand Keeper. Es ist eines dieser Torwartspiele, die von außen simpel wirken: Halte vier von sechs Schüssen, um ein Level zu schaffen. Darunter verändert jedes Level das Reaktionsproblem. Der Schuss wird schneller, der Ball dreht stärker, das Tor wird breiter, die Ecken kommen öfter, und der Keeper deckt weniger Fläche ab.

Mir geht es nicht darum, zu behaupten, dass ein Browserspiel ein Profispiel nachstellt oder Torwarttraining ersetzt. Tut es nicht. Ich wollte die wichtigen Bedingungen des echten Schüsse-Haltens ausleihen und in ein sicheres, gut lesbares Spiel pressen, das du vor der Webcam spielen kannst.

Wie echter Reaktionsdruck beim Torwart aussieht

Ein Elfmeter ist nicht schwer, weil ein Torwart noch nie einen rollenden Ball gesehen hätte. Er ist schwer, weil die verfügbaren Informationen und die verfügbare Bewegungszeit fast gleichzeitig eintreffen.

Eine begutachtete Analyse von 88 Elfmetern ergab eine durchschnittliche Flugzeit des Balls von 525 Millisekunden. Die Forschenden fanden außerdem, dass sich die Hände der Torhüter bei hohen und flachen Schüssen etwa 245 Millisekunden nach dem Ballkontakt zu trennen begannen, während die Bewegung nach links oder rechts schon aus Hinweisen vor dem Kontakt starten konnte. Hier steht die Studie dazu, wie Torhüter Richtung und Höhe von Elfmetern erkennen.

Diese Unterscheidung hat Keeper geprägt. Ein echter Torwart reagiert nicht erst, wenn sich der Ball bewegt. Er liest den Anlauf, die Körperhaltung und den Schuss und passt seine Entscheidung dann am Anfang der Flugbahn an. Darum zeigt das Spiel einen Stürmer, der anläuft und das Bein zurückzieht, bevor er schießt. Sobald der Ball losfliegt, entscheiden Tempo, Kurve und Zielplatzierung, wie viel Zeit zum Korrigieren bleibt.

Keeper ist kein geprüfter Reaktionstest. Kameraverzögerung, Bildschirmgröße, Raumgröße und das verstärkte Bewegungsmodell trennen es vom Platz. Aber die höheren Level bewegen sich absichtlich auf ein Zeitfenster zu, das sich an den Profis orientiert. Level 9 gibt dir 520 Millisekunden Ballflug, fast so viel wie die 525 Millisekunden Durchschnitt aus dieser Studie. Ab Level 10 gilt die Untergrenze des Spiels von 500 Millisekunden.

Zuerst musste sich die Kamera wie ein Spiegel anfühlen

Keeper fragt zuerst den Browser nach einem Videostream der Frontkamera. Die Berechtigungsabfrage läuft über den Browser, und zwar mit MediaDevices.getUserMedia(). Diese Schnittstelle verlangt einen sicheren Kontext und die ausdrückliche Zustimmung der Nutzenden, deshalb kann sich die Kamera nicht einfach heimlich im Hintergrund öffnen.

Ich fordere Video mit idealerweise 1280 mal 720 an, schalte den Ton ab und bevorzuge die nach vorn gerichtete Kamera. Das Posenmodell verarbeitet die Videobilder dann direkt im Browser. Keeper nutzt MediaPipe Pose Landmarker im Videomodus mit einer Pose und dem leichten Modell, das nach Möglichkeit über die GPU läuft. Googles Pose-Landmarker-Anleitung fürs Web beschreibt denselben Ablauf mit Videobildern.

Die Körperpunkte kommen in Kamerakoordinaten an. Jede x-Koordinate spiegele ich, bevor ich sie benutze. Bewegt sich der Spieler nach rechts, soll aus seiner Sicht auch der Torwart auf dem Bildschirm nach rechts gehen. Ohne diese Spiegelung fühlt sich ein Webcam-Spiel schon falsch an, bevor der erste Schuss fällt.

Eine Pose ist noch kein Torwart

Ein Posenmodell sagt mir, wo Kopf, Schultern, Ellbogen, Handgelenke, Hüften, Knie und Knöchel des Spielers im Kamerabild erscheinen. Es sagt mir nicht, wo diese Punkte im Tor hingehören.

Das löse ich, indem ich das Tor als eigenes Koordinatensystem behandle. Die Mitte der Hüfte des Spielers wird zur beweglichen Mitte des Keepers. Alle anderen Punkte werden relativ zu dieser Hüfte gemessen, mit Torbreite und Torhöhe skaliert und dann in den Torraum gesetzt.

So bekommen unterschiedliche Körper einen gemeinsamen Spielraum. Ein Handgelenk kann zur oberen Ecke greifen, egal ob der Spieler groß oder klein ist, nah an der Kamera oder weiter hinten steht. Das Spiel kopiert keine rohen Kamerapixel auf den Bildschirm. Es überträgt die Form der Pose in die Form des Tors.

Warum das Lehnen mehr bewegen muss, als man auf der Kamera sieht

Ein Wohnzimmer ist kein Fußballplatz. Die meisten können sich nicht gefahrlos in einen vollen Hechtsprung werfen, und ich wollte das Spiel auch nicht dazu verleiten.

Stattdessen misst Keeper die seitliche Hüftbewegung ab der kalibrierten Standposition und verstärkt sie über das ganze Tor. Ein bewusstes Lehnen wird zum Hechtsprung. Arm- und Beinhaltung zählen weiterhin, aber die verstärkte Hüftverschiebung lässt den ganzen Keeper in eine Ecke wandern, ohne dass du dich auf den Boden werfen musst.

Die Ausgangsposition im Stehen zentriert sich zwischen den Schüssen langsam neu. Das ist wichtig, denn nach einigen Paraden driftet man von selbst. Mit einem festen Kalibrierpunkt würde neutrales Stehen irgendwann wie ein Dauerlehnen aussehen.

Vor dem ersten Countdown prüft das Spiel, dass Kopf, Schultern und beide Arme sichtbar und halbwegs ruhig sind. Diesen Bereitschaftszustand verlangt es einen kurzen Moment lang, statt auf ein einzelnes Glückbild hereinzufallen. Der Kalibrierbildschirm gehört fest zum Spieldesign. Er legt fest, was die Kamera sehen muss, und gibt dem Spieler Platz zum Bewegen.

Wie der ganze Körper zur Paradefläche wird

Die wichtigste technische Entscheidung war, dass eine Parade nicht allein vom Handgelenk abhängen darf. Echte Torhüter halten Schüsse mit Händen, Armen, Beinen, Rumpf und manchmal mit dem Kopf. Das Kollisionssystem musste die ganze Silhouette erkennen.

Ich baue den Keeper aus mehreren einfachen Formen:

• Der Rumpf ist ein gefülltes Polygon aus beiden Schultern und beiden Hüften.
• Arme und Beine sind dicke Liniensegmente, die als Kapseln behandelt werden statt als Knochen von einem Pixel Breite.
• Die Handgelenke bekommen etwas größere kreisrunde Handschuhzonen.
• Der Kopf hat seine eigene runde Abwehrzone.

Erreicht der Ball die Torlinie, stellt die Engine genau eine Frage: Überlappt der Ball eine dieser Formen? Bei einem Körperglied suche ich den nächsten Punkt auf dem Segment und vergleiche den Abstand mit der Dicke des Glieds plus dem Ballradius. Beim Rumpf prüfe ich, ob der Ballmittelpunkt im Polygon liegt.

Punkte unterhalb einer Sichtbarkeitsschwelle zählen nicht für die Parade. So kann kein erratenes Handgelenk oder verdeckter Knöchel einen unsichtbaren Block erzeugen. Das Ergebnis ist nachsichtig genug, um sich körperlich anzufühlen, und genau genug, dass du dich trotzdem zum Schuss hin bewegen musst.

Die Hinweise vor der Reaktion nachbauen

Ein faires Fußball-Torwartspiel braucht einen lesbaren Schuss. Taucht der Ball ohne Vorwarnung mit vollem Tempo auf, rät der Spieler nur, statt zu reagieren.

Jeder Schuss beginnt mit einem kurzen Anlauf. Der Schütze läuft auf den Ball zu, das Schussbein lädt sich auf, und ein enger werdender Ring macht den Moment des Schusses lesbar. Sobald der Ball den Schuh verlässt, beschleunigt er Richtung Tor. Außerdem wächst er von seiner fernen zur nahen Größe, was einen weiteren Tiefenhinweis liefert.

Der Effet folgt einem Sinusbogen. Die Kurve ist null, wenn der Ball den Fuß verlässt, wächst in der Mitte der Flugbahn und ist am gewählten Ziel wieder null. So kann der Ball kurven, ohne das Ziel zu verfehlen, das der Schütze sich ausgesucht hat.

Bei einer Parade verschwindet der Ball nicht. Er prallt für einen kurzen Moment vom Berührpunkt ab, und das Körperteil, das gehalten hat, blinkt auf. Diese winzige Pause machte die Kollision viel verständlicher. Du siehst, warum der Schuss gehalten wurde.

Höhere Level stellen ein professionelleres Reaktionsproblem

Der naheliegende Weg, ein Fußball-Torwartspiel schwerer zu machen, ist ein schnellerer Ball. Ich wollte mich nicht nur darauf verlassen, denn Tempo hat eine Obergrenze. Ab einem gewissen Punkt nimmt es dir nur noch die Chance zu reagieren.

Keeper verändert mit steigenden Leveln fünf zusammenhängende Größen:

1. Die Flugzeit sinkt, du hast also weniger Zeit, dich festzulegen.
2. Die seitliche Kurve nimmt zu, der frühe Weg ist also weniger direkt.
3. Das Tor wird breiter, es gibt also mehr zu verteidigen.
4. Die Reichweite des Keepers schrumpft leicht, sodass Stehenbleiben weniger vom Tor schützt.
5. Der Schütze zielt öfter auf die Ecken.

Im ersten Level fliegt der Ball etwa eine Sekunde. Pro Level sinkt das um 0,06 Sekunden, bis eine Untergrenze von einer halben Sekunde erreicht ist. Gleichzeitig steigen Kurve und Eckenwahrscheinlichkeit bis zu festen Obergrenzen. Das Tor wird nach und nach breiter, statt zwischen willkürlichen Schwierigkeitsstufen zu springen.

Wichtig ist nicht eine einzelne Zahl, sondern wie die Größen zusammenwirken. Die frühen Level bringen dir die Zuordnung bei. Die späteren verlangen, dass du Informationen aus dem Anlauf herausholst, der Kurve folgst, dich früher festlegst und trotzdem die volle Reichweite deiner Pose nutzt. Das kommt dem Entscheidungsdruck eines erfahrenen Torwarts näher, als wenn derselbe Schuss in die Mitte einfach schneller würde.

Die Level-Zahlen zeigen die ganze Steigerung

Ich habe die aktuelle Abstimmung der Live-Version direkt in der Spielkonfiguration geprüft. Das sind die Zahlen, die Keeper wirklich benutzt:

• Level 1: 1,00 Sekunden Flugzeit, 5 Prozent Kurvenfaktor, 42 Prozent Torbreite, 25 Prozent Eckenwahrscheinlichkeit und 102 Prozent Grundreichweite.
• Level 4: 0,82 Sekunden Flugzeit, 20 Prozent Kurvenfaktor, 54 Prozent Torbreite, 43 Prozent Eckenwahrscheinlichkeit und 96 Prozent Grundreichweite.
• Level 7: 0,64 Sekunden Flugzeit, 35 Prozent Kurvenfaktor, 66 Prozent Torbreite, 61 Prozent Eckenwahrscheinlichkeit und 90 Prozent Grundreichweite.
• Level 9: 0,52 Sekunden Flugzeit, der maximale Kurvenfaktor von 45 Prozent, 74 Prozent Torbreite, 73 Prozent Eckenwahrscheinlichkeit und die minimale Grundreichweite von 88 Prozent.
• Level 12: 0,50 Sekunden Flugzeit, 45 Prozent Kurvenfaktor, 86 Prozent Torbreite, 90 Prozent Eckenwahrscheinlichkeit und 88 Prozent Grundreichweite.

Der Kurvenfaktor ist ein Wert im Spielraum und keine Aussage darüber, wie viele Meter ein echter Ball abweicht. Auch Torbreite und Reichweite sind Anteile des Tors auf dem Bildschirm. Vergleichen sollte man die Steigerung: Zwischen Level 1 und Level 12 halbiert sich die Flugzeit, das Tor wird mehr als doppelt so breit, die Eckenwahrscheinlichkeit steigt von einem Schuss in vier auf neun in zehn, und die Abdeckung im Stehen schrumpft.

Darum fühlen sich die späteren Runden wie ein anderer Maßstab an und nicht wie ein umgefärbtes erstes Level. Ab Level 9 liegt das Reaktionsfenster im selben Bereich von einer halben Sekunde, der bei Profi-Elfmetern gemessen wurde, und der Schuss kurvt zugleich eher und landet öfter in einer Ecke.

Das Paradeziel ist eine Spielregel, kein Profi-Maßstab

Jedes Level besteht aus sechs Schüssen. Hältst du mindestens 60 Prozent, also vier von sechs, beginnt das nächste Level. Der Punktestand ist die Zahl der komplett geschafften Level.

Ich habe einen festen Block gewählt, weil jedes Level so eine kleine Geschichte bekommt. Du weißt immer, was das Ziel ist, welcher Schuss gerade kommt und wie viel Spielraum für einen Fehler bleibt. Wenn die geforderten vier Paraden rechnerisch nicht mehr möglich sind, endet der Durchgang sofort, statt noch sinnlose Schüsse abzuspulen.

Vier von sechs zu halten, bedeutet eine Quote von 66,7 Prozent für ein geschafftes Level. Das lässt sich nicht mit den Quoten echter Elfmeterparaden vergleichen. Keepers Schüsse, die Körperskalierung und die Zielverteilung sind für ein Browserspiel zum Wiederspielen gedacht, nicht für statistische Gleichwertigkeit mit dem Profisport. Der Bezug zur Realität liegt im Reaktionsfenster und im Entscheidungsdruck beim Sehen, nicht im Ergebnis auf der Anzeigetafel.

Diese Struktur trennt außerdem Beständigkeit von einer einzelnen glücklichen Parade. Eine spektakuläre Parade fühlt sich gut an, aber Level zu schaffen verlangt wiederholte Entscheidungen und Bewegungen. Das passt besser zu einem kurzen Torwartspiel online als ein endloser Strom ohne sichtbaren Zwischenstand.

Engine und Kamera sauber getrennt

Die Kern-Engine des Spiels weiß nichts von React, der Webcam oder Körperpunkten. Ihr gehören Schütze, Anlauf, Ballflug, Kurve, Schussergebnisse, Levelregeln und Punktestand. Die Seite gibt ihr die Größe der Bühne und eine Funktion, die prüft, ob gehalten wurde.

Durch diese Grenze lassen sich die wichtigen Regeln testen, ohne eine Kamera zu starten. Ich kann der Engine eine deterministische Zufallsquelle geben, die Zeit vorspulen, den Ballweg untersuchen und prüfen, wann ein Level geschafft oder beendet sein muss. Die Posengeometrie bleibt in einem eigenen Modul, wo man sie als Geometrie testen kann.

Die Browserschleife läuft mit requestAnimationFrame(). Ich rechne die vergangene Zeit zwischen den Bildern aus und gebe sie an die Engine weiter, damit der Ball nicht schneller fliegt, nur weil ein Bildschirm eine höhere Bildwiederholrate hat.

Was ich beim Bauen von Keeper gelernt habe

Schwierig war nicht, eine Person zu erkennen. Schwierig war zu entscheiden, wie diese Person ein digitales Tor ausfüllen soll, während der Schuss langsam echtem Reaktionsdruck ähnelt.

Das Spiel begann zu funktionieren, als ich aufhörte, Körperpunkte für einen fertigen Controller zu halten. Sie sind Rohmaterial. Der Controller entsteht aus Kalibrierung, Spiegelung, relativen Koordinaten, verstärktem Lehnen, Sichtbarkeitsprüfungen und Kollisionsformen. Das Gefühl kommt von einem lesbaren Anlauf, sichtbarem Kontakt und einer Schwierigkeitskurve, die das Problem verändert, ohne die Regeln zu ändern.

Das mag ich an Webcam-Spielen. Das System dahinter ist kompliziert, aber die Anweisung für den Spieler bleibt einfach: Den Anlauf lesen, den Schuss beobachten, nach dem Ball greifen und halten. Die ersten Level geben dir Zeit, diese Abfolge zu lernen. Die höheren verlangen, dass du sie in einer halben Sekunde schaffst.

Du kannst Keeper kostenlos im Browser spielen. Einen schnellen Überblick über das Spielgefühl gibt dir mein Begleitartikel zum AR-Fußballspiel. Wie ich dieselbe Posenerkennung fürs Laufen statt fürs Halten genutzt habe, steht in wie ich Dino Survival gebaut habe.