Karte beweglich machen

M

maya2

Grünschnabel
Hallo,

ich versuche gerade eine MAP mit PHP, HTML und Javascript für ein Browsergame zu programmieren. Bis jetzt hat alles gut geklappt, alle 100x100 Felder sind in einer Datenbank gespeichert und werden als Ausschnitt in einer Tabelle dargestellt (seihe Beispiel bei Koordinate 100x100)
http://dev.desc-net.de/products/wirtschaft/eJwrtrK0UsrJT8/M0yvIKFCyBgAr5AUv
Name: test
Passwort: test2


Jetzt würde ich gerne die Karte beweglich machen, indem man per Click&Dragging die Karte ziehen kann. Und plötzlich muss ich feststellen, dass das doch nicht so einfach ist :-D

Ich brauche einen Ansatz wie das realisierbar wäre. Das Problem ist, dass ich nicht weiß wie ich per mouseover/mousedown events in Javascript die Karte bewegbar machen soll. Das würde ja bedeuten, dass ich bei jedem x- oder y-Schritt die Karte über AJAX aktualisieren müsste und dementsprechend die Spalten-Grafiken ändern müsste. Wie könnte man erkennen, dass wenn ich an ein Feld ziehe - und vorallem in welche Richtung? Wenn ich ein Feld nach unten ziehe ändert sich die y-Koordinate, wenn ich es horizontal ziehe würde sich die x-Koordinate verändern.

Oder ist mein allgemeiner Ansatz wiederum falsch, dass ich das alles mit Spalten versuche darzustellen? Ich habe nämlich bei anderen Spielen gesehen, dass die MAPS ein großes Bild haben in einem DIV-Container, was sich bewegen lässt. Hier wäre aber wiederum das Problem, dass man direkt die ganze Karte laden müsste, was wiederum Traffic verursacht.

Ich wäre sehr dankbar für irgendwelche Ansätze, ich habe momentan überhaupt keine Idee wie ich weiter machen soll.

Mit freundlichen Grüßen,
maya2
 
Also bei die-stämme haben sie es glaube ich so, dass man wählen kann, ob es statisch oder dynamisch "geslided" wird. Demnach wird entweder nur ein Kartenteil (statisch) oder alles (dynamisch) geladen.
Ich weiß aber nicht wie sie es dort gelöst haben - war ewig nicht on und ich glaube die benutzen ein Frameset.

Wie groß soll deine Karte später werden?
Bei Stämme ist sie groß, das weiß ich noch, aber die Ladezeit war nie ein Problem. Theoretisch lädst du pro Spielfeld ja nur eine Zahl... (0 für leer, 1 für Haus, 2 für größeres Haus, 3 für riesiges Haus, 4 für verlassenes Haus, ... nur ein Beispiel) Das macht vom Laden her nicht viel aus, denk ich. Kannst du ruhig in einen Array laden...
 
Ich habe vor mehrere Länder á 100x100 Felder zu schaffen, also insgesamt 10000 Felder pro Land. Ich habe versucht mal alle Felder zu laden und ich finde das dauert schon ziemlich lange, es sind ja nicht nur die Daten, die geladen werden müssen, sondern auch der ganze HTML Code.

Man sieht bei die Stämme, dass die Karte ein Hintergrundbild ist und somit kein Bestandteil der Datenbank. Nur die Dörfer sind als Koordinaten gespeichert. Und sie werden immer geladen, sobald man die Karte bewegt. Das kann man daran erkennen, dass die Verschiebung an den Rändern pixelig wird.

Irgendwie haben sie es geschafft zu erkennen, in welche Richtung die Karte bewegt wird und welche dementsprechende Koordinaten geladen werden müssen.

Statisch ist ja kein Problem, dynamisch wäre aber um einiges besser. Aber ich sehe schon selber ein, dass mein Ansatz nicht relevant dafür ist, da ich eine Tabelle benutze.

Aber wie könnte man das mit DIVs lösen?
 
Du sagst, bei Stämme ist die Karte nur zum Teil in der DB gespeichert. Das stimmt so nicht, denn die ganzen Bäume, Gewässer und Felsen die auf der Map zu sehen sind, müssen auch irgendwo gespeichert werden - sonst überschreiben sie das. (Wobei es nicht wirklich etwas ausmachen würde, aber gehen wir mal davon aus)

Du müsstest die Daten nur in ein jQuery-Array laden, welches dann die Karte jeweils generiert. Klar ist es irgendwo Balast, aber ich hab Dinge programmiert, die haben ~50kb (pro Seite) und die Ladezeit ist meiner Ansicht nach jetzt kaum ein Problem. War halt nicht anders lösbar. Aber auf 50kb kommst du mit meinem Vorschlag nicht mal annähernd...

Das ganze mit DIVs zu lösen sollte nicht wirklich schwerer sein. Zur Positionierung sage ich mal nichts, aber du kannst die DIVs in einer Schleife erzeugen und ihnen folgende Namen geben

1-1 1-2 1-3 1-4 1-5
2-1 2-2 2-3 2-4 2-5
3-1 ...

Wie du das per Schleife löst, dürfte angesichts deines Könnens kein Problem darstellen.
 
Zuletzt bearbeitet:
Hallo Lime,

das klingt schonmal gut. Das werde ich auf jeden Fall ausprobieren. Danke zunächst einmal für deine Hilfe, ich versuche so weit wie möglich zu kommen.

Mit freundlichen Grüßen,
maya2
 
Es gibt eine Stelle, an der du viel sparen kannst, was die zu übertragende Datenmenge betrifft: dein Inline-CSS. Wenn du das sinnvoll in Klassen auslagern würdest, würdest du Unmengen an Zeichen sparen.
 
Er kann die Karte auch per javascript erstellen lassen - in einer Schleife. Dann spart er noch mehr Traffic. Rentiert sich aber erst bei wirklich großen Datenmengen...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück