Snake (das Spiel)

[Pr0g]

In diesem Tutorial werde ich erklären, wie man einen Snakeklon in Delphi programmiert. Am Ende dieses Tutorials kann ein Beispielcode heruntergeladen werden.


Die Grundlagen

Zuerst muss geklärt werden, wie das ganze funktionieren wird. Das Spielfeld besteht aus einzelnen Feldern. Jedes Feld kann leer sein, oder einen Teil der Schlange, bzw. ein Stück Futter enthalten. Zum Speichern der einzelnen Felder wird ein zwei dimensionales Array genommen. Jedes Feld hat einen Index und kann folgende Werte beinhalten:

Code:

-1 -> Futter
 0 -> ein leeres Feld
>0 -> einen Teil der Schlange

Alle Werte, die größer als 0 sind stellen einen Teil der Schlange da, wobei das Feld mit der höchsten Zahl (immer die Länge der Schlange) den Kopf darstellt. Dazu gleich mehr. Die folgende Abbildung zeigt die einzelnen Indizes der Felder, so wie sie später auch im Programm genutzt werden:

http://knowhow.pr0g.net/files/snake1.gif

Die Schlange

Nun müssen wir uns überlegen, wie die Position der einzelnen Schlangenteile am besten gespeichert wird. Ich will euch nun ein System erläutern, welches wir in diesem Tutorial nutzen werden und welches ich sehr gut finde. Gehen wir mal davon aus, dass die Schlange beim Start eine Länge von 5 hat, im Feld mit dem Index (0/0) startet und die aktuelle Laufrichtung (auch dazu gleich mehr) nach unten führt. Also wird zuerst in das Feld (0/0) die Länge der Schlange, also der Wert 5 gespeichert. Nun folgt eine Routine, die bei jeder Bewegung ausgeführt wird. Diese geht alle Felder durch und verringert jeden Wert, der höher als 0 ist um 1. In Feld (0/0) ist nun also der Wert 4 gespeichert. Da unsere Schlange nach unten geht müssen wir noch die neue Position für den Kopf setzen. Dies wäre das Feld (0/1), welches nun den Wert 5 erhält. Wenn wir nun die Routine von eben wieder durchlaufen lassen, dann wäre im Feld (0/0) der Wert 3, im Feld (0/1) der Wert 4 gespeichert und der neue Kopf würde (falls die Laufrichtung nicht geändert wird) im Feld (0/2) wieder mit dem Wert 5 gespeichert werden. Nach einiger Zeit wäre der Wert im Feld (0/0) bei 0 angekommen, also die Schlänge wäre nicht mehr auf diesem Feld. Bei einer Länge von 5 hätte wir dann 5 Felder mit Werten höher als 0. Das Feld mit dem Kopf hat den Wert 5, die dahinterliegenden Felder die Werte 4 bis 1. Da das Feld mit dem Wert 1 nach der Routine immer wegfällt und der Kopf neu gesetzt wird kommt eine Bewegung zustande.


Die Laufrichtung

Die Laufrichtung, sowohl auf der X als auch auf der Y Achse werden wir in eine Variable vom Typ "TPoint" speichern. Die Variable heißt "richtung" und kann folgende Wertkombinationen enthalten. Der erste Wert steht in "richtung.X", der zweite in "richtung.Y":

Code:

( 0 / -1) -> nach oben
( 1 /  0) -> nach rechts
( 0 /  1) -> nach unten
(-1 /  0) -> nach links

Die Bewegung

Mit Hilfe der Laufrichtung können wir die neue Position des Kopfs berechnen. Dazu benötigen wir aber auch noch die alte, bzw. aktuelle Position des Kopfs. Diese könnte man natürlich jedes Mal aus dem Array heraussuchen, jedoch ist es leichter und schneller, wenn man diese auch in einer Variable vom Typ "TPoint" speichern würde. Nennen wir die Variable mal "kopf". Ist der Kopf der Schlange auf Feld (1/2), so hat "kopf.X" den Wert 1 und "kopf.Y" den Wert 2. Nun werden die Werte aus "richtung" zu den Werten aus Kopf addiert. Dazu ein Beispiele für einen Schritt nach oben, die anderen Richtung laufen gleich ab, ausgehend von dem Feld (1/2):

