Erstellen eines Skribbl.io-Klons: Vom Konzept bis zur Fertigstellung

Ein Echtzeit-Multiplayer-Spiel wie Skribbl.io zu erstellen ist eine spannende Herausforderung, die verschiedene Aspekte der Webentwicklung vereint. In diesem Artikel werde ich über meine Implementierung und meine Überlegungen beim Erstellen eines Echtzeit-Klons sprechen, wie man mit einem rundenbasierten Spiel und einem Timer-System umgehen kann

Wenn Sie sich den Quellcode für das Projekt ansehen möchten, finden Sie ihn hier Github

Tech-Stack

Bevor wir uns mit den Details befassen, schauen wir uns kurz den für dieses Projekt verwendeten Tech-Stack an:

• Node.js: Für den Backend-Server.
• Socket.IO: Für Echtzeitkommunikation.
• Redis: Für eine effiziente Datenverarbeitung.
• Vite: Für schnelle Entwicklung mit React.
• TypeScript: Für Typsicherheit sowohl im Frontend als auch im Backend.
• Reagieren: Zum Erstellen der Benutzeroberfläche.
• Docker: Zum Containerisieren der Anwendung.

Einrichten des Backends

Das Backend basiert auf Node.js und Socket.IO, die sich perfekt für die Abwicklung von Echtzeitinteraktionen eignen. Hier ein kurzer Überblick über die Hauptkomponenten:

1. WebSockets für Echtzeitkommunikation

Socket.IO ermöglicht eine nahtlose Kommunikation zwischen Server und Clients. Wir verwenden es, um Ereignisse wie das Betreten von Räumen durch Spieler, das Starten von Spielen und das Senden von Zeichnungsdaten zu verwalten.

2. Raumsystem

Jedes Spiel findet in einem einzigartigen Raum statt, der durch eine Raum-ID identifiziert wird. Mit dieser ID betreten Spieler einen Raum und interagieren mit anderen im selben Raum. Das System verwaltet auch Spielerverbindungen und -trennungen.

Aber hier haben wir ein Problem: Wie können wir sicherstellen, dass unser Server die Daten behält, die im Spiel waren, wenn der Server jemals abstürzt

Hier verwenden wir eine Datenbank, die schnell ist und auch einen vom Server getrennten Körper

Redis ist eine gute Wahl für solche Anwendungsfälle. Es handelt sich um eine In-Memory-Datenbank, die schnell ist und separat auf einem anderen Server ausgeführt werden kann

Darüber werden wir später im Beitrag mehr sprechen.

3. Ereignisbehandlung

Der Server wartet auf verschiedene Ereignisse und sendet diese aus:

• Client-Ereignisse: Verbinden, Trennen, JoinRoom, LeaveRoom, StartGame, Draw, Rate, ChangeSettings, WordSelect
• Serverereignisse: JoinedRoom, PlayerJoined, PlayerLeft, GameStarted, GameEnded, DrawData, Guesed, TurnEnded, ChooseWord, WordChosen, SettingsChanged, GuessFail

Entwicklung des Frontends

Für das Frontend habe ich React mit TypeScript und Vite verwendet, um eine reibungslose Entwicklungserfahrung zu gewährleisten.

1. Erstellen der Benutzeroberfläche

Die Benutzeroberfläche enthält Komponenten zum Zeichnen, Raten und Verwalten von Spieleinstellungen. Die komponentenbasierte Architektur von React machte es einfach, eine dynamische und reaktionsfähige Benutzeroberfläche zu erstellen.

2. Umgang mit dem Spielstatus

Das Frontend verwaltet den Spielstatus, einschließlich Spielerergebnisse, aktuelle Runde und Zeichnungsdaten. TypeScript stellt sicher, dass die Datenstrukturen klar definiert und fehlerfrei sind.

3. Echtzeit-Updates

Mithilfe von Socket.IO wird das Frontend in Echtzeit basierend auf Serverereignissen aktualisiert. Wenn beispielsweise ein Spieler zeichnet, werden die Zeichnungsdaten an alle Clients im Raum gesendet.

Spielstatusverwaltung

Eine effektive Spielstatusverwaltung ist entscheidend, um ein reibungsloses und unterhaltsames Erlebnis in einem Echtzeit-Multiplayer-Spiel wie Skribbl.io zu gewährleisten. Hier ist ein detaillierter Blick darauf, wie verschiedene Aspekte des Spielstatus verwaltet werden:

Eintreten und Verlassen eines Spielers

Das Verwalten von Spielern, die einen Raum betreten und verlassen, umfasst mehrere wichtige Schritte:

