Интерактивная диаграмма на веб-сайте: Что мне нужно узнать? Какие инструменты мне нужно использовать?

Question

Полный новичок. Я хочу создать веб-сайт, который предоставляет 2D-карты онлайн-игры в виде интерактивных диаграмм.

Что-то, что выглядит следующим образом: http://i.imgur.com/DrRyZtF.png

Благодаря защищенной системы аутентификации, нажав на месте на сайте будет вызывать определенные действия в игровом клиенте.

Что мне нужно научиться:

• рисовать диаграммы с узлами и линиями, соединяющими узлы
• Сделать узлы интерактивные betweeen веб-сайта и игрового клиента

Я начали искать на https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML, я не знаю, куда идти отсюда.

Answer 1

Самый простой способ сделать это будет image-map, но это применимо только в том случае, если ваша карта представляет собой статическое изображение, которое не изменяется динамически. Это в основном просто изображение, и вы можете определить области, где вы можете, например. добавьте клик-событие с javascript.

Если вам нужно сделать более сложные вещи, я бы предложил посмотреть на html canvas и svg.

И если вы не wan't изобретать колесо совершенно новое самостоятельно, здесь отличная Javascript основа: gojs или d3