mmofacts.com

JQuery Ajax , karte bewegen

gepostet vor 14 Jahre, 3 Monate von BlackScorp

Hallo leute,

ich habe eine kleine verständnis Frage. Es geht um folgendes:

ich habe eine Karte anzeigen lassen und über ?x=foo&y=bar kann ich die karte verschieben. Nun wollte ich halt das ganze über Ajax(jQuery) regeln. Problem dabei ist, dass die Karte nur beim Ersten klicken verschoben wird und danach nicht mehr.Danach klicke ich auf die Richtungen und es passiert nichts

Der quellcode sieht so aus:

http://pastebin.com/m53e9c724

Hoffe einer von euch weis, wieso das so ist

MFG

gepostet vor 14 Jahre, 3 Monate von MrMaxx

Erstmal wäre es schön, wenn du für solche Fragen die Lobby benutzen würdest. Dies ist der geschlossene Bereich und es gibt bei deinen Fragen keinen Grund, warum nicht andere Anfänger, die eventuell ähnliche Probleme haben von den Antworten profitieren sollten.

Wenn du das erste Mal deine Karte verschiebst passiert das folgende:

 $('body').html(htmlCode);

Damit ersetzt du deinen kompletten DOM unterhalb den Body elements. Auch die beiden span-Elemente, auf denen du die Javascript-Eventhandler definiert hast. Diese werden vermutlich durch spans mit gleichem Namen ersetzt, aber die Eventhandler sind nicht mehr definiert. Die hast du mit dem Teil-DOM mit entsorgt.

Lösung des Problems ist einfach nach dem ersetzen des body-Element nochmal die Eventhandler an die span-Elemente zu hängen.

http://pastebin.com/m6a0688cc

So sollte das ca. funktioneren...ungetesteter Code...

Ach ja und gewöhn dir mal an über Module eigene Namensräume aufzumachen (wie in meinem Beispiel angegeben)...das wird vor allem bei grösseren Projekten irgendwann dringend notwendig.

So long...

MrMaxx

gepostet vor 14 Jahre, 3 Monate von BlackScorp

hi danke für die antwort,

das mit den Modulen wusste ich noch nicht, werde in der zukunft es umsetzen.

zu dem Problem:

Also der EventHandler wird nun gesetzt und beim Klicken passiert auch was, das ist schon mal gut.

Das nächste Problem wäre da nun, dass im Code immer wieder die Variablen auf den Wert 0 gesetzt werden, gibt es da ein möglichkeit zu sagen dass die Variable immer erhöht werden soll und nur beim ersten Laden, sollen die Variablen den Wert 0 kriegen?

Ich habe mir überlegt ob ich nich in der php datei einfach folgendes mache:

if(isset($_GET['x'])){

$x = $_GET['x'];

}else{

$x = 0;

echo 'var x = '.$x.'';

aber evenutell geht es ja irgendwie anders

MFG

gepostet vor 14 Jahre, 3 Monate von knalli

Habe nur ich jetzt ein Dejavú oder hatten wir diesen Gesprächsverlauf nicht schonmal?

GET

Wenn schon, dann zum Beispiel so: $x = isset($_GET['x']) ? (int)$_GET['x'] : 0; 

Oder etwas vergleichbares, einfach nicht so stupide rumschubsen!

Ganz Allgemein zur Struktur: Es ist sicher nicht sinnvoll, so eine Aufgabe (also Mapsteuerung) mit HTML-Strings zu lösen. Meiner Meinung geht da kein Weg an einer vernünftigen, direkten DOM-Manipulation vorbei. Selbstverständlich mit Toolunterstützung, etwa jQuery. Beispiel: Jedes Mal alle Events neu zu bauen ist wohl nur bedingt sinnvoll.

*meckermodus* Und was ist x? Eine Koordinate? "x" hat nur dann Sinn, wenn es in einem Koordinatentyp wäre.. ist es aber augenscheinlich nicht, wenn da $_GET steht. 

gepostet vor 14 Jahre, 3 Monate von BlackScorp

Hallo Knalli, ok DOM manipulation hört sich gut an, muss mir dann mal überlegen wie ich es umsetze. $_GET['x'] und $_GET['y'] ist eigentlich für die Startpositionen gedacht. Also die Obere / Linke position der karte.

wegen Dejavú, ja wir hatten schon mal das Thema besprochen nur ist es jetzt etwas anders, ich hatte da auch mit DOM manipulation gearbeitet, jedoch hatte ich da alle Positionen und Bilder der Karte als JSON object gespeichert und somit konnte ich die Karte verschieben. aber die JSON lösung finde ich mittlerweile nicht mehr so schön, wenn da ein Langer string im Header erscheint. Außerdem wollte ich auf der Karte elemente dranhängen, von denen nicht jeder User wissen soll wo die sich befinden(zb. Schatztruhe die auf mehrere Punkte zufällig Positioniert werden soll). D.h dass manche dinge über PHP eigentlich erstellt werden müssten.

Aber ich setzt mich hin und fange mal von vorne an. Irgendwann kriege ich es noch hin knalli;) hab nur etwas geduld:D

