Multiplayer-Browsergame mit Node.js

Echtzeit Browsergame mit Node.jsIch arbeite momentan an einem Multiplayer-Browsergame, welches ich auf Basis der Node.js-Plattform mit JavaScript programmiere.

Was die grundlegende Idee des Spieles ist und wie ich es entwickle, erkläre ich in diesem Artikel.

Idee #

Node.js-Spiel ShopInnerhalb des Browsergames besitzt jeder Spieler eine Figur, mit der er Räume anderer Spieler erkunden, oder auch eigene Räume erstellen und gestallten kann.

Gegenstände hierfür können mit virtuellen Münzen gekauft werden, welche der Spieler in regelmäßigen Abständen erhält. Mittels eines Marktes können Spieler ihre Gegenstände untereinander handeln.

Einige Gegenstände werden ausschließlich für besondere Dinge wie z.B. für die beliebtesten Räume vergeben. Da sie nur in begrenzten Mengen vorhanden sind, sind sie somit seltener und auch mehr Wert als andere.

Server & Client #

Der Client (also der Webbrowser) kommuniziert mit dem Node.js-Server über eine WebSocket-Verbindung. Um den Betrieb auch für ältere Browser zu gewährleisten kommt die Abstraktionssicht Socket.IO zum Einsatz, welche alternativ z.B die AJAX-Technologie verwenden kann.

Als Datenbank verwende ich MongoDB zusammen mit Mongoose.js, da MongoDB aufgrund des JSON-ähnlichen Formates für Node.js wahrscheinlich am besten geeignet ist.

Der Großteil den Arbeit findet jedoch nicht auf der Seite des Node.js-Servers, sondern clientseitig im Webbrowser statt. Der Server kümmert sich hautsächlich um die Übertragung, Validierung und Speicherung der Daten sowie um sicherheits-relevante Dinge. Den Rest erledigt der Client.

HTML5 & CSS3 #

neuen Raum anlegenDer Raum sowie die Figuren werden mit HTML5-Canvas und dem high-performance Framework KineticJS gerendet, was bisher eines der aufwendigsten Dinge war. Das restliche Benutzer-Interface habe ich in CSS3 geschrieben, und verwende dabei einige Gestaltungselemente von Bootstrap 3.

Um alle Informationen und Daten immer aktuell zu halten, informiert der Server den Client bei Änderungen sofort über die WebSocket-Verbindung, sofern dieser sich im entsprechendem Raum befindet oder das jeweilige Fenster geöffnet hat. Um die Aktualisierung des Interface kümmert sich – bis auf die Canvas – AngularJS.

Weitere Biblioteken/Frameworks die Verwendung finden sind unter anderem jQuery, jQuery UI, Parsley.js, i18next, Soundmanager 2 und die Icon-Sammelung Font Awesome.

Video #

Ein kurzes Video aus einem etwas früherem Entwicklungsstand zeigt einen einfachen Raum, eine Figur die sich darin bewegt und den Chat in Aktion:

Video auf YouTube ansehen

VN:F [1.9.22_1171]
Bewertung: 4.3/5 (8 Bewertungen)
Multiplayer-Browsergame mit Node.js, 4.3 out of 5 based on 8 ratings
Regelmäßige Beiträge über Node.js

nodecodeAbonniere den kostenlosen NodeCode-Newsletter, und bleibe auf dem laufenden über neue Beiträge zum Thema Node.js. Darunter:

  • Informationen und Neuigkeiten rund um Node.js und zugehörigen Modulen
  • Vorstellung von interessanten Frameworks und Bibliotheken
  • Anleitungen und Tutorials zu Node.js und weiterführenden Technologien
  • Sowie vieles mehr...

schon 4 Kommentare gehe zum kommentieren

  1. timo /

    gibt es das auch irgendwo als Tutorial ? oder bei GitHub?

  2. Anonymous /

    also du willst das spiel habbo nachbauen?

    1. NodeCode / Beitrags-Autor

      Ich versuche nicht ein bestimmtes Spiel nachzubauen, als vielmehr etwas eignes zu entwerfen. Das Spiel Habbo ist von der Grundidee her (Räume bauen und mit Möbeln gestallten) sicher sehr ähnlich, allerdings habe ich z.B. bei der Art und Weise wie man an Möbel kommt ein paar andere Ideen. Erwarte also keinen 1:1 Habbo-Klon 😉

  3. Sascha /

    Bist Du hiermit schon wieder gekommen?
    ich hatte gehofft, das sich aus Deiner Nutzung von Mongoose.js vielleicht noch der eine oder andere Artikel ergibt

hinterlasse einen Kommentar