如何用HTML创建游戏地图？

问题描述投票：-3回答：1

我需要用HTML创建游戏的自定义地图，但我并不是说真正的地图。我的意思是游戏。像这样的东西：

和：

我具有类似这样的网格系统坐标，需要弄清楚如何将x，y值转换为网页上的点。起初，我以为HTML Canvas元素可能是最好的，但是似乎有点缺乏，因为我需要它是交互式的。在这里，用户可以将鼠标悬停在标记上以获取更多信息或单击它（href）进行浏览到另一个区域的另一张地图。

我看到这里有一个canvas元素的工具提示示例：http://jsfiddle.net/kj97pydg/

但是，这是一个非常容易受骗的技巧，对链接也无济于事。

还有其他选择吗？首选免费，但我可以考虑付费图书馆。否则，作为最后的手段，将像这样的自定义映射系统中的某些x，y坐标转换为“顶部”和“左侧” css属性的最佳方法是什么？我知道我需要弄清楚如何根据网格的大小来计算它，但不确定如何。

示例：

从：199.62, -322.18到：left:882px; top:359px;

非常感谢您的帮助。

NOTE：这可能无关紧要，但是如果有任何区别，我将使用ASP.NET Core。

EDIT：

也许我的错误是在上面放置了太多而不是太少的信息。我想知道的是：创建这样的地图有哪些建议？我只需要有人指出正确的方向即可。

我需要用HTML创建游戏的自定义地图，但我并不是说真正的地图。我的意思是游戏。像这样：http://enbmaps.de/和：http：//enbmaps.de/index.php？map = Saturn＆zeige = n＆...

html

css

html5-canvas

coordinate-systems

1个回答

-1
投票

在给出的示例中，这些线并不是用html或css绘制的实线，这是一个完整的图像，其中的按钮位于行星上。