Wie fügt man einem reinen Tastatur-Browserspiel Touch-Steuerung hinzu?

Lege eine eigene Touch-Ebene über das Spiel, die ihm die Eingaben liefert, die es schon versteht. So haben wir es bei KittenGalaxy gemacht, und das haben wir noch nicht getestet.

Füge eine eigene Ebene mit Bildschirm-Bedienelementen hinzu, die Berührungen in Eingaben verwandelt, die dein Spiel schon verarbeitet, und zeige für jeden Bildschirm des Spiels andere Bedienelemente. Du musst das Spiel nicht umschreiben. Genau so haben wir KittenGalaxy auf Handys spielbar gemacht, und dieser Artikel geht die Entscheidungen durch, einschließlich der Teile, die wir noch nicht testen konnten.

Was erwartete das Spiel vorher?

KittenGalaxy ist ein Arcade-Shooter, geschrieben als eine einzige JavaScript-Datei, die auf ein Canvas zeichnet. Alle Eingaben kamen auf drei Wegen an: Tastendrücke zum Fliegen, Schießen und für die Menüs; getippte Zeichen für den Namen eines Piloten; und Mausklicks für die Shop-Liste und für ein auf das Canvas gezeichnetes Ziffernfeld in den Matheaufgaben.

Auf einem Handy hat ein Spieler damit nichts zum Drücken. Es gibt keine Tasten, und die Zifferntasten auf dem Canvas, 38 Einheiten breit in einem 720 Einheiten breiten Spielfeld, sind auf einem 375 Pixel breiten Handy etwa 20 CSS-Pixel breit. Das ist zu klein, um sie zuverlässig zu treffen.

Soll Touch einen gemeinsamen Eingabezustand setzen oder Tastenereignisse senden?

Es gibt zwei gängige Entwürfe.

Der gemeinsame Zustand ist der sauberere Entwurf, und wenn du heute ein Spiel beginnst, bau es so. Wir haben uns aus einem Grund für synthetische Tastenereignisse entschieden: KittenGalaxy wird an anderer Stelle entwickelt, und wir behalten seine Datei Byte für Byte so, wie wir sie bekommen, damit eine neuere Version nie bedeutet, unsere Änderungen neu zu machen. Per Skript erzeugte Ereignisse erreichen gewöhnliche Listener sehr wohl. Sie lösen nicht die Standardaktionen des Browsers aus, und die braucht ein Spiel nicht.

Die Touch-Ebene muss außerdem wissen, auf welchem Bildschirm das Spiel gerade ist. Dafür fügt unser Build-Schritt ein kleines, nur lesbares Objekt hinzu, das eine Handvoll Werte offenlegt, etwa den aktuellen Zustand und ob eine Rakete montiert ist. Nichts darin kann das Spiel verändern.

Welche Bedienelemente braucht jeder Bildschirm?

Ein fester Satz von Buttons ist der übliche erste Versuch, und er scheitert, sobald das Spiel ein Menü hat. Liste jeden Bildschirm auf und was ein Spieler dort tun können muss.

Drei Details waren wichtiger, als wir erwartet hatten.

Nimm für Text ein echtes Textfeld. Nur ein fokussiertes Feld bringt ein Handy dazu, seine Tastatur zu zeigen. Wir halten die Tastendrücke dieses Feldes vom Spiel fern und tippen den fertigen Namen in einem Zug ins Spiel.

Ein Finger kann nicht schweben. Mit der Maus wählt das Zeigen auf eine Shop-Zeile sie aus und ein Klick kauft sie. Ein Tippen macht beides auf einmal, was versehentliche Käufe leicht macht. Die Ebene macht aus dem ersten Tippen auf eine Zeile eine Auswahl und lässt das zweite als Kauf durch.

Blende aus, was nicht zutrifft. Der Raketenbutton erscheint, wenn eine Rakete montiert ist, und der Bombenbutton, wenn man eine Bombe hat. Weniger Buttons bedeuten größere Buttons.

Wie baut man einen Daumenstick?

Das Schiff im Spiel bewegt sich in acht Richtungen, wie mit Pfeiltasten, der Stick muss also nur entscheiden, welche Pfeiltasten gedrückt sind. Unserer erscheint dort, wo der Daumen aufsetzt, ignoriert Bewegungen innerhalb einer Totzone von 12 Pixeln und behandelt eine Richtung als gedrückt, wenn der Daumen auf dieser Achse weit genug ist:

const DEAD = 12;
function steer(dx, dy) {
  const far = Math.hypot(dx, dy) > DEAD;
  const want = {
    ArrowLeft:  far && dx < 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowRight: far && dx > 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowUp:    far && dy < 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
    ArrowDown:  far && dy > 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
  };
  // press the keys that became true, release the ones that became false
}

