azgaar.github.io | Redirect to a main project page

I think your best option would be to:

• Store the map data in a simple serializable data structure. For example a double array of objects with some integers - a Tile Type enum, a Building Type, state data if you need it, etc. That will allow you to easily serialize and send the data between the server and the clients.

• Use a game engine / canvas renderer / webgl renderer to render a view to the client by using the data array. I have experience with PIXI.js (a 2D rendering framework using either WebGL or Canvas) and Phaser (a 2D game engine, build on top of PIXI). So i can recommend you those two if your game is 2D. PIXI is used just for rendering, there is no game logic in it and you will have to implement it. It's good if the game is not that complex or if you want to learn how to do stuff on your own. Phaser on the other hand is a full game engine that has all sorts of game development functionality, but that also means that it's more bloated with things that you might not need.

• When a user clicks something send to the server that "user x clicked tile x,y", process the input, edit the main data array and send it back to all clients. You can use Web sockets for that or just plain HTTP requests

Alternatively you can use one of the "big" game engines and just compile it down to js and html from there - Unity, Godot, Cocos creator (in this one you actually write in JS)