Delphi-Quellcode:

// "richtung" -> (0/-1)

kopf.X = kopf.X + richtung.X
kopf.Y = kopf.Y + richtung.Y

kopf.X = 1 + 0
kopf.Y = 2 + (-1)

kopf.X = 1
kopf.Y = 2 - 1

kopf.X = 1
kopf.Y = 1

Der Kopf hat nun die Position (1/1), also ein Feld höher als vorher.


Die Ausgabe

Um das Spiel auch sehen zu können, brauchen wir eine Fläche, wo wir drauf zeichnen können. Dazu nehmen wir eine "TPaintBox". Für jedes Feld zeichnen wir ein Kästchen. Würden wir für die leeren Felder die Farbe Schwarz (auf dem Bild Grau), für die Schlange Grün und für das Futter Rot nehmen, so könnte die Ausgabe im Spiel folgendermaßen aussehen (die Zaheln werden im Spiel natürlich nicht zu sehen sein, sollen jedoch nun auf der Abbildung die Werte verdeutlichen):

http://knowhow.pr0g.net/files/snake2.gif

Der Code

Nun aber genug Theorie, kommen wir zum Code. Startet Delphi oder erstellt ein neues Projekt. Plaziert nun eine "TPaintBox" (Komponentenregister "System") mit einer Breite und Höhe von jeweils 250 auf der Form. Setzt nun einen "TTimer" auf die Form und setzt bei "Interval" den Wert 100 und bei "Enabled" den Wert "False". Nun brauchen wir noch 5 "TButtons". Der erste wird zum Starten des Spiels genutzt, die anderen sind für den Wechsel der Laufrichtung zuständig. Legt nun am Anfang des Codes folgende Konstanten an:

Delphi-Quellcode:

...
uses...

const
  farben: Array [0..2] of TColor = (clBlack, clLime, clRed);
  raster = 10;
  breite = 24; //0 bis 24 -> 25
  hoehe = 24;

type
  TForm1 = class(TForm)
...

In der Konstante "farben" werden die Farben zum späteren Darstellen der leeren Felder, der Schlange und des Futters gespeichert. In "raster" steht, wie viele Pixel ein Feld breit und hoch ist. In "breite" und "hoehe" wird angegeben, wie viele Felder es gibt. Wir nehmen ein Fläche von 25x25 Feldern. Nun zu den Variablen. Diese werden kommen in den "private" Abschnitt:

Delphi-Quellcode:

...
  private
    { Private-Deklarationen }
    map: Array [0..breite] of Array [0..hoehe] of Integer;
    kopf,
    richtung,
    futter: TPoint;
    laenge,
    punkte: Integer;
    ende: Boolean;
    bmp: TBitmap;
  public
    { Public-Deklarationen }
  end;
...

"map" ist unser Spielfeld, wie vorhin besprochen. Darin werden die verschiedenen Werte der einzelnen Felder gespeichert. In "kopf" und "futter" wird die aktuelle Position des Kopfes der Schlange und des Futters gespeichert. In "richtung" die Laufrichtung, wie oben besprochen. In "laenge" wird die die aktuelle Länge der Schlange gespeichert und in "ende", ob das Spiel noch läuft oder nicht. Nun definieren wir mehrere Prozeduren, die gleich jeweils erläutert werden, auch in den "private" Abschnitt unter die Variablen:

Delphi-Quellcode:

...
    procedure enable_buttons(status: Boolean);
    procedure spiel_ende;
    procedure neues_futter;
    procedure paint_map;
    procedure calc_snake;
  public
    { Public-Deklarationen }
  end;
