So machst du ein Multiplayer-Browserspiel

Wähl rundenbasiert, Echtzeit oder vom Host gesteuert, sag, wie viele Spieler mitmachen und wie sie zusammen spielen, und Go Bananas baut ein Spiel, dem deine Freunde über einen Link beitreten.

Multiplayer macht aus einem kleinen Spiel einen Abend mit Freunden. Die schwierigen Teile sind, die Bildschirme aller Spieler übereinstimmend zu halten, mit Leuten umzugehen, die später dazukommen oder rausfliegen, und das Spiel zu teilen, ohne dass jemand etwas installieren muss. Auf Go Bananas beschreibst du das Spiel, und die Website kümmert sich um Räume, Einladungen und Verbindungen. Diese Anleitung behandelt die drei Arten von Multiplayer, wie du die gewünschte anfragst, wie das gemeinsame Spielen funktioniert und worauf du beim Design für mehr als eine Person achten solltest.

Die drei Arten von Multiplayer

Jedes Multiplayer-Spiel auf Go Bananas nutzt eine von drei Methoden, um die Spieler synchron zu halten. Du musst sie nicht beim Namen nennen, aber wenn du sie kennst, kannst du dein Spiel besser beschreiben.

Art	So funktioniert es	Gut für
Rundenbasiert	Die Spieler sind abwechselnd dran, und jeder Zug wird gesendet, sobald er gemacht ist	Brettspiele, Kartenspiele, Wortspiele, Puzzles, Strategie
Echtzeit	Position und Aktionen jedes Spielers werden viele Male pro Sekunde gesendet	Rennen, Shooter, Arenaspiele, Sport, Verfolgungsjagden
Vom Host gesteuert	Das Spiel eines Spielers (des Hosts) wendet die Regeln an und schickt das Ergebnis an alle	Spiele mit gemeinsamer Physik, Gegnern oder Timern, die alle Spieler gleich sehen müssen

Rundenbasiert ist am nachsichtigsten. Zwischen den Zügen passiert nichts, also verzögert eine langsame Verbindung nur einen Zug. Dame, Schach, Tic-Tac-Toe und Quizze passen alle dazu.

Echtzeit fühlt sich lebendig an, braucht aber mehr Sorgfalt. Jeder Spieler sendet seinen eigenen Zustand etwa 20-mal pro Sekunde, und die anderen Bildschirme zeichnen, was sie empfangen. Das passt zu Spielen, in denen jeder Spieler seine eigene Figur steuert, etwa bei einem Rennen oder einem Luftkampf.

Vom Host gesteuert ist für Spiele, in denen sich außer den Spielern noch etwas bewegt: ein Ball, dem beide Teams hinterherjagen, Gegnerwellen, eine schrumpfende Arena. Ein Spiel entscheidet, was passiert, also sehen alle denselben Ball an derselben Stelle.

So fragst du ein Multiplayer-Spiel an

Sag genau, wie die Leute zusammen spielen. Eine gute Anfrage beantwortet diese Fragen:

Wie viele Spieler? Spiele können bis zu 16 haben. Sag „2 Spieler“ oder „bis zu 8 Spieler“.
Rundenbasiert oder Echtzeit? „Die Spieler sind abwechselnd dran“ oder „alle bewegen sich gleichzeitig“.
Gegeneinander oder kooperativ? Spielen die Spieler gegeneinander oder gemeinsam gegen das Spiel?
Teams? „Zwei Teams zu je 3“, „jeder gegen jeden“.
Was beendet das Spiel? Eine Punktzahl, die man erreichen muss, ein Timer, der letzte Spieler, der übrig bleibt.

Zum Beispiel:

Ein Echtzeit-Rennspiel von oben für bis zu 6 Spieler auf einer Strecke mit engen Kurven. Drei Runden, wer zuerst ins Ziel kommt, gewinnt. Jeder Spieler wählt eine Autofarbe. Zeig die Position aller auf einer Minikarte.

Oder:

