JS建立一個城市地圖

Question

好吧，所以我得到了這個問題。

我目前正在爲我的遊戲製作城市地圖（村莊），但問題在於構建擺放位置。我如何實現這一目標？

現在我要以Ikariams地圖爲例，測試場地。現在這是地圖本身 http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg

現在我該如何放置建築物？獲取建築物應該在哪裏的座標，然後適合建築物的建築物？

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 
} 

希望這是有幫助的。