Programming a game with Vue.js!? – My practial example

Programming a game with Vue.js!? – My practial example Thumbnail
Published on 3. May 2020Last updated on 19. June 2020

Programming multiplayer games is a distant dream for many! I will prove to you with a practical example that you can develop a multiplayer game with Vue.js.

Advertisement

I have asked myself this question and have tried to build up my own game with my knowledge. And it worked quite well. But now from the beginning.

One morning I was sitting with my girlfriend at breakfast and we played the popular casual game “Sink Ships” via a native app. When another person joined us and wanted to play, we noticed that the game is only designed for a maximum of two players and we came up with the idea to create a “team” version of it. No sooner said than done! Just two days later I was already thinking about how I could go about it. I quickly came to the conclusion that I hadn’t had anything to do with game development in this style yet. So I had to do it with technologies and frameworks that I already knew how to do. My view was a lot directly to the frontend framework Vue.js in combination with Node.js and socket.io. I had already worked with all three technologies and I knew: it can work with that!

By the way: With my post The ultimate Node.js Beginner Tutorial you can make your first steps with Node.js! 🙂

Advertisement

And to let you know what I achieved with it, here is the final result (InGame view):

Screenshot Fleetstorm

I’m not a big fan of long planning of applications, but usually start directly and see how far I get. I started with Node.js and wrote a Rest API which manages players and games. Of course I had to adapt this during the frontend programming. For the frontend I decided to use Vue.js – as already mentioned. I had only worked with Vue.js for a short time and wanted to consolidate my knowledge, but it seemed more suitable than e.g. jQuery. I had also considered Angular, but rejected it again, because my knowledge level here was close to 0.

FleetStorm RestAPI Strcuture

The complete Rest API for the Vue.js multiplayer game has remained relatively very small. I decided against a database for the time being, because no player data is recorded and the created game and player objects are stored in an array, which are deleted at the end of a game or at the latest at the end of the program runtime, when I restart the application.

FleetStorm Frontend Components

The front end on the other hand looks a bit more extensive. The reason for this is that the main logic currently lies in the frontend.

After a few days the first version was already playable and more and more new features were added bit by bit. The game became better than I had expected! 🙂

Advertisement

The project was really fun and I learned a lot. So you see, it works. Even though you may not have done so much with one technology, you can only get better.

This should also be an incentive for you. It doesn’t matter if you use Vue.js and Node.js or any other technology. Only those who make things can win! 🙂

If you want to see what has come out of it, grab a friend and test it out: https://fleetstorm.lorenzhohmann.de

Here you can find a selection of further contributions from me, which deal with the topic Vue.js and Node.js in more detail! If you have any questions, feel free to write to me! 🙂

Related Posts
NEW 🚀
Leave a comment

Your email address will not be published. Required fields are marked *