Kann man ein Multiplayer Spiel mit Vue.js programmieren?

Kann man ein Multiplayer Spiel mit Vue.js programmieren?

Multiplayer Spiele programmieren ist für viele ein weit entfernter Traum! Ich beweise Dir an einem praktischen Beispiel, dass man ein Multiplayer Spiel mit Vue.js entwickeln kann.

Nein, sooo schwer ein eigenes Mulitplayer Spiel zu programmieren ist es nicht! Ich selbst habe mir diese Frage gestellt und habe versucht mit meinem Kenntnisstand ein eigenes Spiel aufzubauen. Und es hat durchaus gut funktioniert. Aber nun von Anfang an.

Eines morgens saß ich mit meiner Freundin beim Frühstück und wir haben über eine native App das beliebte Gelegenheitsspiel „Schiffe versenken“ gespielt. Als eine weitere Person dazu kam und mitspielen wollte, merkten wir, dass das Spiel nur für maximal zwei Spieler ausgelegt ist und uns kam die Idee, eine „Team“-Version davon zu erschaffen. Gesagt, getan! Schon zwei Tage später überlegte ich, wie ich an die ganze Sachen ran gehen kann. Schnell kam ich zu dem Schluss, dass ich mit Spiele-Entwicklung in diesem Stil noch nichts zu tun hatte. Also musste ich das mit Technologien und Frameworks machen, die ich schon konnte. Mein Blick viel direkt auf das Frontend-Framework Vue.js in Verbindung mit Node.js und socket.io. Mit allen drei Technologien hatte ich bereits gearbeitet und wusste: damit kann es klappen!

Ich bin kein großer Fan vom langen Planen von Anwendungen, sondern fang‘ meist direkt an und schaue wie weit ich komme. Angefangen habe ich mit Node.js und habe eine RestAPI geschrieben, welche Spieler und Spiele verwaltet. Diese musste ich im Verlauf der Frontend-Programmierung natürlich noch stetig anpassen. Beim Frontend habe ich mich für – wie schon gesagt – Vue.js entschieden. Erst seit kurzer Zeit hatte ich mich Vue.js gearbeitet, wollte meine Kenntnisse dadurch festigen, aber mir erschien es auch geeigneter als z.B. jQuery. Auch Angular hatte ich in Betracht gezogen.

FleetStorm RestAPI Struktur

Die komplette RestAPI für das Vue.js Multiplayer Spiel ist verhältnismäßig sehr klein geblieben. Ich habe mich vorerst gegen eine Datenbank entschieden, da keinerlei Spielerdaten erfasst werden und die erstellten Spiel- und Spielerobjekte in einem Array gespeichert werden, die am Ende eines Spieles gelöscht werden, oder spätestens am Ende der Programmlaufzeit, wenn ich die Anwendung neu starte.

FleetStorm Frontend Components

Das Frontend hingegen sieht schon etwas umfangreicher aus. Grund hierfür ist, dass die hauptsächliche Logik aktuell im Frontend liegt.

Das Spiel ist bereits spielbar und ich habe viel dazu gelernt. Und Du hast jetzt hoffentlich auch einen kleinen Überblick und siehst, dass es machbar ist! Teste das Spiel doch mal selbst mit einem Freund und überzeuge dich: https://fleetstorm.lorenzhohmann.de

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.