2016-10-25 1 views
-2

Okay, ich habe dieses Problem.JS baut einen Stadtplan auf

Ich mache gerade eine Stadtkarte (Dorf) für mein Spiel, aber das Problem ist Gebäude Platzierung. Wie erreiche ich das?

Jetzt nehme ich zum Beispiel Ikariams Karte als Beispiel, Test Gründe. Jetzt ist dies die Karte selbst http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg

Jetzt, wie platziere ich die Gebäude? Koordinaten erhalten wo das Gebäude sein sollte und dann einfach in das Gebäude passen.png hinein oder?

+0

Das hängt davon ab, wie Sie Ihre Karte erstellen. Sie können sie einfach direkt hineinzeichnen, wenn es nur ein Bild ist. Sonst noch etwas und du wirst uns zeigen müssen, was du bisher hast und was du versucht hast und warum es fehlgeschlagen ist. –

+0

Sie haben nicht genug Informationen zur Verfügung gestellt – Ding

+0

Nun zur Zeit habe ich das Bild der Karte möchte ich mit wie Löcher und ich habe eine Reihe von Gebäuden in. Png, die ich platzieren möchte. Grundsätzlich Gebäude sollten in die Löcher passen die Karte –

Antwort

0

Eine gute Lösung dafür ist die Verwendung des HTML5 Canvas Elements. Damit können Sie ein Hintergrundbild erstellen und andere Bilder darauf zeichnen. Zeichnen von Linien, Kreisen ist auch ziemlich einfach (das kann mit JavaScript animiert werden).

Sie benötigen die Leinwand selbst:

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

Einige CSS:

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

Und einige Zeilen in Ihrer <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 
} 

Hoffe, dass es hilfreich ist.