JS建立城市地图

Question

好吧，所以我得到了这个问题。

我目前正为我的游戏制作城市地图（村庄），但问题是建筑物的位置。我如何实现这一目标？

现在我以Ikariams地图为例，试验场。现在这是地图本身 http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg

现在我如何安置建筑物？获取建筑物应该在哪里的坐标，然后只需将building.png放入其中或？

Answer 1

一个很好的解决方案是使用HTML5 Canvas元素。这允许您拥有背景图像并在其上绘制其他图像。绘制线条，圆圈也很简单（可以使用javaScript进行动画制作）。

你需要画布本身：

<canvas id="canvas" width="800" height="600">
</canvas> 

一些CSS：

canvas{
            background-image: url('village.jpg');
        }

<script>

中的一些行

var canvas = document.getElementById("canvas");
var map = canvas.getContext("2d"); //main object to draw

var house=new Image();
house.src='house.jpg';
house.onload=function(){
map.drawImage(house, 80,80); //actually drawing and giving coordinates
}

希望它有用。