Backgammon

[chris17]

Hallo zusammen,

ich würde gern ein 2-Spieler-Backgammon-Spiel mit PHP/MySQL entwickeln.

Beim Klicken auf ein <input type='image' src='...'> werden die x- und y- Koordinaten übertragen.

Das brachte mich auf folgende Idee:
Ich generiere als Image-Source ein PNG, dass per GD-Funktionen erstellt wird.

Folgender Code demonstriert die Funktionsweise mit einem Spielstein.

PHP-Code:

<?php
    // index.php
    if($_POST['kord_x']) // Wo wurde geklickt?
    {
        $x = $_POST['kord_x'];
        $y = $_POST['kord_y'];
        if($y <= 170)
        {
            for($i = 0; $i < 210; $i += 35)
            {
                if($x >= 15 + $i && $x <= 45 + $i)
                {
                    $pos = 12 - $i / 35;
                }
                if($x >= 255 + $i && $x <= 285 + $i)
                {
                    $pos = 6 - $i / 35;
                }
            }
        }
        elseif($y >= 230)
        {
            for($i = 0; $i < 210; $i += 35)
            {
                if($x >= 15 + $i && $x <= 45 + $i)
                {
                    $pos = 13 + $i / 35;
                }
                if($x >= 255 + $i && $x <= 285 + $i)
                {
                    $pos = 19 + $i / 35;
                }
            }
        }
    }

    echo "<font size='2' face='Verdana'>Zunge Nr.: ".$pos."</font>";
    echo "<form action='index.php'method='post'>";
    echo "<input type='image' src='brett.php?pos=".$pos."' name='kord'>";
    echo "</form>";
?>



<?php
    // Das Spielbrett:
    // brett.php

    // Spielbrett zeichnen
    $brett_breite = 480;
    $brett_hoehe  = 400;
    $im = imagecreate($brett_breite,$brett_hoehe);
    $brett_farbe = imagecolorallocate($im, 125, 125, 125);
    for($i = 0; $i < 2; $i++)
    {
        for($j = 0; $j < 12; $j++)
        {
            $abstand_zunge_x = 35;
            $extra_abstand   = 0;
            $j > 5 ? $extra_abstand = 30 : "";

            $i == 0 ? $mess_p = array(15 + $extra_abstand + $j * $abstand_zunge_x,10, 45 + $extra_abstand + $j * $abstand_zunge_x,10, 30 + $extra_abstand + $j * $abstand_zunge_x,160) : $mess_p = array(30 + $extra_abstand + $j * $abstand_zunge_x,240, 45 + $extra_abstand + $j * $abstand_zunge_x,390, 15 + $extra_abstand + $j * $abstand_zunge_x,390);

            if($j % 2 == $i)
            {
                $hell = imagecolorallocate($im, 200, 200, 200);
                imagefilledpolygon($im, $mess_p, 3 , $hell);
            }
            else
            {
                $dunkel = imagecolorallocate($im, 100, 100, 100);
                imagefilledpolygon($im, $mess_p, 3 , $dunkel);
            }
        }
    }
    // Spielstein positionieren
       if($_GET['pos'] > 0)
    {
        if($_GET['pos'] <= 12)
        {
            $pos = (12 - $_GET['pos']) * 35;
            $pos_y = 0;
        }
        if($_GET['pos'] <= 6)
        {
            $pos +=  30;
            $pos_y = 0;
        }

        if($_GET['pos'] > 12)
        {
            $pos = ($_GET['pos'] - 13) * 35;
            $pos_y = 350;
        }
        if($_GET['pos'] >= 19)
        {
            $pos += 30;
        }

        $stein_hell = imagecolorallocate($im, 255, 255, 255);
        imagearc($im, 30 + $pos, 25 + $pos_y, 30, 30, 0, 360, $stein_hell);
        imagefill($im, 30 + $pos, 25 + $pos_y, $stein_hell);
    }
    imagepng($im);
    imagedestroy($im);
?>

Was haltet Ihr von diesem Ansatz?

Lauf ich da in eine Sackgasse?

Bin für jeden Tipp dankbar.

Grüsse

chris17

[Matthias]

Gute Idee!!!

Aber wieso machst du das Brett nicht Bunt?
Stengt ein wenig die Augen an!

Du solltest für die Mozilla und Netscape Browser folgende Zeile einfügen.

PHP-Code:

header("Content-Type: image/png"); 


Überlege ob du überhaupt die Koordinaten benötigst. Hab das Spiel schon ewig nicht mehr gespielt, aber es müsste doch ausreichend sein, dass du die Zacke auswählst wo der Stein ist und dann die Zacke wo er hin soll?? Hmmmm!!!

Andere Idee:
Brett als Hintergrund und jeden Stein mit nem Link versehen.
Hat den Vorteil, dass du das Brett nicht immer neu Zeichnen musst. Einmal abspeichern und fertig. Die Steine sind mit <div> einfach zu positionieren.

[Matthias]

Hast du dir auch schon gedanken zum Speichern der Position der Steine gemacht?

[chris17]

Hallo Matthias,

Bis jetzt gibt's drei Tabellen:
- je eine für die hellen und dunkle Steinen -> id und die Nummer der Zunge auf der sich der Stein befindet.
- Eine Tabelle für die beiden Würfel und die Information wer am Zug ist

Ich denke darüber nach Tabellen für mögliche/gültige Spielzüge anzulegen, die sich aus der aktuellen Spielposition ergeben. -> Schwarz würfelt 3/5, klickt auf den Stein mit dem gezogen werden soll, aus der Tabelle geht hervor, dass nur mit der 5 ein gültiger Spielzug möglich ist. Das könnte die Anzahl der Klicks verringern. Wären beide Zahlen möglich, käme eine Abfrage(Popup?) welcher Zug gewünscht ist.
Der Fall, dass ein Zug rückgängig gemacht werden kann, muss auch noch bedacht werden. Und, und, und...

Nun ja, ich hab' noch keinen endgültigen Plan und keine Erfahrung mit "Spieleprogrammierung".


Bisheriger Spielablauf:
-> Weiss ist am Zug und hat das <input type='image' src='brett.php'> vor sich.

-> Schwarz sieht zur gleichen Zeit das Spielfeld als Bild <img src='brett.php'>, die Seite wird per "refresh" alle paar Sekunden neu geladen.

-> Weiss hat seinen Zug gemacht, die Tabellen mit neuen Positionen und Würfel-Infos werden in der DB aktualisiert. Weiss sieht jetzt das Spielbrett als normale Grafik, und die Seite wird alle paar Sekunden neu geladen.

-> Schwarz sieht nun das aktuelle Spielfeld als <input type='image' src='brett.php'> und kann seine Steine ziehen.


Nun ja, da gibt's noch viel Arbeit. Vielleicht knöpfe ich mir erstmal Tic-Tac-Toe vor :-))

Vielen Danke für Dein Feedback.

Gruss

Christian

P.S.: Ach ja, wenn ich das Spiel fertig bekomme, dann gibt's noch ein Farbeditor für die Steine und das Brett :-)