Mit Vue.js ein Spiel programmieren!? – Mein Praxis-Beispiel

Mit Vue.js ein Spiel programmieren!? – Mein Praxis-Beispiel Thumbnail
Veröffentlicht am 3. Mai 2020Zuletzt aktualisiert am 19. Juni 2020

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.

Anzeige

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 ich wusste: damit kann es klappen!

Übrigens: Mit meinem Post Das ultimative Node.js Einsteiger Tutorial kannst Du Deine ersten Schritte mit Node.js machen! 🙂

Anzeige

Und damit ihr wisst, was ich damit erreicht habe, hier schon einmal das Endergebnis (InGame Ansicht):

Screenshot Fleetstorm

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 Rest API 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, aber wieder verworfen, da mein Kenntnisstand hier gegen 0 ging.

FleetStorm RestAPI Struktur

Die komplette Rest API 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.

Nach einigen Tagen war die erste Version dann schon spielbar und nach und nach kamen immer mehr neue Features hinzu. Das Spiel wurde besser als ich erwartet hatte! 🙂

Anzeige

Das Projekt hat wirklich Spaß gemacht und ich habe extrem viel dazu gelernt. Du siehst also, es geht. Auch wenn man mit einer Technologie vielleicht noch nicht so viel gemach hat, man kann nur besser werden.

Das soll auch für Dich ein Anreiz sein. Dabei ist es egal, ob Du nun auch Vue.js und Node.js verwendest oder eine andere Technologie. Nur wer macht kann gewinnen! 🙂

Falls Du sehen willst, was dabei rausgekommen ist, schnapp Dir einen Freund und testet das ganze doch mal aus: https://fleetstorm.lorenzhohmann.de

Hier findest Du jetzt noch eine Auswahl weiterer Beiträge von mir, die das Thema Vue.js und Node.js ausführlicher behandeln! Bei Fragen kannst Du mir gern schreiben! 🙂

Ähnliche Beiträge
Schreib einen Kommentar

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