Browsergame-Karte

Hi!
Erstmal vorweg: Ich kann PHP, MySQL und etwas JavaScript und habe auch schon ein BG programmiert.
Dazu hab ich jetzt eine Karte gemacht:

Die" target="_blank">http://ferien.lima-city.de/work/
Die ist eigentlich selbsterklärend: Es gibt einfach eine Tabelle mit vielen Images, dazu noch 2 Formularfelder die die Koordinate oben links in der Ecke angeben und die Anzahl der Felder die pro Bewegung verschoben werden. Beim Berühren von dem Wort rechts wird ein Timeout ausgeführt, der die Koordinate oben rechts verschiebt und danach wieder neu zeichnen lässt. Allerdings ist die Geschwindigkeit nicht gerade berauschend, man kann sich nur ganz langsam und mit großer Verzögerung bewegen.
Deshalb suche ich bessere Ideen. Für Vorschläge bin ich dankbar!
managergames

$breite=40;
$hoehe=20;
$maxbreite=300;
$maxhoehe=300;
?>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

X-Koordinate oben links:
Y-Koordinate oben links:
Felder pro Verschieben-Schritt:
Die Maus auf "rechts" bewegen, um die Karte nach rechts zu verschieben:
rechts
for($i=1; $i<=$hoehe; $i++)
{
echo "";
for ($j=1; $j<=$breite; $j++)
{
echo "";
}
echo "";
}
?>

Ähhhmmm, das Ganze läuft doch eh noch nicht unter realen Bedingung, da ohne Datenbank-Abfrage, also wird es sicher noch langsamer werden.
Und dann brauchst du eigentlich für das verschieben kein JS, sondern kannst es gleich in html machen.
Schneller werden ?? -> kleinere Karte nehmen , da weniger Abfragen.

Original von open_dimension
Ähhhmmm, das Ganze läuft doch eh noch nicht unter realen Bedingung, da ohne Datenbank-Abfrage, also wird es sicher noch langsamer werden.
Und dann brauchst du eigentlich für das verschieben kein JS, sondern kannst es gleich in html machen.
Schneller werden ?? -> kleinere Karte nehmen , da weniger Abfragen.

Ja, aber da es jetzt sowieso viel zu langsam ist, hab ich die Datenbank-Abfragen draußen gelassen. Aber mal im Ernst... Gibt es keine Möglichkeit das schneller zu machen?

Ich würde mal versuchen, die getElementById() Aufrufe heraus zu nehmen. Ansonsten mit größeren Kacheln arbeiten.

Also mal ganz ehrlich, bei mir war der eben superschnell...
Vielleicht brauchst Du auch einen Server, der nicht permant unter Volllast arbeitet.
Oder Deine Leitung laggt...
Das kann viele Gründe haben, aber eins sei Dir versichert, die Datenbankabfrage ist das eigentliche Nadelöhr des Problems

Ich weiß zwar nicht ob es hier irgendwie die Geschwindigkeit beeinflusst, aber ich würde das ganze nicht als Tabelle aufbauen.
Ich hatte bei einem vorhergendem Projekt den direkten Vergleich zwischen Tabellen Layout und mittels DIV -Boxen. Die Tabellen waren meistens 1-2 Sekunden langsamer bei der Anzeige.
Ganz besonders weil du in Tabellen keinerlei Möglichkeit hast Überlagerungen darzustellen würde ich für eine JavaScript "Grafik-Engine" immer DIV's mit CSS benutzen.

Bei mir geht es auch schnell, nur wird es schwer wieder nach links zu kommen

So, nun ist es auch möglich nach links zu kommen.
Aber noch eine Frage: Wie würdet ihr das realisieren, dass die Bilder aus der Datenbank ausgelesen werden?
Mir ist dazu nur die eine Möglichkeit eingefallen:
Ich nehme eine Datei bild.php und häng daran die Koordinaten des Punktes, also bild.php?x=1&y=1 . Und in der bild.php dann sowas in der Art:

header('Content-Type: image/jpeg');
$sql="SELECT * FROM karte WHERE x=".$_GET[x]." and y=".$_GET[y].";";
[...]
readfile(aus der Datenbank ausgelesenes Bild);
?>
Das hätte allerdings den Nachteil, dass es zu 1200 Queries kommt und das davon die Geschwindigkeit auch nicht besonders schnell ist, auch deshalb, weil das eingefügte Bild aufgrund des unterschiedlichen URLs immer neu geladen wird, auch wenn ein Bild mehrmals verwendet wird.
Die Bilder im Vorraus bestimmen (wie im bisherigen Code) scheint auch keine Lösung zu sein, da die Karte gerade erst 3000x3000 Felder groß werden soll.
Also, habt ihr irgendeine Idee?

Ich hab mit der Thematik (Karte) noch nicht gearbeitet - aber kannst du nicht eine Art Matrix berechnen/darstellen (intern), die dir sagt, wo was (anderes) geladen werden muss? Wenn ich das richtig sehe, ist das derzeit alles grün, nur an ein paar bestimmten Punkten "anders". Folglich könnte man dort immer das gleiche Bild laden (Cacheheader setzen, damit wirklich das Bild NICHT vom Server geladen wird) und nur für die besonderen Punkte lädt deine JS-Engine das entsprechende Objekt.
Das könnte man zB in einem 2D-Array lösen, oder nicht?

