Can I program a multiplayer game with Vue.js?

Can I program a multiplayer game with Vue.js?

Programming multiplayer games is a distant dream for many! I’ll show you with a practical example that you can develop a multiplayer game with Vue.js.

No, it is not sooo hard to program your own multiplayer game with Vue.js! I asked myself this question and tried to build my own game with my level of knowledge. And it worked quite well. But now from the beginning.

One morning I sat with my girlfriend at breakfast and we played the popular casual game “Sinking ships” with a native app. When another person joined us and wanted to play, we noticed that the game was only designed for a maximum of two players and we had the idea to create a “team” version of it. No sooner said than done! Two days later, I was thinking about how I could get to the whole thing. I quickly came to the conclusion that I had nothing to do with game development in this style. So I had to do it with technologies and frameworks that I could already do. My look directly at the frontend framework Vue.js in connection with Node.js and socket.io. I had already worked with all three technologies and knew: it can work!

I’m not a big fan of long application planning, but usually start straight away and see how far I can get. I started with Node.js and wrote a RestAPI that manages players and games. Of course, I had to adapt it constantly during the course of frontend programming. For the frontend I decided for – as already mentioned – Vue.js. I had only been working Vue.js for a short time and wanted to consolidate my knowledge, but it also seemed more suitable than e.g. jQuery. I had also considered Angular.

FleetStorm RestAPI Structure

The complete RestAPI for the 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 is 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 frontend, on the other hand, looks a bit more extensive. The reason for this is that the main logic is currently in the frontend.

The game is already playable and I have learned a lot. And hopefully you now have a small overview and see that it is feasible! Try the game yourself with a friend and convince yourself: https://fleetstorm.lorenzhohmann.de

Leave a comment

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