Notice: Undefined variable: HTTP_SERVER_VARS in /www/htdocs/w00bbbb2/config.php on line 111

Deprecated: Function eregi() is deprecated in /www/htdocs/w00bbbb2/config.php on line 183

Deprecated: Function eregi() is deprecated in /www/htdocs/w00bbbb2/config.php on line 183
PHP Crash Kurs - Laufen auf einer Karte - Lektion 10
Layout

Lektion 10 - Der goldene Ring

Du erhälst einen Auftrag, der lautet "Finde den goldenen Ring!" und wirst in ein Tal geschickt, um ihn zu suchen. Umgeben von Bergen kommst du an einem Fluss vorbei, erreichst einen kleinen See und einen Wald. Ein sehr einfaches Tal, voller Natur.
Auf die Idee, so eine Karte zu programmieren, kam ich durch Neopets. Ich war eine Zeit lang wie bessesen von dem Spiel NeoQuest II, dort gibt es auch eine Welt, durch die man auf ähnliche Weise läuft. Es dauerte Tage bis Wochen, bis ich es nachprogrogrammiert bekommen habe. Diese Lektion könnte dir nun etwas komplizierter erscheinen, als die vorherigen, aber du wirst vieles lernen können, was dir bei der Findung von Lösungen der Probleme deiner eigenen erfundenen Spiele nützlich sein wird.
Damit du auch etwas von der virtuellen Welt hast, wenn dich der Rundgang an sich nicht interessiert, machen wir ein Spiel daraus, das du für deine Webseite nutzen kannst:

Finde den goldenen Ring!

Navigation
unten rechts links oben

 

10.1 Die Karte

Wenn du durch eine Welt laufen möchtest, benötigst du zunächst einmal eine Karte.

Karte

Nimm dir ein Blatt karriertes Papier und ein paar Stifte zur Hand und schreibe erst einmal Koordinaten an den Rand. Senkrecht haben wir nun eine y-Achse und waagerecht die x-Achse. In das Koordinatensystem malst du deine Karte. Jedes Feld wird später ein Schritt breit sein.

Wiese Wald Wasser Berg

Es gibt Wiese, Wald, Wasser und Berge. Lasse die Namen der Bilder beim Speichern, wie sie sind, wir werden über deren Namen auf sie zugreifen müssen.

Ring
Wanderer
Navigation

Außerdem gibt es natürlich den goldenen Ring, der gefunden werden muss, einen kleinen Menschen, den man beim Laufen darstellt, und ein Navigationsmenü.

 

10.1.1 Die Karte als PHP Code

Doch wie bekommt man die Karte vom Blatt Papier nun auf die Webseite? Jedes der Felder auf der Karte hat eine Koordinate, und jedes Feld ist entweder Wiese, Wald, Wasser oder Berg. Weisen wir nun jeder einzelnen Koordinate ihr Bild zu.

// Die Seite wiesen_karte.php

$_1_3 = "wi";
$_1_4 = "wi";

$_2_3= "wi";
$_2_4 = "wi";
$_2_5 = "wa";
$_2_6 = "ws";
$_2_10 = "ws";

$_3_2 = "wi";
$_3_3 = "wi";
$_3_4 = "wi";
$_3_5 = "wi";
$_3_6 = "ws";
$_3_7 = "ws";
$_3_8 = "ws";
$_3_9 = "ws";
$_3_10 = "ws";

...

$_24_3 = "wi";
$_24_13 = "be";
$_24_14 = "be";
$_24_15 = "wi";
$_24_16 = "wa";
$_24_17 = "wi";

$_25_15 = "wi";
$_25_16 = "wi";
$_25_17 = "wa";

Die x-Koordinaten stehen vorn, die y-Koordinaten hinten $_x_y. Nun schaust du auf dein Blatt Papier und findest heraus, welches Stück Land auf der Koordinate (1/1) zu sehen ist. Keins? Keins, richtig, also schreiben wir sie gar nicht auf. Das erste Bild, das es auf der Karte gibt, hat die Koordinaten (1/3) und dort ist Wiese zu sehen. Also weisen wir der Variablen $_1_3 das Bild 'wi' zu. Die nächsten Koordinaten auf der y-Achse sind (1/4). Auch hier ist wieder Wiese zu sehen. Das war es auch schon an Land auf der y-Achse mit der x-Koordinate 1. Nehmen wir uns nun die Zeile mit allen x-Werten = 2 vor. Auf der Position (2/3) ist Wiese, wie auf der Position (2/4). Auf (2/5) ist Wald, also bekommt die Variable $_2_5 den Wert 'wa' zugewiesen. Auf der nächsten Position (2/6) ist Wasser, $_2_6 ist also "ws". Dann kommt eine zeitlang gar nichts, und auf (2/10) ist schließlich wieder Wasser.