Die 0,41 ist der Tangens von 22,5 Grad, der den Kreis in acht gleiche Stücke teilt. Wandert der Daumen über den Rand hinaus, folgt ihm die Mitte des Sticks, sodass ein Richtungswechsel eine kleine Bewegung braucht statt einer langen.

Wir haben Pointer-Ereignisse verwendet, die Touch, Stift und Maus mit einem Satz von Handlern abdecken, sowie Pointer Capture, damit der Stick einen Daumen weiter empfängt, der von ihm abrutscht. Geschossen wird standardmäßig automatisch, mit einem Schalter für alle, die lieber einen Feuerbutton haben: Einen Daumen eine ganze Sitzung lang gedrückt zu halten ist ermüdend, und ein Shooter verliert wenig, wenn er ständig feuert.

Was hindert den Browser daran, gegen das Spiel zu arbeiten?

Ein Browser behandelt Berührungen als Scrollen, Zoomen und Textauswahl, solange man ihm nichts anderes sagt.

• Setze [touch-action: none](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) auf das Spiel und seine Bedienelemente, damit Ziehbewegungen dir gehören.
• Schalte Textauswahl und das Langdruck-Menü über dem Spiel ab.
• Lass alle gehaltenen Tasten los, wenn das Fenster den Fokus verliert. Sonst fliegt ein Schiff weiter nach links, nachdem eine Benachrichtigung den Bildschirm übernommen hat.
• Starte den Ton mit einem echten Tippen. Browser erlauben Audio erst, nachdem der Spieler mit der Seite interagiert hat, das erste Tippen weckt also auch den Ton des Spiels.
• Aktualisiere die Bedienelemente über einen Timer, nicht nur aus der Zeichenschleife, damit die richtigen Buttons da sind, bevor das erste Bild gezeichnet wird.
• Nutze die Balken, die das Spiel leer lässt. Im Hochformat sitzt unser quadratisches Spielfeld in der Mitte, die Bedienelemente kommen also in die schwarzen Balken darüber und darunter. Im Querformat kommen sie in die Ecken und bleiben blass.

Was haben wir getestet und was nicht?

Am Tag der Veröffentlichung, dem 8. Oktober 2026, haben wir die Touch-Ebene in einem Desktop-Browser in Handygröße geprüft, im Hochformat (375 × 812) und im Querformat (812 × 375), und sie mit geskripteten Berührungen bedient: einen Piloten über das Textfeld anlegen, einen Durchlauf starten, alle acht Stick-Richtungen, der Shop und die Antwort auf eine Mathefrage auf dem Ziffernfeld.

Auf einem echten Handy oder Tablet haben wir es noch nicht gespielt. Emulation zeigt nicht, wie sich der Stick unter einem echten Daumen anfühlt, wie sich die Tastatur jedes Handys verhält oder wie ein langsameres Gerät zurechtkommt. Genau das steht auf der Seite des Spiels unter seiner Option für mobile Browser, und wir aktualisieren es, sobald echte Geräte ausprobiert wurden. Wenn du es auf deinem Handy spielst, ist eine Rezension mit dem Gerät und dem, was passiert ist, das Nützlichste, was du schicken kannst.

Häufige Fragen

Brauche ich für Touch-Steuerung eine Spiel-Engine? Nein. Buttons sind gewöhnliche HTML-Elemente, die über dem Canvas liegen, und der Browser ermittelt, welches berührt wurde.

Sollten Buttons auf das Canvas gezeichnet oder in HTML gebaut werden? In den meisten Fällen in HTML. Du bekommst Treffererkennung, Multi-Touch und Beschriftungen für Barrierefreiheit, ohne sie zu schreiben, und kannst per CSS umgestalten.

Wie groß sollte ein Touch-Button sein? Die Buttons, die man beim Spielen drückt, sind im Hochformat mindestens 46 CSS-Pixel breit und hoch, die wichtigsten größer; ein paar Hilfsbuttons in den Ecken sind absichtlich kleiner. Die Canvas-Tasten, die wir ersetzt haben, waren etwa 20 groß.

Finden Spieler eine versteckte Geste? Geh davon aus, dass nicht. Jede Aktion in unserer Ebene hat einen sichtbaren, beschrifteten Button.

Kann ich ein Spiel auf HeapPlay eintragen, bevor seine mobile Steuerung fertig ist? Ja. Jede Spielmöglichkeit wird einzeln aufgeführt und geprüft, du kannst also dein Spiel einreichen, jetzt mit einer Desktop-Option, und später eine mobile ergänzen. Verifizierte Entwickler können dann jede Version selbst eintragen; siehe was Entwickler bekommen.