...

Die Prozedur "enable_buttons" sorgt dafür, dass die Richtungswechsel-Buttons bspw. nur aktiv sind, wenn das Spiel auch läuft, als Parameter wird angegeben, ob die Buttons aktiv ("True") oder nicht aktiv ("False") sein sollen. Die Prozeduren werden unter dem Implementationsteil geschrieben:

Delphi-Quellcode:

...
implementation

{$R *.dfm}

procedure TForm1.enable_buttons(status: Boolean);
begin
  Button2.Enabled := status;
  Button3.Enabled := status;
  Button4.Enabled := status;
  Button5.Enabled := status;
end;
...

Unter "enable_buttons" kommt die Prozedur "spiel_ende". Diese wird beim Ende des Spiels aufgerufen. Die einzelnenen Schritte in der Prozedur sollten (später jedenfalls) klar sein:

Delphi-Quellcode:

...
procedure TForm1.spiel_ende;
begin
  ende := True;
  Timer1.Enabled := False;
  enable_buttons(False);
  Button1.Enabled := True;
end;
...

Nun kommt die Prozedur "neues_futter". Diese berechnet so lange eine neue zufällige Futterposition, bis ein freies Feld gefunden wurde. Danach enthält dieses Feld den Wert "-1":

Delphi-Quellcode:

...
procedure TForm1.neues_futter;
begin
  futter := Point(Random(breite), Random(hoehe));
  while map[futter.X, futter.Y]<>0 do
    futter := Point(Random(breite), Random(hoehe));
  map[futter.X,futter.Y] := -1;
end;
...

Die nächste Prozedur, "paint_map", ist für die Ausgabe zuständig. Mit zwei Schleifen wird die gesammte "map" durchgegangen und für jedes Feld die passende Farbe aus dem Array "farben" herausgesucht. "-1" war das Futter, "0" ein leeres Feld und alles andere ein Teil der Schlange. Dann wird an der entsprechenden Position ein Kästchen mit der zuvor ermittelten und in "col" gespeicherten Farbe geszeichnet:

Delphi-Quellcode:

...
procedure TForm1.paint_map;
var
  i, j: Integer;
  col: TColor;
begin
  for i := 0 to breite do
    for j := 0 to hoehe do
    begin
      case map[i, j] of
        -1: col := farben[1];
         0: col := farben[0];
      else
        col := farben[2];
      end;
      PaintBox1.Canvas.Brush.Color:=col;
      PaintBox1.Canvas.FillRect(Rect(i*raster, j*raster, (i+1)*raster, (j+1)*raster));
    end;
end;
...

Die letzte (selbsgeschriebene) Prozedur, "calc_snake", ist für das Berechnen der neuen Kopfposition und das verringern aller Werte in "map" um eins zuständig. Eine genauere Erklärung kommt nach dem Code:

Delphi-Quellcode:

...
procedure TForm1.calc_snake;
var
  i, j: Integer;
begin
  for i := 0 to breite do
    for j := 0 to hoehe do
      if map[i, j]>0 then
        Dec(map[i, j]);
  Inc(kopf.X, richtung.X);
  Inc(kopf.Y, richtung.Y);
  if (kopf.X<0) or (kopf.X>breite) or (kopf.Y<0) or (kopf.Y>hoehe) then
  begin
    spiel_ende;
    ShowMessage('Sie haben den Rand berührt!');
  end;
  if (map[kopf.X, kopf.Y]>0) and (not ende) then
  begin
    spiel_ende;
    ShowMessage('Sie haben sich selbst gebissen!');
  end;
  if (kopf.X=futter.X) and (kopf.Y=futter.Y) then
  begin
    Inc(laenge);
    neues_futter;
  end;
  map[kopf.X, kopf.Y] := laenge;
end;
...