Das ist viel Schreibarbeit, erfordert Nerven und Konzentration, dauert lange und ist obendrein auch noch langweilig. Wenn du nun also einmal tief in dich gehst, dich fragst, ob du das Prinzip verstanden hast, und dir als ehrliche Antwort ein "Ja" gibst, kannst du diese Seite jetzt komplett hier herunterladen. Ansonsten füge selbst erst einmal ein paar der fehlenden Variablen ein.

 

10.2 Die Kommandozentrale

Damit nicht jedesmal die ganze Webseite neuladen muss, wenn man sich bewegt, ist es ratsam, die Karte in einem iframe anzeigen zu lassen. Ein Landschaftsbild ist 50 Pixel breit und hoch, insgesamt gib es waagerecht wie senktrecht 5 Bilder, also muss der iframe 250 x 250 Pixel groß sein. Damit kein lästiger Scrollbalken erscheint, schalten wir ihn für den iframe ganz aus. Rechts vom iframe soll das Naviationsmenü, also fügen wir beides in eine Tabelle ein.

// Die Seite goldenerring.php

?>

<table align="center">
    <tr>
        <td>
<iframe src="land.php" name="Karte" frameborder="0" style="width: 250; height: 250" scrolling='no'></iframe>
        </td>
        <td valign='top'>
            <img src="navi.gif" width="79" height="77" usemap="#Map" border="0">
        </td>
    </tr>
</table>

<map name='Map'>
    <area shape="circle" coords="40,65,11" href='land.php?Tar=unten' target='Karte'>
    <area shape="circle" coords="66,39,11" href='land.php?Tar=rechts' target='Karte'>
    <area shape="circle" coords="12,39,11" href='land.php?Tar=links' target='Karte'>
    <area shape="circle" coords="39,13,11" href='land.php?Tar=oben' target='Karte'>
</map>

<?php

Die Links im Navigationsmenü sind mit einer Imagemap eingefügt. Du könntest das Menübild aber auch auseinaderschneiden und in einzelnen Bildern, die du verlinkst, wieder zusammensetzten. Da wir hier kein PHP benötigen, kannst du zur Abwechslung restlos alles in HTML auf dieser Seite schreiben.

Der iframe und die Links führen zur Seite land.php. Diese werden wir gleich erstellen. Den Links wird in der Variablen $_GET['Tar'] übergeben, in welche Richtung man laufen möchte. Das fragen wir gleich auf der Seite land.php ab.

 

10.3 Karte anzeigen

Da die Seite mit der Karte in einem iframe geladen wird, und nicht direkt innerhalb des PHP Layouts angezeigt wird, braucht sie ein HTML Grundgerüst.

<?php

// Die Seite land.php

session_start();

include "wiesen_karte.php";

?>

<html>
  <head></head>
    <body leftmargin='0' rightmargin='0' topmargin='0' marginheight='0'>


  <img STYLE='position:absolute; TOP:106; LEFT:112px;' src='mann.gif' border='0'>

<?php

?>

    </body>
</html>

Zuerst einmal müssen wir wieder eine Session Funktion starten, da wir gleich damit arbeiten werden. Dann fügen wir unsere Karte ein. Das machen wir mit der bekannten include() Funktion. Wir hätten auch die Koordinaten Variablen gleich in die Seite land.php schreiben können, dann hätten wir Spaß beim Scrollen bekommen.
Dem Body-Tag geben wir die margin-Eigenschaften mit damit auf der Webseite kein Abstand vom Browserrand zu unteren Bildern entsteht. Außerdem fügen wir schon einmal unser Männchen ein. Die Eigenschaft Style legt hier fest, dass es immer an der gleichen Position angezeigt wird. So bekommen wir das Bild des Menschen über die Bilder der Landschaft.

10.3.1 Position des Wanderers

Wir benötigen die Koordinaten, um die Position des Spielern auszumachen. Diese speichern wir in 2 Sessions.