• Beitritt:

  1. Ereignisaussendung: Wenn ein Spieler einem Raum beitreten möchte, sendet er ein JoinRoom-Ereignis mit der Raum-ID an den Server.
  2. Validierung: Der Server validiert die Raum-ID und prüft, ob der Raum existiert.
  3. Spielerhinzufügung: Falls gültig, wird der Spieler zur Spielerliste des Raums hinzugefügt. Der Server aktualisiert dann den Spielstatus und sendet ein „playerJoined“-Ereignis an alle Clients im Raum, um sie über die Ankunft des neuen Spielers zu informieren.
  4. UI-Update: Im Frontend wird die Anwesenheit des neuen Spielers in der Spielerliste des Raums angezeigt, sodass jeder die aktuellste Spielerliste sieht.

• Gehen:

  1. Ereignisaussendung: Wenn ein Spieler sich entscheidet zu gehen, sendet er ein LeaveRoom-Ereignis an den Server.
  2. Spielerentfernung: Der Server entfernt den Spieler aus der Spielerliste des Raums und aktualisiert den Spielstatus entsprechend.
  3. Benachrichtigung: Der Server sendet ein PlayerLeft-Ereignis an alle verbleibenden Clients und benachrichtigt sie, dass der Spieler den Raum verlassen hat.
  4. UI-Update: Das Frontend spiegelt diese Änderung wider, indem der Spieler aus der Spielerliste entfernt und bei Bedarf alle laufenden Spielmechaniken angepasst werden.

Wortauswahl

Die Wahl eines Wortes und die Steuerung, wer an der Reihe ist, erfordern mehrere Mechanismen:

• Aktueller Spielerzug:
  1. Turn Management: Der Server führt eine Aufzeichnung darüber, wer an der Reihe ist, ein Wort auszuwählen. Dies wird durch den Spielstatus verwaltet, der eine Eigenschaft enthält, die die ID des aktuellen Spielers angibt.
  2. Wortauswahl-Aufforderung: Wenn ein Spieler an der Reihe ist, ein Wort auszuwählen, erhält er vom Server ein ChooseWord-Ereignis, das ihn auffordert, ein Wort auszuwählen.

• Wortverlust verhindern:

  1. Turn-Restricted Access: Das gewählte Wort wird nicht sofort an andere Spieler übertragen. Stattdessen wird es nur geteilt, wenn der Aussteller an der Reihe ist, um einen unfairen Vorteil zu verhindern.
  2. Ereignisaussendung: Sobald die Schublade das Wort ausgewählt hat, sendet der Server ein „wordChosen“-Ereignis an alle Spieler. Dieses Ereignis beinhaltet eine Benachrichtigung, dass das Wort ausgewählt wurde und zum Erraten bereit ist.

• Benachrichtigung über Wortauswahl:

  1. Broadcast: Das WortChosen-Ereignis beinhaltet eine Benachrichtigung, dass ein Wort ausgewählt wurde, die an alle Spieler im Raum gesendet wird.
  2. Frontend-Handhabung: Auf der Client-Seite werden die Spieler aktualisiert, um anzuzeigen, dass die Zeichnungsphase begonnen hat, und sie können nun mit dem Raten beginnen.

Umgang mit Zeitüberschreitungen bei der Wortauswahl

Um Fälle zu behandeln, in denen der aktuelle Player die Wortauswahl verzögern könnte:

• Automatische Zuweisung:
  1. Timeout-Mechanismus: Der Server implementiert einen Timer, der startet, wenn der Spieler an der Reihe ist, ein Wort auszuwählen. Wenn der Spieler innerhalb der vorgegebenen Zeit kein Wort auswählt, wird ein Timeout-Ereignis ausgelöst.
  2. Wortzuweisung: Der Server wählt automatisch ein Wort aus einer vordefinierten Liste aus und weist es dem Player zu. Dadurch wird sichergestellt, dass das Spiel ohne unnötige Verzögerungen fortgesetzt wird.
  3. Benachrichtigung: Anschließend wird ein wordChosen-Ereignis ausgegeben, um alle Spieler darüber zu informieren, dass ein Wort zugewiesen wurde und die Zeichenphase beginnt.

Umgang mit Zeichnungsdaten

Der Umgang mit Zeichnungsdaten ist für die Aufrechterhaltung der Synchronisierung zwischen Spielern unerlässlich:

• Echtzeitzeichnen:
  1. Auslosungsereignisse: Spieler senden mithilfe des Auslosungsereignisses Auslosungsdaten an den Server. Zu diesen Daten gehören Pinselfarbe, Radius und Koordinaten der gezeichneten Punkte.
  2. Broadcasting: Der Server empfängt diese Daten und sendet sie mithilfe eines drawData-Ereignisses an alle Clients im Raum. Dadurch wird sichergestellt, dass die Leinwand jedes Spielers in Echtzeit mit den neuesten Zeichnungsinformationen aktualisiert wird.

Umgang mit Spielerschätzungsereignissen

Das Verwalten der Spielerschätzungen umfasst die Verarbeitung und Validierung jeder Schätzung:

