HTML5 Canvas und Websockets als Spieleumgebung

Screen Shot Ich habe mir am Sonntag erst einmal seit langem wieder einen Tag zum rumbasteln mit neuer Technik gegönnt. Ich wollte mir schon immer einmal WebSockets näher anschauen und bin dabei auf die Socket.io JavaScript library gestoßen welche sich ganz wunderbar mit expressJS (web application framework für node) kombinieren lässt. Die Idee war es ein kleines Multiplayer Spiel mit möglichst viel Datenübertragungen zu implementieren. Ein Spieleklassiker wie Asteroids, wie hier verwendet, war da ein gutes Beispiel und einfach in JavaScript zu implementieren, zumal das eigene Spielgeschehen hier nicht im Vordergrund stand. Die Oberfläche und Einzelspieler Implementierung habe ich mit AngularJS und Bootstrap umgesetzt um so schnell wie möglich zu einem Ergebnis zu kommen. Ein Spieler kann seinen Namen ändern, Astroid-like auf der Oberfläche herumfliegen und versuchen gegnerische Schiffe abzuschießen.

Die eigentliche Kommunikation über Websockets und die Verteilung der Daten als Broadcast an alle verfügbaren Clienten ist durch eine Art Pub-Sub in Socket.io wie folgt realisiert:

Das Frontend nutzt ein Angular Modul von Brian Ford „btford.socket-io„. Ich werde noch ein wenig damit herumspielen um einschätzen zu können ob solche live Übertragungen performant genug sind, um ein richtiges Multiplayer Spiel im Browser mit diesem Stack implementieren zu können.

Leider konnte ich wegen fehlenden Ports auf uberspace das Projekt nicht hosten. Ich habe jedoch ein kleines Screenmovie als Beispiel davon gemacht.

Quelltext: github.com/stetro/astroids

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s