MFG

gepostet vor 14 Jahre, 3 Monate von knalli

Warte, da habe ich jetzt etwas nicht verstanden. Erstens, was für ein langer String im Header? Was genau meinst du, und was genau ist daran schlecht? Zweitens, wenn der User es nicht wissen soll.. warum muss PHP dann HTML generieren? Irgendwie passt das nicht zusammen. Entweder du gibst die Information aus, oder eben nicht. Aber einen Mischmasch gibt es nicht.

Keine Angst, war nicht böse gemeint. Nimm's als mündlichen und freiwilligen Code Review an. Was x ist, ist schon klar. Aber Variablennamen sagen einiges aus; kurze 1-2 buchstabige sind selten (nicht nie) gut gewählt. i und c sind sicher einige der berühmten Ausnahmen.

gepostet vor 14 Jahre, 3 Monate von TheUndeadable

> $('body').html(htmlCode);

Das sind Momente an denen ich mich frage, ob der Sinn von AJAX verstanden worden ist.

Hier sammelst du genau zwei Nachteile der AJAX- und Nicht-AJAX herangehensweise:

a) Du überträgst eine komplette Seite

b) Du zerstörst eine mögliche Navigation (Vor- und Zurückknöpfe) mit Hilfe des Browsers.

Ajax um des Ajax-Willens erscheint mir nicht sinnvoll.

gepostet vor 14 Jahre, 3 Monate von altertoby

b) könnte man mit den richtigen Mitteln aber wieder funktionsfähig bekommen.

gepostet vor 14 Jahre, 3 Monate von TheUndeadable

Damit man eine weitere Komplexität in die Website einbaut um dann keinerlei Vorteile gegenüber einem einfachen Seitenreload zu haben ;-)

KISS und so...

gepostet vor 14 Jahre, 3 Monate von knalli

Den Backbutton in einer Mapanwendung zu nutzen, jo.. das dürft noch ein Novum werden.

gepostet vor 14 Jahre, 3 Monate von Klaus

Man könnte sie ja als Richtungstasten missbrauchen.

gepostet vor 14 Jahre, 3 Monate von TheUndeadable

Oder man könnte nicht mehr einen Link an einen befreundeten Mitspieler weitergeben.

Oder fragen wir mal umgekehrt:
Welchen Vorteil bringt es den kompletten Body per AJAX auszutauschen?

Ich sehe hier nur eine unnötige Komplexität, die die Website empfindlicher gegenüber Störfaktoren oder technologischen Unzulänglichkeiten mancher Browser macht.

Von der Barrierefreiheit mal abgesehen (auch wenn viele Programme mittlerweile mit AJAX umgehen können)

gepostet vor 14 Jahre, 3 Monate von knalli

Original von TheUndeadable

Oder man könnte nicht mehr einen Link an einen befreundeten Mitspieler weitergeben.

Oder fragen wir mal umgekehrt:
Welchen Vorteil bringt es den kompletten Body per AJAX auszutauschen?

