我想为我的HTML5游戏构建一个迷你地图，我该如何开始？

Question

假设我有一张使用背景图片作为图案的大地图。当我移动玩家时，我想在角落放置一个小地图。我需要的迷你地图就是显示我的玩家在大地图中的位置以及地图中其他精灵的位置，使用非常粗略的表示并保持其相对位置但是在更小的地图中显示所有内容。所以我认为这是一个非常基本和简单的小地图。我的播放器将位于屏幕中间（我已经完成了）并且小地图将保留在屏幕的角落。如果我想为我的游戏构建这样的功能，我该如何开始？

Answer 1

假设您的主地图位于容器元素中，您需要测量该元素的scroll属性，以确定它相对于容器（或屏幕）中心的位置。

如果您将x和y计算为地图的比例（例如％），则可以在迷你地图上的相同位置放置一些东西。

将迷你地图放在主地图上并不重要。

要获取地图相对于屏幕的位置，请尝试document.getElementById("map").getBoundingClientRect()。结果数组中的x和y值告诉您屏幕左上角的左上角位置。地图的宽度和高度也包含在数组中。添加screen.width/2和screen height/2以获取地图在屏幕中心的坐标。