Wenn du scrollst, musst du ja nur die Daten neu laden die hinzukommen, daraus kannst du ja Quadrate bilden (wenn du nur horizontal und vertikal scrollst ein Quadrat).
Dann kannst du
where x > links and x < rechts and y > oben and y kleiner unten
wobei links, rechts, oben und unten die grenzen des Quadrats sind, das eingeblendet werden soll. Damit hast du nur noch einen SELECT, und eine menge fetches. Wenn du das mit Ajax machst, und gut aufbereitest, kannst du den datenstrom gering halten.
Evtl. lädst du auch vorab alle Grafiken in ein Array

Wenn du jetzt die Bilder ersetzten willst, weißt du die nur noch zu,... du könntest die ja per Ajax geben lassen: 0004:0004:01;
Also an Position 4/4 das bild 1 setzen,...

Also so habe ich das Problem mit den Feldern gelöst.
Ich lege ich der Datenbank in der Tabelle Karte:
- X
- Y
- Feld_Grafik
an, wobei Feld_Grafik nur eine ID ist, sagen wir die 1 sind Bäume und die 2 sind Dörfer usw...
Dann fragste die DB nach dem Feld und dann bekommste die Grafik...
if ($Feld_Grafik == 1) $bild = "Wald.jpg"
usw...
Und was wichtig ist, ist nicht jedes einzelne Feld in eine Querie zu schreiben, sondern x>100 and x<120 and y>100 and y<120 zu verwenden. Das sollte definitiv schneller sein.

ich würde die Karte so machen (Wenn es eine Tabelle sein muss...sonst auch lieber eine Div-Lösung):

x | 1 | 2 | 3 | ...
1 | o | | | ...
2 | | | o | ...
3 | | o | | ...
Hierbei werden halt oben die x und ander seite die y Koordinaten angezeigt.
"o" stellt ein besiedeltes Gebiet da (wenn man mit der Maus drüber geht kommen infos). Dieses "o" kann natürlich auch eine Grafik sein.
Eventuell könnte man ja auch zur vervollständigung bei leeren Tabellnfeldern die Koordinaten anzeihen (wenn die Maus auf dem feld ist).

ich würds anders machen..
ein hochauflösendes hintergrundbild in einem div von sagen wir mal 1000x1000px (ist am einfachsten zu rechnen ..)
darauf danken wir uns 20x20 "felder", die nicht eingezeichnet werden (außer vielleicht durch 1 großes raster-bild).
nun plazieren wir alle gebäude/einheiten/etc. als divs dynamisch auf dem ding. damit kann man dann auch bewegungen andeuten (=weiter zu einer kante/ecke), hat meist viel weniger bilder (=es läuft flüssiger/ist schneller generiert) und kann (falls gewünscht) auch js-events auf die einzelnen objekte legen (und so z.b. auf der map ein info-div über eintreffende feindlich etruppen anzeigen).
So würde ich es machen, wenn ich mit einem raster arbeiten würde.

Also beim besten willen, bei mir will die Karte nicht laden - ich sehe nur Koordinaten...

Original von managergames
So, nun ist es auch möglich nach links zu kommen.
Aber noch eine Frage: Wie würdet ihr das realisieren, dass die Bilder aus der Datenbank ausgelesen werden?
Mir ist dazu nur die eine Möglichkeit eingefallen:
Ich nehme eine Datei bild.php und häng daran die Koordinaten des Punktes, also bild.php?x=1&y=1 . Und in der bild.php dann sowas in der Art:

header('Content-Type: image/jpeg');
$sql="SELECT * FROM karte WHERE x=".$_GET[x]." and y=".$_GET[y].";";
[...]
readfile(aus der Datenbank ausgelesenes Bild);
?>
Das hätte allerdings den Nachteil, dass es zu 1200 Queries kommt und das davon die Geschwindigkeit auch nicht besonders schnell ist, auch deshalb, weil das eingefügte Bild aufgrund des unterschiedlichen URLs immer neu geladen wird, auch wenn ein Bild mehrmals verwendet wird.
Die Bilder im Vorraus bestimmen (wie im bisherigen Code) scheint auch keine Lösung zu sein, da die Karte gerade erst 3000x3000 Felder groß werden soll.
Also, habt ihr irgendeine Idee?

cih mache es ohne php image weil phpimage zulangsam dafür ist
wenn du die bilder eh schon hast kannst du sie doch gleich im htmlcode angeben

Bei mir kommt bei der Karte:
ERROR 404........

Ich würde sagen, er hat die Seite gelöscht. Würde ich auch tun, wenn der Thread für mich abgeschlossen ist.

Original von planetenkiller
Ich würde sagen, er hat die Seite gelöscht. Würde ich auch tun, wenn der Thread für mich abgeschlossen ist.

Vollkommen korrekt