Ein rundenbasiertes Spiel für 2 Spieler: Vier gewinnt auf einem Raster von 7 mal 6. Zeig, wer am Zug ist, heb die Gewinnreihe hervor und biete eine Revanche an.

Jedes Spiel bekommt außerdem einen Einzelspielermodus mit einem Button „Play vs AI“ (gegen die KI spielen) und den Stufen Easy, Medium und Hard (leicht, mittel, schwer), damit man es auch allein ausprobieren kann. Wenn ein Spiel im Multiplayer-Modus startet, überspringt es dieses Menü und legt sofort los.

So funktioniert das gemeinsame Spielen auf Go Bananas

Einen Raum eröffnen

Öffne das Spiel und wähle Multiplayer statt Play Solo (allein spielen). Die Option Multiplayer erscheint nur bei Spielen, die für mehr als einen Spieler gemacht sind.
Wähle Create Room (Raum erstellen). Du wirst der Host.
Die Lobby zeigt einen Raumcode und einen Link unter „Share this link with friends“ (Teile diesen Link mit Freunden), mit Buttons, um ihn zu kopieren oder das Teilen-Menü deines Handys zu öffnen.
Freunde treten bei, und ihre Namen erscheinen in der Spielerliste.
Nur der Host kann Start Game (Spiel starten) drücken.

Beitreten

Es gibt zwei Wege hinein:

Der Link. Wer den Einladungslink öffnet, sieht ein Fenster Join Game (Spiel beitreten): „Your friend made this game with AI!“ (Dein Freund hat dieses Spiel mit KI gemacht!), ein Feld für deinen Namen und einen Button Join Game. Kein Konto und keine Installation nötig.
Der Raumcode. Wähle Multiplayer, dann Join Room (Raum beitreten), und tippe den Code aus 6 Zeichen ein. Codes lassen O, 0, I und 1 weg, damit man sie kaum verwechseln kann.

Man kann auch einem laufenden Spiel beitreten, wenn noch ein Platz frei ist. Sind alle Plätze belegt, erscheint „Room is full“ (Raum ist voll).

Wenn jemand geht oder die Verbindung verliert

Handys verlieren die Verbindung, und Leute wechseln die App, um die Einladung zu verschicken. Go Bananas ist darauf vorbereitet:

Ein Host, der in der Lobby kurz die App wechselt, behält den Raum, sodass die Einladung noch funktioniert, wenn er zurückkommt.
Wenn der Host endgültig geht, wird unter den noch verbundenen Spielern ein neuer Host bestimmt. Ist niemand mehr da, wird der Raum geschlossen.
Ein Spieler, der die Verbindung verliert, behält seinen Platz 15 Minuten lang.
Das Spiel versucht, sich selbst neu zu verbinden, 5-mal im Abstand von 5 Sekunden, und zeigt währenddessen „Connection lost — Reconnecting“ (Verbindung verloren – neue Verbindung wird hergestellt).
Ein Raum ohne Aktivität wird nach 30 Minuten geschlossen, und jeder Raum wird nach 4 Stunden geschlossen.

Design für mehr als einen Spieler

Ein Multiplayer-Spiel muss fair sein und auf jedem Bildschirm übereinstimmen. Diese Gewohnheiten helfen, und du kannst sie direkt anfragen.

Gib jedem Spieler seinen eigenen Startpunkt. Spieler, die übereinander erscheinen, beginnen das Spiel verwirrt. Bei Brettspielen sollte jeder Spieler das Brett von seiner eigenen Seite sehen.

Lass ein Spiel über gemeinsame Zufälle entscheiden. Wenn ein Kartenstapel gemischt oder eine Karte zufällig erzeugt wird, sollte der Host das einmal tun und das Ergebnis verschicken. Sonst würfelt jeder Bildschirm selbst, und die Spieler landen in verschiedenen Spielen.

Schick nie verdeckte Informationen. Wenn Spieler geheime Karten auf der Hand oder versteckte Rollen haben, schick die Geheimnisse der anderen Spieler gar nicht erst. Alles, was an einen Browser geschickt wird, kann ein neugieriger Spieler lesen.

