0

Complete beginner. I want to make a website that provides 2D maps of an online game, in the form of interactive diagrams.

Something that looks like this : https://i.stack.imgur.com/zIgvl.png

Thanks to a secure authentication system, clicking on a location on the website would trigger a certain action in the game client.

What do I need to learn to :

  • Draw diagrams with nodes and lines connecting the nodes
  • Make nodes interactive betweeen the website and the game client

I have started looking at https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML, I don't know where to go from here.

Djysl
  • 3
  • 1

1 Answers1

0

The most easiest way to do that would be an image-map, but this is only applicable if your map is a static image which doesn't change dynamically. It's basically just an image and you can define areas where you can e.g. add a click-event with javascript.

If you need to do more complex things, I would suggest looking into html canvas and svg.

And if you don't wan't to invent the wheel completely new by yourself, here is a nifty javascript framework: gojs or d3

Sepultura
  • 997
  • 1
  • 9
  • 28