Hey, man könnte meinen, du meinst das als nicht rhetorische Frage.. :(

Und zum Rest:

Natürlich kann man eine Ajax-Mapanwendung (mal ehrlich, will man das ohne?) mit guten Links bauen, die man Copy-Paste aus der Browserleiste weitergeben kann. Man kann alles, "Ankerlinks" lassen grüßen. Warum das beispielsweise Google noch nicht macht, weiß ich nicht. Bei Mail haben sie das ja vor einigen Monaten eingeführt (keine ?-Queries mehr), vielleicht also auch nur noch eine Frage der Zeit.

gepostet vor 14 Jahre, 3 Monate von BlackScorp

Sorry dass ich mich nichts übers WE melden konnte,

aalso zu den Langen liks,

Früher habe ich das ganze so umsetzt dass ich mit PHP ein JSon String generiert habe und es dann im html header ausgegeben habe. in diesem string war ein Array mit den Koordinaten der Karte und die dazugehörigen Maptiles, später kamen zu den Array noch feldeigenschaften hinzu (istBegehbar()) und die einzelnen Städte usw. Aufjeden fall hatte ich da ziemlich großen Array im head bereich stehen gehabt, dafür habe ich bei der Verschiebung der karte ledeglich die Tiles ausgetauscht. Man konnte aber dann über den Header informationen zu allen Städten erhalten(wem gehört stadt xyz, wo befindet die sich, wieviele punkte hat sie usw.)

Das ganze wollte ich nun vermieden, da einige Felder "geheim" sein sollten und nicht jeder Progamer über den HTML QUellcode erfahren kann welche sachen sich wo auf der Karte befinden und ich habe mir gedacht dass Ajax im grunde genau das gleiche wäre als wenn ich eine php seite aufrufe und dann den inhalt anzeige nur halt ohne refresh, desswegen hatte ich auch alles ins $('body') reingeschrieben.

Also bis jetzt sind ja meine Klassen in den Script eingebuden und können über die URL automatisch eingebunden werden und angezeigt werden. Das heißt rein theoretisch müsste ich mir extra php datein erstellen, welche NUR von Ajax aufgerufen werden können und nicht über die URL des Browsers, so dass diese Datein mir nur einen bestimmten teil generieren und es als javascript variable im browser abspeichern oder so. ich werde mal rumexperementieren.

MFG

gepostet vor 14 Jahre, 3 Monate von knalli

Was verstehst du eigentlich unter Header?

Und wie bitte kann eine HTML-Ausgabe nicht geheim sein?

gepostet vor 14 Jahre, 3 Monate von BlackScorp

unter head bereich meinte ich den code im html tag.

und naja eine HTML ausgabe kann nicht geheim sein indem ich mit PHP folgendes ausgebe:

echo 'var json = '.json_encode($meinArray).'';

und dann kann ich ja JEDE position der karte sehen(oder zumindestends eines abschnitts) und auch die eigenschaften einer bestimmten position sowie elemente, welche sich auf dieser position befinden. das meinte ich mit nicht geheim

MFG

gepostet vor 14 Jahre, 3 Monate von knalli

Original von BlackScorp

unter head bereich meinte ich den code im html tag.

und naja eine HTML ausgabe kann nicht geheim sein indem ich mit PHP folgendes ausgebe:

echo ' ';

und dann kann ich ja JEDE position der karte sehen(oder zumindestends eines abschnitts) und auch die eigenschaften einer bestimmten position sowie elemente, welche sich auf dieser position befinden. das meinte ich mit nicht geheim

MFG

 Was hat bitte ein HTML-Header mit Ajax zu tun? Irgendwie verstehe ich das jetzt gar nichts mehr, mir fehlt irgendwie die Verbindung..

Vielleicht solltest du das ganze ein bisschen mehr erklären, wenn du Angst hast, kannst du die Daten ja maskieren/verschleiern ;)

gepostet vor 14 Jahre, 3 Monate von TheUndeadable

Dann hole dir nur die Bilder und ersetze diese statt immer wieder die gesamte Seite neu zu laden....

> verschleiern

Nur eine Frage der Zeit ;-) Insbesondere da die Entschlüsselungsroutinen sowieso im Browser vorliegen müssen!

gepostet vor 14 Jahre, 3 Monate von knalli

Das bezog sich auf das Zeigen hier im Forum, weiß ja nicht, was für geheime Daten er da hat.

gepostet vor 14 Jahre, 3 Monate von BlackScorp

nein geheim daten habe ich nicht, ich wollte halt folgendes szenario darstellen:

Spieler lauft auf einer Map rum und weis zb dass sich ein BOSS monster irgendwo in einer bestimmten gegend  befindet, kennt aber nicht die genaue xy position vom dem boss. also muss er es suchen, wenn ich aber alle map element im json array schon abspeichere, kann er sich bequem den quellcode der seite anschauen, nach monsternamen suchen und kriegt die xy position raus, dann braucht er nur noch hinzugehen. genau das gleiche könnte man auch für zb schatztruhen machen.

Wenn ich den html inhalt mit php generiere und mit ajax ersetze , habe ich kein reload der seite und die informationen müssen nicht als json vorliegen.

Zu der Frage was hat html head mit ajax zu tun:

Ich definiere meine  JS funktionen und variablen im bereich der seite, niemals im . und die jQUery function rufe in nun mal im head bereich auf.

gepostet vor 14 Jahre, 3 Monate von Valerion