Nutz „erst festlegen, dann aufdecken“ für gleichzeitige Entscheidungen. Bei Spielen wie Schere, Stein, Papier legt jeder Spieler zuerst seine Wahl fest, ohne sie zu zeigen. Erst wenn alle festgelegt haben, werden die Entscheidungen aufgedeckt.

Plan für Verzögerung. Echtzeit-Updates kommen etwa 20-mal pro Sekunde an, und jedes braucht etwas Zeit für den Weg. Glätte die Bewegung der anderen Spieler, statt sie von einer Position zur nächsten springen zu lassen, und entscheide Treffer an einer Stelle, damit sich zwei Bildschirme nicht widersprechen.

Entscheide, was passiert, wenn jemand geht. Bleibt seine Figur, verschwindet sie oder übernimmt der Computer? Endet das Match, wenn nur noch ein Spieler übrig ist? Schreib es in deine Anfrage.

Halte Nachrichten klein. Schick, was sich geändert hat, nicht das ganze Spiel, und bleib unter etwa 60 Nachrichten pro Sekunde und Spieler.

Für Entwickler: die Multiplayer-Helfer

Spiele auf Go Bananas bekommen eine fertige Verbindung, deshalb darf ein Spiel keinen eigenen WebSocket öffnen. Im Multiplayer-Modus beschreibt window.gameOptions die Sitzung (mode, playerId, isHost, players, roomCode, playerName), und die Abkürzungen window.playerId, window.isHost und window.playerName sind gesetzt. Im Einzelspielermodus ist window.mp ein Platzhalter, der nichts tut, sodass derselbe Code auch allein läuft.

Senden, über window.mp:

sendTurn(data): ein Zug in einem rundenbasierten Spiel. Verwende in data keinen Schlüssel namens type, sonst wird die Nachricht verworfen.
sendState(state): der Zustand deines eigenen Spielers in einem Echtzeitspiel. Das ist auf etwa 20 Sendungen pro Sekunde begrenzt.
sendAction(action): ein einmaliges Ereignis in einem Echtzeitspiel, etwa Schießen oder Springen.
sendHostState(state): der gemeinsame Zustand, vom Host in einem vom Host gesteuerten Spiel gesendet.

Empfangen, indem du Funktionen auf window definierst: onRemoteTurn, onRemoteState, onRemoteAction, onHostState, onPlayerJoined, onPlayerLeft, onPlayerDisconnected, onPlayerReconnected und onNewHost.

// Definiere die Empfangs-Callbacks auf der obersten Ebene des Skripts, nicht in einer
// Funktion, die erst später läuft, sonst gehen früh ankommende Nachrichten verloren.
window.onRemoteTurn = function (turn) {
  applyMove(turn.column);      // die Felder, die der andere Spieler gesendet hat
  myTurn = true;
  draw();
};

window.onPlayerLeft = function () {
  showMessage('Dein Gegner hat das Spiel verlassen');
};

window.onNewHost = function () {
  // Der Host ist gegangen, und ein neuer wurde bestimmt. Wenn dieses Spiel jetzt
  // der Host ist, übernimmt es das Senden des gemeinsamen Zustands.
};

function dropPiece(column) {
  if (!myTurn) return;
  applyMove(column);
  myTurn = false;
  draw();
  window.mp.sendTurn({ column: column });   // deine eigene Nachricht empfängst du nie
}

Ein paar Regeln sorgen dafür, dass es funktioniert:

window.mp ist bereit, sobald deine Skripte gelaufen sind, also sende aus Spielereignissen heraus, nicht aus den ersten Zeilen des Skripts.
Der Absender bekommt seine eigene Nachricht nie zurück. Wende deinen Zug lokal an und schick ihn dann.
Halte jedes Zustandsobjekt deutlich unter 1 MB.
Im Multiplayer lädt „Play Again“ (Nochmal spielen) das Spiel neu, damit alle Spieler gemeinsam frisch starten.