// PHP Code oberhalb des HTML Grundgerüsts

if (!(isset($_SESSION['PosX']))) {

    $_SESSION['PosX'] = 9;
    $_SESSION['PosY'] = 7;

}

Wenn der Spieler die Seite betritt, gibt es noch keine Sessions. Also geben wir eine Position vor, auf der er starten soll. Hier z. B. (9/7).

10.3.2 Die Karte um den Spieler

Nun wissen wir, wo der Spieler steht, und müssen herausfinden, welches Stück Landschaft um ihn herum angezeigt werden soll. Wir haben 25 Bilder, die angezeigt und bestimmt werden müssen.

// Die Position des Spielers in einfacheren Variablen
// Z. B. im PHP Bereich unter dem Männchen Bild

$StandX = $_SESSION['PosX'];
$StandY = $_SESSION['PosY'];

Das erste Bild oben in der Ecke.

$StandX1 = $StandX - 2;
$StandY1 = $StandY - 2;

Der Spieler ist in der Mitte, das Bild also um 2 Koordinaten auf der x-Achse nach links und auf der y-Achse 2 Koordinaten nach oben verschoben. Vom Spieler aus betrachtet, zähle die Abstände der Bilder auf den Achsen (angegeben durch x/y).

-2/-2
-1/-2
-1/0
+1/-2
+2/-2
-2/-1
-1/-1
-1/0
+1/-1
+2/-1
-2/0
-1/0
0/0
+1/0
+2/0
-2/+1
-1/+1
+1/0
+1/+1
+2/+1
-2/+2
-1/+2
+2/0
+1/+2
+2/+2

In $StandX1 und $StandY1 sind nun also die x- und y- Koordinaten des Bildes links oben in der Ecke gespeichert. Für ein Bild reicht das noch nicht ganz aus. Erinnern wir uns an den Aufbau der Variablen aus wiesen_karte.php: $_x_y. Aus dieser Variablen müssen wir das Bild laden. Wie machen wir das?

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

Damit wir mit unseren Positions-Koordinaten-Variablen rechnen können, bestehen sie nur aus Zahlen. Die Variable, die wir auslesen müssen, hat aber Unterstriche, (da Variablennamen nicht mit einer Zahl beginnen dürfen, Lektion 1!). Also fügen wir sowohl vor unsere x- alsauch vor unserer y-Koordinate mit Hilfe eines Strings einen Unterstrich. Und so wäre $StandX1a nun ausgelesen (von der Startposition aus) "_7", und $StandY1a "_5".

Doch auch das ist noch nicht ausreichend, wir müssen die Teile zu einer einzigen Variablen zusammenfügen.

$Img1a = $StandX1a.$StandY1a;

Das funktioniert mit dem Punktoperator. Der Wert der Variablen $Img1a ist nun "_7_5". Und wie kommen wir nun an den Wert der Variablen $_7_5 aus unserer wiesen_karte.php?

$Img1 = $$Img1a;

Wir hängen an den Wert der Variablen $Img1a, also "_7_5" noch ein Dollerzeichen, das eine Variable einleitet, und erhalten "$_7_5". Das ist nun endlich eine Variable, die ausgelesen werden kann. Weil es etwas übersichtlicher aussieht, speichern wir sie in der Variablen $Img1.

 

Das nächste Bild. Wir gehen von links nach rechts Zeile für Zeile durch.

$StandX1 = $StandX - 1;
$StandY1 = $StandY - 2;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img2 = $$Img1a;

Schaust du in die Tabelle der Abstände vom Spieler, siehst du, dass die x-Koordinate 1 nach links verschoben ist, und die y-Koordinate 2 nach links. Die Hilfsvariablen können neu überschrieben werden, nur für das Bild brauchst du eine neue Variable. Hier $Img2.

$StandX1 = $StandX;
$StandY1 = $StandY - 2;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img3 = $$Img1a;

Die x- Position ist auf der gleichen wie der des Spielers, es muss also nichts mehr gerechnet werden.

$StandX1 = $StandX + 1;
$StandY1 = $StandY - 2;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img4 = $$Img1a;

 

$StandX1 = $StandX + 2;
$StandY1 = $StandY - 2;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img5 = $$Img1a;

// Nächste Zeile

$StandX1 = $StandX -2;
$StandY1 = $StandY - 1;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img6 = $$Img1a;