...und angenommen der Spieler geht einen Schritt nach links, dann müsste doch, wenn sich die Felder um 1 nach rechts verschieben ja nur die Felderspalte ganz links geladen werden. Und wenn du lediglich diese dem Client übergibst, so kann er einfach die rechteste Spalte ausblenden/löschen und links die Spalte hinzufügen, die er über Ajax bekommen hat. Dann verschiebt er noch alle Felder um 1 Feld nach rechts und dann solltest du doch eigentlich die Karte haben. Und der Spieler kann über den Quelltext lediglich das auslesen, was er sowieso schon weiß.

Sprich du ladest einfach immer NUR den unbekannten Teil nach und fügst diesen dann in die Karte ein. Damit musst du lediglich 1 Spalte nachladen und der Spieler weiß trotzdem nicht mehr als er wissen darf.

...so würde ich es halt machen :)

Edit: Wobei ich natürlich davon ausgehe, dass nur ein Teil der Karte sichtbar ist und dieser Teil dem Spieler auch bekannt ist (...sonst würde er es ja auch nicht sehen, oder?...)

gepostet vor 14 Jahre, 3 Monate von DrakeL

Original von BlackScorp

Spieler lauft auf einer Map rum und weis zb dass sich ein BOSS monster irgendwo in einer bestimmten gegend  befindet, kennt aber nicht die genaue xy position vom dem boss.

Du solltest generell nur Daten zum Client schicken die der Benutzer auch sehen darf. Also schicke ihm nur das was er gerade sieht und wenn er scrollt lade auch nur das nach was er dann sieht. Nicht die ganze Karten laden wenn nur einen Ausschnit anzeigst bzw. nur dieser Ausschnitt vom Spieler eingesehen werden darf.

Sonst hast das gleiche Problem wie bei Diablo 2. Nach wenigen Tagen kursiert ein Hack im Netz der einfach die Karte aufdeckt ohne dass man alles selbst erkunden muss... :D

gepostet vor 14 Jahre, 3 Monate von knalli

Dein Problem ist wohl, das du den eigentlichen Sinn, Zweck und Vorteil von Ajax in seiner Form des entfernten Aufrufes nicht verstanden hast.

Verdeutlichen wir das an einem praktischen Beispiel: Du rufst Google Maps auf und siehst deine Straße. Selbstverständlich hat die Anwendung NICHT(!!!!!1111) die gesamte Erde in vollen Details heruntergeladen, sondern es wurde nur deine Straße und jeweils eine Straße drumherum geladen. Wenn du nun einen Schritt nach links gehst, dann "verschiebt" sich die Karte nur nach rechts. Die dafür notwendigen Daten wie Straßennamen, Hausnummern und so weiter werden jetzt erst vom Server erfragt. Ein intelligentes System hat die Straße bereits drin (s.o. mit eine Straße drumherum), damit kein Ladeeffekt entsteht. Das heißt, immer wenn man die Karte ändert (egal welche Richtung) sorgt ein Algorithmus dafür, dass der Client immer einen Schritt mehr bekommt.

Prosa in Technica: 

  • Client lädt Straße A und erhält A, B, C und D - keine Kenntnisse der 20 anderen Straßen im Ort.
  • Client wechselt Ansicht nach Straße B (schon da) und erhält dafür (weil das Netz so aussieht) B, C, E - keine Kenntnisse der anderen Straßen
  • Demzufolge kennt Client jetzt A, B, C, D und E - irgendwann muss man jedoch auch das "Vergessen" einbauen, damit der Client kein "Speicherleak" kriegt.
  • und so weiter

Das heißt: Ein globales Datensegment zu haben, hat eigentlich allerhöchstens (ehrlich Meinung?: eigentlich nie) während der ganzen Arbeit und des Cachen des Clients Sinn. Eine Vordefinition ist unnötig, und auf ein "Mitausliefern" der Initialdaten würde ich aus rein pragmatischen und wartungstechnischen Gründen Abstand nehmen.

Btw: Einerseits hast du natürlich Recht, dass Javascript in den Header und nicht in den Body kommt... aber: Da man bei komplexeren Seiten eh jeglichen manuellen Javascriptcode in der "HTML-Ausgabe" vermeiden sollte, gibt es demzufolge nur extern eingebundene Scripte (die natürlich sowohl statisch als auch dynamisch sein können). Aus Gründen der Loadperformance ist das Einbinden von CSS im Header und von JS im Bereich vor jedoch besser.

gepostet vor 14 Jahre, 3 Monate von BlackScorp

