✔ Realisierung: Koordinaten DB mit 2500 Feldern

Acriss · 28. Dezember 2007

Guten Abend

Ich programiere ein weiteres Browsergame, und natürlich möchte ich mich immer weiter verbessern

Ich stehe nun aber vor folgendem Problem:
Ich habe eine Karte von 50*50 Feldern, sprich also eine gesamt Größe von 2500 Feldern.
Man soll hier auf einem Feld sein Geschäft errichten können, und andere Geschäfte sehen.

Ich möchte nämlich, das man sich durch die Karte bewegen kann, also wenn man nach links klickt, sollen die nächsten Felder weiter links angewählt werden usw.

Meine Idee, die Datenbankabfrage in ein Javascript-array einzulesen, hat wohl das Problem, das mein Ansatz warscheinlich falsch ist xD
[x][y][z]
x => x_koordinate
y => y_koordinate
z => name|art der Einrichtung

50^3 = 125.000, da ich das ganze mit 3 forschleifen einlesen werde.
Dadurch würde das Script eine ziemlich lange (sogar ZU lange) Ladezeit besitzen

Meine Idee, die Daten in eine Textdatei einzuspeichern, scheitert daran, das man mit js keine Dateien öffnen kann

Wie kann ich das Problem umgehen?
-Kommt mir jetzt bitte nicht mit weniger Feldern^^
Denn bei geplanten (mind) 1k-2k Usern, wo jeder 10 "Häusle" bauen kann, kommt man schnell mal auf 2000 "Häusle".

Matthias Reitinger · 28. Dezember 2007

Acriss hat gesagt.:
50^3 = 125.000, da ich das ganze mit 3 forschleifen einlesen werde.
Dadurch würde das Script eine ziemlich lange (sogar ZU lange) Ladezeit besitzen

Stichwort Ajax. Damit immer den Teil nachladen, der gerade gebraucht wird.

Grüße,
Matthias

Acriss · 28. Dezember 2007

Ah genau xD
Erstmal, danke, mit einer so schnellen Antwort hab ich ehrlich gesagt gar nit gerechnet.
Ich hatte vergessen zu notieren, das ich Null Ahung von Ajax habe

Ich habe mich schon öfter nach Tutorials umgeschaut, aber allein das erste Script, um zu prüfen ob Ajax anwendbar ist, war sehr abschreckend.
Wenn kein Weg an Ajax vorbeiführt, Dauert es lange, den entsprechenden Teil zur "offenen" DB-Verbindung zu lernen?

**edit**
Ich habe mir gerade nochmal ein paar Seiten zum Thema Ajax angeguckt, und muss gestehen,
es ist zu schwer^^

Ich bin bei vielen neuen Sprachen gewohnt, erstmal einfache Sachen, wie <html></html> oder <?php echo 'Hello World'; ?> zu lesen.
Anstelle von

Code:

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined')  {
     xmlhttp = new XMLHttpRequest();
}

function ajax_call() {
     xmlhttp.open("GET", 'ajaxWork.php?num1=' +
           document.getElementById('num1').value +
                '&num2=' + document.getElementById('num2').value , true);

     xmlhttp.onreadystatechange=function() {
           if (xmlhttp.readyState==4) {
                 document.getElementById('result').value = xmlhttp.responseText;
           }
     }

xmlhttp.send(null)
return false;
}

Also für Anfänger würde ich das nicht nehmen xD

maeTimmae · 28. Dezember 2007

Die grundlegende Frage: Warum sollen alle Felder auf ein Mal eingelesen werden?
Geht es um eine Karte? Wie wäre es mit einer 5 x 5 Karte um das momentane Feld herum? Mit Richtungspfeilen könnte man dann zum nächsten Rasterfeld wechseln. Das wären im Falle von 5 x 5 Feldern immerhin nur 25 Ergebnisse in einem Schritt, hoch drei bei deiner Organisation 15625 reelle Daten. Das ganze kann man aber auch sinnvoller organisieren, indem man zB die linke obere Koordinate übergibt, sowie sämtliche Namen in einer geordneten Liste. Anhand dieser Angaben kann man dann sämtliche Angaben dynamisch regenerieren über Javascript, oder auch "statischer" via PHP ausgeben.

Schreib doch einfach

Code:

/* Javascript Start */
...
/* Javascript End */

Matthias Reitinger · 28. Dezember 2007

Hallo,

du könntest natürlich auch eine JavaScript-Bibliothek mit Ajax-Unterstützung (z.B. jQuery, prototype, dojo, MochiKit…) verwenden und es dir somit ersparen, dich in die genauen Hintergründe einzuarbeiten (was meiner Meinung nach auch nicht zwingend nötig ist).

Grüße,
Matthias

Acriss · 29. Dezember 2007

Hmm
danke für die schnelle Antwort^^
Also, ich bin doch schon ein Stück weiter, zwar nicht alles verstanden, aber es funktioniert^^

Ich habe nur noch ein Problem:

HTML:

onclick="macheRequest('test.html?x='+document.getElementbyId('x').value+'&y='+document.getElementById('y').value+'');">