$StandX1 = $StandX -1
$StandY1 = $StandY - 1;

$StandX1a = "_".$StandX1;
$StandY1a = "_".$StandY1;

$Img1a = $StandX1a.$StandY1a;
$Img7 = $$Img1a;

Vervollständige dies nun bis einschließlich zum Bild 25.

10.3.3 Bilder ausgeben

Das Ausgeben der Bilder durch Variablen ist nichts Neues für uns.

echo "<img src='".$Img1.".gif' width='50' height='50'>";
echo "<img src='".$Img2.".gif' width='50' height='50'>";
echo "<img src='".$Img3.".gif' width='50' height='50'>";
echo "<img src='".$Img4.".gif' width='50' height='50'>";
echo "<img src='".$Img5.".gif' width='50' height='50'><br>";
echo "<img src='".$Img6.".gif' width='50' height='50'>";
echo "<img src='".$Img7.".gif' width='50' height='50'>";

...

// Usw. bis $Img25

Jetzt kannst du deine Karte um dich herum sehen. Aber was ist, wenn du auf das Feld (5/2) trittst und es keine Variable für das Feld (5/1) gibt, das in Sichtweite liegt? Finde heraus, ob den $Img Variablen Werte zugewiesen wurden oder nicht.

for($i=1; $i<=25; $i++) {

    $Anzeige = "Img".$i;

   if ($$Anzeige == "") {
      $$Anzeige = "be";
   }

}

Diese for-Schleife läuft genauso oft, wie es Bilder geben sollte. Bei jedem Durchlauf wird der Variablen $Anzeige ein anderer Wert zugewiesen. Erst ist $i 1, dann 2, dann 3, also steht dort abwechselnd $Anzeige = "Img1", $Anzeige = "Img2", $Anzeige = "Img3", bis $Anzeige = "Img25". Mit Hilfe des Doppelten Dollarzeichens können wir, wie oben gesehen, den Inhalten auslesen. $$Anzeige entspricht im ersten Durchlauf zum Beispiel $Img1. Ist $Img1 leer, wird $$Anzeige (was $Img1 ist) der Wert 'be' zugewiesen. An der Stelle, erscheint in unserer Karte nun also ein Berg.
Schreibe die Funktion gleich über die Ausgabe der Bilder.

 

10.4 Wandern

Jetzt fangen wir an, zu laufen. Wenn die Links im Navigationsmenü geklickt werden, nimmt die Variable $_GET['Tar'] einen Wert an. Also fragen wir ab, was gedrückt wurde.

// PHP Code über dem HTML Grundgerüst

if ($_GET['Tar'] == "links") {

    $_SESSION['PosX'] = $_SESSION['PosX'] - 1;

}

Nach links Wandern heißt, auf der x-Achse eine Koordinate zurück gehen, also wird der aktuellen x-Koordinate 1 abgezogen. Gehen wir nach rechts, wird 1 hinzugefügt. Gegen wir nach unten, müssen wir 1 der y-Position hinzuaddieren und gehen wir nach oben, 1 von der y-Position abziehen.

Hast du das erledigt, wirst du schnell feststellen, dass du über Wasser und durch Berge laufen kannst. Das geht ja nicht! Wir müssen also bestimmen, was auf dem Feld ist, auf das der Spieler zusteuert.

if ($_GET['Tar'] == "links") {

   $StandX = $_SESSION['PosX'] - 1;
   $StandY = $_SESSION['PosY'];

   $StandXa = "_".$StandX;
   $StandYa = "_".$StandY;

   $Zuga = $StandXa.$StandYa;
   $Zug = $$Zuga;

   if (($Zug == "wi") OR ($Zug == "wa")) {

      $_SESSION['PosX'] = $_SESSION['PosX'] - 1;

   }

}

Gehen wir zum Beipiel nach links, schauen wir nach dem bekannten Schema nach, was 1 Feld links von unserer Position ist und speichern es in der Variablen $Zug. Ist auf diesem Feld Wiese oder Wald gehen wir weiter, ansonsten passiert gar nichts.

Und wenn du die Überprüfung allen Richtunsgabfragen angepasst hast, ist dein Gang durch die Landschaft fertig!

 

10.5 Der goldene Ring