Zuerst wird mit zwei Schleifen jedes Feld, welches einen Wert höher als 0 enthält um eins verringert. "Dec(a)" ist eine kürzere Schreibweise für "a := a-1". Diese Routine wurde vorhin schon im Abschnitt "Die Schlange" erläutert. Nun werden, wie in "Die Laufrichtung" beschrieben, die Werte aus "richtung" zu den aktuellen Werten aus "kopf" addiert. Die Funktion "inc(a, b)" ist eine kürzere Schreibweise für "a := a+b;". Danach wird geprüft, ob der Kopf den Rand oder einen Teil der Schlange berührt hat und gegebenenfalls das Spiel beendet und eine entsprechende Meldung ausgegeben. Dann wird geprüft, ob der Kopf auf dem Feld mit dem Futter steht. Wenn ja, dann wird die Länge der Schlange um eins erhöht und eine neue Futterposition errechnet. Zum Schluss wird der Kopf an die neue Position gesetzt. Gebt nun dem "Button1" die Caption "Start" und klickt doppelt drauf um in das "OnClick"-Ereignis zu gelangen. Dort schreibt ihr folgenden Code rein:

Delphi-Quellcode:

...
procedure TForm1.Button1Click(Sender: TObject);
var
  i, j: Integer;
begin
  Button1.Enabled := False;
  for i:=0 to breite do
    for j:=0 to hoehe do
      map[i, j] := 0;
  kopf := Point(1, 1);
  laenge := 5;
  richtung := Point(0, 1);
  map[kopf.X, kopf.Y] := laenge;
  neues_futter;
  paint_map;
  enable_buttons(True);
  ende := False;
  Timer1.Enabled := True;
end;
...

Nun eine Erklärung des Codes. Der Startbutton wird deaktiviert, dann wird mit einer Schleife die gesamte "map" auf den Wert "0" gesetzt. Als nächstes wird die Startposition des Kopfes angegeben. "kopf := Point(x, y);" ist dabei eine kürzere Schreibweise für "kopf.X := x; kopf.Y := y". Die Länge der Schlange wird auf 5 und die Laufrichtung "nach unten" gesetzt. Nun wird die erste Position des Kopfs in "map" eingetragen, dann eine neue Futterposition berechnet und das Spiel wird ausgegeben. Zum Schluss werden die Richtungswechsel-Buttons aktiviert und der Timer für das Spiel gestartet. Nun kommt der Code für den Timer. Klickt doppelt auf "Timner1" und fügt folgenden Code in dessen "OnTimer"-Ereignis ein:

Delphi-Quellcode:

...
procedure TForm1.Timer1Timer(Sender: TObject);
begin
  calc_snake;
  if not ende then
    paint_map;
end;
...

Bei jedem Timeraufruf wird die Prozedur "calc_snake" aufgerufen. Ist das Spiel noch nicht zu Ende, so wird die Ausgabe gezeichnet. Diese Abfrage ist trotz deaktivieren des Timers bei Spielende notwendig, da sonst nach Ende noch ein Schritt gezeicht wird. Nun kommen die Richtungswechsel-Buttons. Gebt "Button2" die Caption "oben" und fügt folgenden Code in dessen "OnClick"-Ereignis ein:

Delphi-Quellcode:

...
procedure TForm1.Button2Click(Sender: TObject);
begin
  if richtung.Y=0 then
    richtung := Point(0, -1);
end;
...

Die "If"-Abfrage vor dem Setzen der neuen Richtung ist dazu da um einen direkten Richtungswechsel zu verhindern. So ist es bspw. nicht Möglich während man nach unten läuft die Richtung nach oben zu ändern. "Button3" bekommt die Caption "links" und folgenden Code:

Delphi-Quellcode:

...
procedure TForm1.Button3Click(Sender: TObject);
begin
  if richtung.X=0 then
    richtung := Point(-1, 0);
end;
...

"Button4" die Caption "rechts" und folgenden Code:

Delphi-Quellcode:

...
procedure TForm1.Button4Click(Sender: TObject);
begin
  if richtung.X=0 then
    richtung := Point(1, 0);
end;
...

Und "Button5" die Caption "unten" und folgenden Code:

Delphi-Quellcode:

...
procedure TForm1.Button5Click(Sender: TObject);
begin
  if richtung.Y=0 then
    richtung := Point(0, 1);
end;
...

Zu guter Letzt klickt ihr noch doppelt auf die "Form1" und schreibt in das "OnCreate"-Ereignis folgenden Code:

Delphi-Quellcode:

...
procedure TForm1.FormCreate(Sender: TObject);
begin
  Randomize;
end;
...

Der Befehl "Randomize" sorgt dafür, dass die Zufallszahlen (bei der Futterposition) auch wirklich Zufällig sind und sich nicht bei jedem Start wiederholen.


Ende

Wenn ihr alles richtig gemacht habt, sollte sich das Spiel nun kompilieren lassen. Falls ihr noch einen Punktezähler einbauen wollt, so definiert am Anfang eine Integervariable, die er dann beim Start "Button2" auf 0 setzt. Immer wenn nun in "calc_snake" sie Länge der Schlange um eins erhöht wird, könnt ihr auch euren Punktezähler um einen beliebigen Wert erhöhen und diesen dann bspw. in einem Label ausgeben. Zu Beginn habe ich Konstanten gewählt um die Rater und Spielfeldgröße anzugeben. Dadurch ist es Problemlos möglich die Spielfeldgröße zu ändern. Tragt dazu einfach neue Werte in "breite", "hoehe" und "raster" ein und passt die Größe der Paintbox an. Die könnt ihr folgendermaßen errechnen: "(breite+1)*raster" und die Höhe entsprechend auch.


Download des Beispielcodes: snake_src.zip (1.99Kb)

MfG Pr0g

[neolithos]

Mir ging es eigentlich um den Record sondern, die Art und weise wie ich die Schlange im Speicher halte.

Bei die ist Spielfeld und Schlange eins. Bei mir ist dies klar getrennt.

Übrigens das weiterrücken der Schlange ist bei mir einfach zu lösen.

Delphi-Quellcode:

with Snake do
  begin  
   Inc(iHead);
   if iHead > ciMaxBuffer then
      iHead := 0;
   aBody[iHead] := Point();
  end;

Achtung: Die Schlange sollte nie länger werden als ciMaxBuffer.

[Pr0g]

Wie würdest du bei deinem Code das Entfernen des letzten Stücks der Schlange realisieren? Alle Elemente des Arrays eins nach vorne verschieben?

Wofür ist die Variable "iGrow" gedacht?

[neolithos]

Das interessante bei der Sache ist das die Schlange im Speicher nicht verschoben wird, sondern ich setze den Anfang nur neu.

Bsp.:
Speicher:

Code:

  iHead = 2
  iLen = 3
  ((1, 2), (1, 3), (2, 3), (?, ?), (?, ?), ...)

Nach der Bewegung:

Code:

  iHead = 3
  iLen = 3
  ((1, 2), (1, 3), (2, 3), (3, 3), (?, ?), ...)

Noch eine:

Code:

  iHead = 4
  iLen = 3
  ((1, 2), (1, 3), (2, 3), (3, 3), (4, 3), (?, ?), ...)

(Index bei 0 beginnend)


Das Grow (Wachstum) kümmert sich um das längerwerden der Schlange.

Ungefähr so:

Delphi-Quellcode:

if iGrow > 0 then
   begin
     Inc(iLen);
     Dec(iGrow);
   end;

Bsp:

Code:

  iGrow = 2
  iHead = 2
  iLen = 3
  ((1, 2), (1, 3), (2, 3), (?, ?), (?, ?), ...)

Bewegung:

Code:

  iGrow = 1
  iHead = 3
  iLen = 4
  ((1, 2), (1, 3), (2, 3), (3, 3), (?, ?), ...)