Ich möchte jetzt Parameter an das PHP Script übergeben, doch es klappt leider nicht^^
die beiden getElementy greifen auf 2 input Felder zu.

*nochmal edit
Ich habe das nochmal etwas umgeschrieben, und jetzt sieht es so aus;

HTML:

<script type="text/javascript" language="javascript">

    var http_request = false;

    function macheRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // zu dieser Zeile siehe weiter unten
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open('GET', url+'?x='+document.getElementbyId('x').value+'&y='+document.getElementById('y').value, true);
        http_request.send(null);

    }

    function alertInhalt() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('Bei dem Request ist ein Problem aufgetreten.');
            }
        }

    }
</script>
<input type="text" id="x" />
<input type="text" id="y" />
<span
    style="cursor: pointer; text-decoration: underline; color: blue"
    onclick="macheRequest('test.html');">Einen Request absetzen
</span>

test.html

PHP:

<?php
include("functions.php");
$select = mysql_query("SELECT * FROM Koordinaten WHERE x_koord = '".$_GET['x']."' AND y_koord = '".$_GET['y']."'");
$result = mysql_fetch_array($select);
echo $result[1];
echo $result[2];
?>

Es erfolgt überhaupt keine Ausgabe nach dem klick auf den <span>

maeTimmae hat gesagt.:
Die grundlegende Frage: Warum sollen alle Felder auf ein Mal eingelesen werden?
Geht es um eine Karte? Wie wäre es mit einer 5 x 5 Karte um das momentane Feld herum? Mit Richtungspfeilen könnte man dann zum nächsten Rasterfeld wechseln. Das wären im Falle von 5 x 5 Feldern immerhin nur 25 Ergebnisse in einem Schritt, hoch drei bei deiner Organisation 15625 reelle Daten. Das ganze kann man aber auch sinnvoller organisieren, indem man zB die linke obere Koordinate übergibt, sowie sämtliche Namen in einer geordneten Liste. Anhand dieser Angaben kann man dann sämtliche Angaben dynamisch regenerieren über Javascript, oder auch "statischer" via PHP ausgeben.

Schreib doch einfach

Code:

/* Javascript Start */ ... /* Javascript End */

Genauso ist es ja auch gedacht, nur möchte ich nicht immer "reloaden"

maeTimmae · 29. Dezember 2007

Würde es dennoch als Fallback einsetzen - Nicht jeder browst mit aktiviertem JavaScript (und ein Request findet auch immer statt, egal ob nun über direkte Ausgabe oder ein Request durch die Hintertür).
Hierzu kannst du ein Konstrukt in der Art benutzen:

Code:

<a onclick="doSomething(); return false" href="/fallback/link.php?x=123&y=456">( 123 | 456 )</a>

Zur Lösung deines Problems kannst du einfach mal überprüfen, was für ein Request abgesetzt wird:

Code:

alert( 'test.html?x=' + document.getElementbyId('x').value + '&y=' + document.getElementById('y').value );

Kann es weiterhin sein, dass du den Request nicht weiter behandelst, sondern ihn einfach nur absetzt?

Acriss · 29. Dezember 2007

nein, das kann nicht sein,
Denn wenn ich das ohne getElement... mache, also die Werte direkt eintrage, wird mir das richtige Ergebnis aus der Datenbank zurückgegeben.
Ich habe es schon mit Konstruktionen a lá

PHP:

var x = "?x="+document.getElementbyId("x").value; // *markiert*
var y = "&y="+document.getElementById("y").value;
ganzeurl = url+x+y;
http_request.onreadystatechange = alertInhalt;
http_request.open('GET', url, true);

Aber der Fehler liegt dann irgendwo in der markierten Zeile, wenn ich die auskommentiere, läuft das Script weiter.

Und die Edit sagt:
Ok, ich habe es jetzt gelöst

Er mochte ja nicht die Variablen in der Funktion, deswegen hab ichd as ganze Script ein bisschen umgeschrieben:

PHP:

<script type="text/javascript" language="javascript">

    var http_request = false;

    function macheRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // zu dieser Zeile siehe weiter unten
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertInhalt() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('Bei dem Request ist ein Problem aufgetreten.');
            }
        }

    }
// Diese Funktion ist neu
function url()
	{
         ganzeurl = "test.php?x="+document.getElementById('x').value+"&y="+document.getElementById('y').value;
         return ganzeurl;
         }
</script>
<input type="text" id="x" />
<input type="text" id="y" />
<span
    style="cursor: pointer; text-decoration: underline; color: blue"
    onclick="macheRequest(url());">Einen Request absetzen
</span>

danke für Eure Hilfe

✔ Realisierung: Koordinaten DB mit 2500 Feldern

Acriss

Gesperrt

Matthias Reitinger

ɐɯıǝɹ

Acriss

Gesperrt

maeTimmae

Erfahrenes Mitglied

Matthias Reitinger

ɐɯıǝɹ

Acriss

Gesperrt

maeTimmae

Erfahrenes Mitglied

Acriss

Gesperrt

Neue Beiträge