So weit wir auch umherwandern, von einem Ring ist nicht die Spur. Ändern wir das nun. Der Ring soll zufällig auf einem Wiesen- oder Waldplatz angezeigt werden. Damit er nicht bei jedem Schritt woanders ist, schreibe die Funktion innerhalb der Abfrage, ob bereits eine Session mit Positionskoordinaten existiert.

if (!(isset($_SESSION['PosX']))) {

    //Startposition
    $_SESSION['PosX'] = 9;
    $_SESSION['PosY'] = 7;

    $X = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                      "11"
, "12", "13", "14", "15", "16", "17", "18", "19", "20",
                      "21"
, "22", "23", "24", "25");

    $Y = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                      "11"
, "12", "13", "14", "15", "16", "17", "18", "19");

    for ($i=0; $i<50; $i++) {

        srand ((float) microtime() * 10000000);
            $rand_keysX = array_rand($X);
        srand ((float) microtime() * 10000000);
            $rand_keysY = array_rand($Y);

        $Wert = "_".$X[$rand_keysX]."_".$Y[$rand_keysY];
            if (($$Wert == "wi") OR ($$Wert == "wa")) {
                $_SESSION['GoldenerRing'] = $Wert;
                break;
            }
    }
}

$$_SESSION['GoldenerRing'] = "fund";

Um einen zufälligen Platz ausfindig zu machen, legen wir 2 Arrays an. In einem stehen die möglichen Koordinaten der x- Achse, und in dem anderen die der y-Achse. Weil bei einer Zufallsabfrage der erste Versuch nicht unbedingt ein Treffer ist, es könnten auch Berge, Wasser oder nichts gewählt worden sein, geben wir dem Programmstück in einer for-Schleife 50 Versuche. Wie gehabt prüfen wir, welches Landstück sich auf in den Zufallskoordinaten befindet. Ist es Wiese oder Wald, wird einer Session der String mit den Koordinaten (z.B. _18_4) zugewiesen. Ist ein Platz gefunden, kann die Schleife mit break vorzeitig verlassen werden.
Anschließend wird die Variable, in der sich nun der Goldring befindet, mit dem Bild des Goldringes überschrieben. War es zum Beispiel die Position $_18_4, so wird die Variable erst aus der Datei wiesen_karte.php ausgelesen, da die include Funktion oberhalb der neuen Zuweisung ist (wichtig!), und in der Datei land.php überschrieben. Die letzte Zuweisung gilt.

Wenn du nun einfach drauf los einen Ring suchst, wirst du keinen finden, da die Session PosX noch immer existiert. Schließe dein Browserfenster und öffne ein neues, die Session wird dadurch gelöscht. Solltest du den Ring nicht finden, kannst du kurz schummeln und dir auf der Seite land.php durch echo $_SESSION['GoldenerRing']; den String ausgeben lassen, dann weißt du ungefährt, wo du suchen musst.

Da Der Ring "fund" weder "wi" noch "wa" ist, kannst du nicht drauf laufen. Das soll sich nun ändern. Wenn man das Feld betritt, soll sich eine neue Seite öffnen mit der freudigen Botschaft, dass man den Ring gefunden hat. Wenn sich der Spieler die URL dieser Seite nun aber merkt, kann er beim nächsten Spielen das Suchen umgehen. Deshalb werden wir ihm noch eine Session verpassen, wenn er tatsächlich auf das Feld Fund getreten ist.

if ($Zug == "fund") {

    $_SESSION['Sieg'] = "Ist deiner!";

    echo "<script language='JavaScript'>
    top.location.href='index.php?Seite=goldenerring.php&action=Fund'
    </script>"
;

die;
}

Füge diese if-Abfrage in allen 4 Richtungsabfragen ein. Das Java Skript wird die neue Seite im ganzen Browserfenster, und nicht nur im iframe öffnen. Die Anweisung die; bedeutet, dass die PHP Seite nicht mehr weitergeladen werden soll. Warum auch, das Spiel ist beendet.

// Die Seite goldenerring.php

<?php

if ($action == "Fund") {

    if ($_SESSION['Sieg'] == "Ist deiner!") {
        echo "Glückwunsch, du hast den goldenen Ring gefunden!";
    } else {
        echo "Wo hast du den goldenen Ring gelassen?";
    }

} if ($action != "Fund") {

?>

    // Das Spiel

<?php

}

?>


hr

10.6 Übung

Baue dieses Spiel in deine Übungsseite ein.

« zurück Inhalt | Fragen       Kurs weiter »
Layout