ja da war halt das Problem, mir ist klar dass ich nicht alles in json laden sollte aber ich wollte dass die user NUR den mapausschnitt sehen, jedoch welche monster und items sich gerade auf diesem ausschnitt nicht sehen. d.h. wenn der user sich gerade auf der position 20/10(nur ein tile) befindet, dann soll er NUR die gegenstände und monster von dieser position sehen. nach dem sich der user wegbewegt hat, soll er dann nur die monster von diese position kennen.

hm.. ich denke dann brauche ich ja nur 2 verschiedene Json variablen.

Naja danke für eure tipps ich werde da mal ein wenig rumbasteln in den nächsten tagen, falls fragen auftauchen, werde ich mich nicht zurückhalten

MFG

gepostet vor 14 Jahre, 3 Monate von knalli

Okay, dann breche ich ich das auf deine Welt runter, denn irgendwie lese ich zwischen den Zeilen, dass du die Technik nicht so verstanden hast:

  • Seite wird das erste Mal geladen
  • impliziter erster Request auf Position (20/10) : Rückgabe sind alle Informationen [nur] für diesen Bereich, also deine Monster und Gegenstände
  • ein Gehen nach links lädt demzufolge (19/10) : Rückgabe sind alle Informationen für diesen Bereich

Zu keinem Zeitpunkt erhält der Client mehr Informationen, als er bräuchte.

Anmerkungen: Eine "JSON-Variable" gibt es nicht:)

gepostet vor 14 Jahre, 3 Monate von BlackScorp

Original von knalli

Zu keinem Zeitpunkt erhält der Client mehr Informationen, als er bräuchte.

Naja doch, ich habe meine Figur auf Position (20/10) stehen, JEDOCH sehe ich ja um die figur drumherum maptiles, also eigentlich bilder , welche nichts mit der aktuellen position zu tun haben, jedoch geladen werden müssen um sie anzuzeigen.

Anmerkungen: Eine "JSON-Variable" gibt es nicht:)

var mapTiles = ["forest","forest","city","gras","gras"]; ist für mich eine variable welche mit PHP generiert wurde mit:

echo 'var mapTiles = '.json_encode($meinArray).';';

wie dem auch sei, eigentlich habe ich das Problem gelößt, muss "nur" noch grenzen in die Karte einbauen, sowie Figur positionieren usw.

nur eine Frage hätte ich da noch, ich wollte eigentlich(wie es so üblich bei karten ist) oben und links positionen hinschreiben also x/y koordinaten. nur bei solch einer karte

http://cccpmik.wmw.cc/map.jpg

stehe ich ein wenig auf dem schlauch:D es ist nicht so einfach dort die koordinaten einzutragen, höchstens in jedes Feld, sieht aber dann nicht so toll aus. vllt bruacht man das in diesem fall nicht?

MFG

gepostet vor 14 Jahre, 3 Monate von DrakeL

Original von BlackScorp

Naja doch, ich habe meine Figur auf Position (20/10) stehen, JEDOCH sehe ich ja um die figur drumherum maptiles, also eigentlich bilder , welche nichts mit der aktuellen position zu tun haben, jedoch geladen werden müssen um sie anzuzeigen.

Also dann lädst du für die aktuelle Position Bild + Daten und für alle Positionen drumherum im Sichtbereich nur die Bilder. Das ist alles was zum Client kommen sollte und angezeigt wird.

Mehr braucht es nicht und mehr darf es auch nicht sein, da es dann schon wieder ausgenutzt werden kann.

stehe ich ein wenig auf dem schlauch:D es ist nicht so einfach dort die koordinaten einzutragen, höchstens in jedes Feld, sieht aber dann nicht so toll aus. vllt bruacht man das in diesem fall nicht?

Ich finde nicht dass man es braucht. Irgendwo die aktuelle Position anzeigen und die Position des Feldes wo die Maus ist im Tooltip am besten. Ansonsten rundherum um die Karte die Reihen beschriften geht doch. Immer in der Mitte eines Feldes wie beim Schach.

gepostet vor 14 Jahre, 3 Monate von BlackScorp

naja meine karte ist ja nicht so wie die hier:

http://www.seppel-art.de/browser/wiki_freiehaendler_1.jpg

da kann man ja wie beim schach die positionen durchnumerieren. aber bei mir sind da ja noch die ecken. ich denke für ein RPG reicht das wenn ich unterm Kompas oder so drunterschreibe deine position ist bla.

vielen dank für eure tipps. ich schätze sobald die erste spielbare version draußen ist, lasse es nur von bestimmten leuten anzocken wegen weiteren fehlern sicherheitslücken etc pp:D

thema ist erledigt

MFG

Auf diese Diskussion antworten