• Einsendung erraten:

  1. Ereignisbehandlung: Wenn ein Spieler eine Vermutung anstellt, sendet er mit seinem Vermutungswort ein Vermutungsereignis an den Server.
  2. Validierung: Der Server verarbeitet die Vermutung und vergleicht sie mit dem richtigen Wort. Wenn die Vermutung richtig ist, aktualisiert der Server den Spielstatus und die Spielerergebnisse.

• Übertragungsergebnisse:

  1. Rateergebnis: Der Server sendet ein erratenes Ereignis an alle Spieler, das angibt, ob die Vermutung richtig war oder nicht.
  2. UI-Update: Im Frontend wird allen Spielern das Ergebnis angezeigt, wer richtig geraten hat und der Spielfortschritt aktualisiert.

Auszeiten zum Zeichnen und Raten

Der Umgang mit Zeitbeschränkungen ist der Schlüssel, um das Spiel spannend zu halten:

• Zeitüberschreitung:
  1. Zeitmanagement: In jeder Runde gibt es ein festgelegtes Zeitlimit für die Auslosung. Der Server verfolgt diese Zeit und löst ein turnEnded-Ereignis aus, wenn die Zeit abläuft.
  2. Übergang: Dieses Ereignis signalisiert das Ende der Ziehungsphase und das Spiel geht in die Ratephase oder die nächste Runde über.

• Alle Spieler erraten:
  1. Erraten-Abschluss: Wenn alle Spieler das Wort erraten, bevor die Zeit abgelaufen ist, löst der Server vorzeitig ein TurnEnde-Ereignis aus.
  2. Spielablauf: Dieses Ereignis informiert alle Kunden darüber, dass die Ratephase abgeschlossen ist, und leitet das Spiel in die nächste Phase oder Runde über.

Dieser Ansatz zur Verwaltung des Spielstatus gewährleistet ein reibungsloses, interaktives und faires Erlebnis für alle Spieler und steigert den Gesamtspaß am Spiel.

Abschluss

Das Erstellen eines Skribbl.io-Klons erfordert ein komplexes Zusammenspiel von Echtzeitkommunikation, Spielstatusverwaltung und Benutzerinteraktionen. Im Rahmen dieses Projekts haben wir verschiedene Facetten der Spieleentwicklung erkundet, von der Handhabung von Spielerverbindungen und der Wortauswahl bis hin zur Verwaltung von Zeichnungsdaten und Spielerschätzungen.

Wichtige Erkenntnisse

• Echtzeitkommunikation: Die Nutzung von Socket.IO ermöglicht ein nahtloses und interaktives Gameplay und stellt sicher, dass alle Spieler synchron bleiben.
• Statusverwaltung: Eine effiziente Handhabung des Spielstatus – wie Spielerbeitritt, Wortauswahl und Zeichnungsdaten – ist für ein reibungsloses Benutzererlebnis von entscheidender Bedeutung. Durch die Implementierung von Zeitüberschreitungen und automatischen Zuweisungen wird ein unterbrechungsfreier Spielablauf gewährleistet.
• Benutzererfahrung: Die Aufrechterhaltung einer ansprechenden und reaktionsfähigen Benutzeroberfläche erhöht die Spielerzufriedenheit. Klares Feedback zu Aktionen wie Zeichnen und Raten, kombiniert mit zeitnahen Updates, hält die Spieler auf dem Laufenden und sorgt dafür, dass sie in das Spiel investieren.

Nächste Schritte

Wenn Sie inspiriert sind, dieses Projekt weiter voranzutreiben, denken Sie über Folgendes nach:

• Neue Funktionen hinzufügen: Implementieren Sie zusätzliche Spielmodi, Anpassungen oder Verbesserungen, um das Spiel dynamischer zu machen.
• Leistung optimieren: Entdecken Sie Möglichkeiten zur Verbesserung der Leistung, z. B. durch Optimierung der Zeichnungsdatenübertragung oder Reduzierung der Latenz.
• Benutzeroberfläche/UX verbessern: Verfeinern Sie die Benutzeroberfläche und das Erlebnis basierend auf dem Feedback der Spieler, um das Spiel unterhaltsamer zu machen.

Dieses Projekt war eine aufregende Reise in die Entwicklung von Echtzeitspielen, bei der verschiedene Technologien und Techniken kombiniert wurden, um ein unterhaltsames und fesselndes Multiplayer-Erlebnis zu schaffen. Ich hoffe, dieser Artikel hat wertvolle Einblicke in das Game State Management gegeben und Sie dazu inspiriert, mehr über die Welt der Spieleentwicklung zu erfahren.

Teilen Sie Ihre Gedanken, Fragen oder Verbesserungen zu diesem Projekt gerne in den Kommentaren unten mit. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonErstellen eines Skribbl.io-Klons: Vom Konzept bis zur Fertigstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!