Noch eine:

Code:

  iGrow = 0
  iHead = 4
  iLen = 5
  ((1, 2), (1, 3), (2, 3), (3, 3), (4, 3), (?, ?), ...)

Eine ohne Wachstum da iGrow = 0

Code:

  iGrow = 0
  iHead = 5
  iLen = 5
  ((1, 2), (1, 3), (2, 3), (3, 3), (4, 3), (5, 3), (?, ?), ...)

Wie man sieht kommt man bei meinen Algo ohne irgentwelche aufwendigen Schleifen aus. Was bei Handy, GTR oder alten Rechnern wichtig ist. Da die ja nicht so Schnell sind.

[Pr0g]

Zitat von neolithos:

Nach der Bewegung:

Code:

  iHead = 3
  iLen = 3
  ((1, 2), (1, 3), (2, 3), (3, 3), (?, ?), ...)

Das Element mit dem Index 3 (iHead) stellt den Kopf der Schlange da, richtig? Nun hat die Schlange eine Länge von 3 (iLen), also werden die Elemente 3 bis 1 genutzt um die Schlange darzustellen, etc. Das würde bedeuten, dass das Element 0 ungenutzt ist, oder? Wenn ja, dann würde beim nächsten Schritt zusätzlich noch das Element 1 ungenutzt sein, sofern sich die Länge nicht ändert, da der Kopf ja nun den Index 4 hat. Doch dann wäre nach einiger Zeit kein Element mehr vorhanden, um den Kopf zu setzen. Oder?

[Edit]Schon gut, habe die Zeile if iHead > ciMaxBuffer then iHead := 0; in deinem Code übersehen [/edit]

[neolithos]

Ist diese Erkenntnis eine neues Tutorial Wert?

Snake für Fortgeschrittene!

Hinweis:
Bei einem einfachen Snake würde ich nur das erste Element zeichnen und das letzte überzeichnen mit dem Levelfeld.

[Pr0g]

Zitat von neolithos:

Ist diese Erkenntnis eine neues Tutorial Wert?

Vielleicht irgendwann mal, sofern du keins über das von dir genutze System schreibst.

Zitat von neolithos:

Bei einem einfachen Snake würde ich nur das erste Element zeichnen und das letzte überzeichnen mit dem Levelfeld.

Hast recht, würde auch gehen. Ich hatte eigentlich geplant einen zweiten Teil zu schreiben, in dem die Zeichenfunktion so ergänzt wird, dass die Schlange aus einem Grafikset, also mit Kurven, Kopf usw. gezeichnet wird, kam bis jetzt aber nicht dazu, bzw. hatte keine Lust.

Vielleicht mache ich irgendwann mal eine Neuauflage oder Ergänzung zu diesem Turorials

[neolithos]

Zitat von Pr0g:

Vielleicht irgendwann mal, sofern du keins über das von dir genutze System schreibst.

Keine Sorge von mir wird es keine Tutorial geben,

1. Ich bin schlecht im Erklären,
2. Die liebe Reschschrebung,
3. Denke ich das ich dazu schon viel zuviel weis (das soll kein Eigenlob sein).

-> max. ein Tutorial für fortgeschrittene Sachen.

[Jens Schumann]

Zitat von nailor:

naja, hab mich ein wenig aifgeregt. aber man muss ja nicht alles schlechtmachen

Ich wollte das Tutorial bestimmt nicht schlecht machen. Eher war es mein ansinnen konstruktive Kritik zu äußern.
Wenn ich mich im Ton vergriffen habe bitte um Entschuldigung.



P.S. Die größten Kritiker der Elche waren früher selber welche.

[MasterC]

Hi, echt geiles Tutorial!

Leider geht der Downloadlink vom Beispiel nicht mehr.

Kannst du das bitte nochmal hochladen?

MFG Chris.

[Nicodius]

jo bitte wwäre nett

gutes TUT!