[Workshop] Mein eigenes Snake 2D

[.nAno]

Hi,
In diesem Workshop geht es wie ich angekündigt hab um das alte Handygame "Snake", Ziel ist es das Programm wietestgehend selbstständig nachzumachen

Vorwort

Für alle die nicht wissen was Snake überhaupt ist, hier eine kurze Erklärung:

Bei dem Spiel Snake geht es um eine Schlange, wie der Name unschwer vermuten lässt .
Im laufe des Spiel muss diese Schlange, die Anfangs ehr ein kleiner Wurm ist, Futterkörner fressen umzu wachsen.
Dabei muss der Spieler darauf achten sich nicht selber zu beissen, ansonsten ist das Spiel vorbei und man hat verloren.

Warum ein Workshop und kein Tutorial?

Ihr werdet später sehn, dass es wenig gibt was einer größeren sachlichen Erklärung bedarf.
Bei dieser Arbeit geht es vorallem darum logische Vorgänge zu verstehn und die Problematik einiger Vorgänge zu durchschaun und zu lösen.
Alles durch ein Tutorial vorgekaut zu bekommen wäre sinnlos, da man nicht nachdenken muss und folglich nichts neues lernt.

Grundvorraussetzungen

• grundlegende AutoIT Kenntnisse
• AutoIT Compiler und einen geeigneten Editor (SciTe, etc.)
• Die ResourceDaten aus dem Anhang (Grafiken)
• logisches Denkvermögen und Interesse

An alle Copy&Paster:
Bitte spart euch die Arbeit ab hier weiterzulesen und ladet euch einfach den vollständigen SourceCode aus dem Anhang.

Also, falls ihr alle Voraussetzung erfüllt und genug Bereitschaft habt die Arbeit durchzuziehen kann's ja losgehn
Solltet ihr wirklich mal ernsthafte Probleme, trotz meinen Hinweisen, haben könnt ihr auf meine Codesequenzen im unteren Teil des Abschnittes zurückgreifen.

Das Grundgerüst

Damit man eure Ansätze mit meinen Codebeispielen vergleichen kann, solltet ihr ein ähnliches Grundgerüst haben

Dafür brauch ihr als erstes eine GUI, die ungefähr so aussehn sollte:


Die Maße sind:

• Fenster: 300*300px
• Kopf und Körpersegmente: 10*10px Die KörperTeile befinden sich in einem Array.

Achtung: Diese Angaben sind für spätere Funktionen äußerst wichtig, solltet ihr die Daten abändern achtet bitte immer darauf, dass der Quotient aus Fenstergröße und Körperteilgröße immer ganzzahlig ist!

Zusätzlich braucht ihr eine Schleife, die sich wiederholt solange kein Fehler gemacht wird.
Ich hab den einfachsten Weg gewählt und einfach eine Endlosschleife genommen.
Wenn man verliert beendet sich das Programm einfach durch "Exit".

Ihr könnt das auch gerne anders lösen, allerdings kann es dann gut sein, dass euer Script nichtmehr mit dem Meinem verglichen werden kann.

Gut, da wir nun das Einfache geklärt hätten kann es weitergehn
Bis jetzt sollte alles verständlich sein, solltet ihr trotzdem schon Probleme bekommen haben schaut euch bitte erstmal die Grundlagen an (was ich aber nicht glaube^^)

Bewegung und Steuerung

Bewgung

Natürlich muss sich die Schlange auch bewegen können, nur wie stell ich das am besten an und worauf muss ich achten?
Nunja, wie ihr das anstellt bleibt euch überlassen (sonst wäre es ja kein Workshop und auch nicht EUER eigenes Programm )
Hier allerdings einige Tipps, die euch helfen werden:

• Differenziert die einzelnen Bewegungsrichtungen und probiert nicht sie in einer Funktion zusammenzufassen
• Das Programm muss erkennen wann die Schlange den Rand des Fensters erreicht hat und darauf reagieren (Die Schlange kommt am anderen Ende des Fensters wieder herraus)
• Additon und Subtraktion spielen eine wichtige Rolle
• Die Schlange muss sich auch ohne eine Eingabe vom Spieler in die eingeschlagene Richtung fortbewegen
• Der Kopf muss sich immmer in gleichgroßen Schritten bewegen (am besten seine eigene Größe)

Soblad ihr einen funktionierenden Ansatz für eine Richtung habt könnt ihr das Prinzip auf die anderen Richtungen übertragen.

Steuerung

Die Steuerung ist dagegen ehr Schreibkram, auch dafür ein paar Tipps:

• Variablen helfen bei der Differenzierung/Bestimmung der Richtungen
• Es muss irgendwie erkannt werden welche Taste gedrückt wurde und die jeweilige Taste mit der dazugehörigen Bewegungsfunktion verknüpft werden(Ich hab die Pfeiltasten genommen)
• Du musst eine Pause einsetzen, da ansonsten der Kopf einfach so durchrast und gar nicht mehr erkannt werden kann o0 (aber bitte kein Sleep abgesehn von Tests, Timer und Do...Until... ftw. Überlegt was der Vorteil dieser Schreibweise ist und nutzt ihn intelligent aus)
• Es geht nur um den Kopf!
• Überlegt 2mal ob die Positionen an denen die Schlange am anderen Ende des Fenster wieder herauskommt auch richtig ist (ich hatte nen recht dummen Fehler, der darauf beruhte, dass ich nicht ordentlich über den richtigen Einsetzpunkt nachgedacht hab Folge war, dass die Schlange nach durchschreiten des Fensterrandes ein Bewegungschschritt zuspät wieder am anderen Ende erschien^^300-10=290)

Solltet ihr etwas nicht verstanden haben oder euch ein Tipp gefehlt hat zögert nicht mir eine PM zu schicken oder hier im Thread zu fragen.
Es ist nicht unbedingt leicht abzuschätzen welche Fragen jmnd. hat der das Programm noch nicht geschrieben hat

Futter erstellen und Fressen

Futterkörner an einer zufälligen Position erstellen

Dieser Teil beansprucht nicht viel Zeit aber hier spielen die Fenster und Körpermaße die größte Rolle

Worauf muss ich beim erstellen des Futterkorns achten?

• Das Futterkorn muss genauso groß sein wie der Kopf
• Das Futterkorn muss sich ein einem Raster befinden, so dass der Schlangenkopf sich genau auf die Position des Korn's bewegen kann (Die Größe des Bewegungschrittes des Kopfes, nen bisschen Multiplikation und "Random" sind hier von Bedeutung)

So sollte das Fenster danach aussehn:


Fressen

Das Fressen bedarf keiner weiter großen Tipps (es muss nur darauf geachtet werden, dass dem Körper-Array ein neues Teil hinzugefügt wird)
Auf den Rest sollte man leicht selber kommen

Die Grafik für das Korn findet ihr im Anhang bei den ResourceDaten.

Körpermangement

Das folgen des Körpers

Jetzt kommt der wohl anspruchsvollste Teil (zumindest hab ich ihn so empfunden, vllt. ist es aber mit den Tipps leichter )

Es geht wie die Überschrifft schon sagt um die Bewegung des restlichen Körpers, Ziel ist es, dass der Körper dem Kopf folgt.

Hier die Tipps:

• Der Kopf bleibt unbeeinflusst von dieser Funktion, seine Position spielt aber eine Rolle
• Die Funktion wird am besten direkt nach der Bewegung des Kopfes ausgeführt
• Man brauch die alte Position des Kopfes bevor er weiterbewegt wurde.
• Das Körpersegment x nimmt die Position des Segments x-1 an nachdem x-1 die alte Position von x-1-1 angenommen hat usw.; DIE SEGMENTE BEFINDEN SICH IN EINEM ARRAY *hust* (Brainfuck o0 )

Game Over

Irgendwann kommt der traurige Zeitpunkt wo das Spiel vorbei ist
Die Funktion dafür stellt nach den anderen Dingen die ihr bis jetzt gemacht habt keine Schwierigkeit mehr dar.
Alles was ihr jetzt noch braucht ist eine ForSchleife und den KörperArray.
Das Programm soll überprüfen ob sich der Kopf auf der Position eines der Körpersegmente befindet.
Falls Ja soll sich Snake schließen ansonsten soll es einfach normal weiterlaufen.

Die beiden Aufgaben können am besten in einer Funktion zusammengefasst werden

-Codebeispiele-

Nur dann benutzen, wenn ihr absolut verzweifelt seid und es selber nicht auf die Reihe bekommt!

 Spoiler

Ihr werdet bei genauer Betrachtung sehn, dass ich bereits einige Funktionen eingebaut habe, die das Programm flüssiger laufen lassen oder kleine Bugs ausmerzen.
Ihr braucht euch dafür allerdings nicht diese Beispiele durchzulesen, falls ihr euch dafür interessiert könnt ihr euch den 2. Teil des Workshops ansehn

Achtung: Ich nehme euch auch hier nicht die gesamte Denkarbeit ab! :P

1.0 Grundgerüst

 Spoiler

Wann brauche ich welche Funktion?

PHP Code:

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#include <Misc.au3>
#include <Array.au3>

#Region ### START Koda GUI section ### Form=
$Form1 = GUICreate("Snake", 300, 300, 190, 123)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###

Global $dir, $body, $oldPos

$dir = 0


Dim $body[3]
$body[0] = GUICtrlCreatePic("Head.bmp", 20, 0, 10, 10, BitOR($SS_NOTIFY, $WS_GROUP, $WS_CLIPSIBLINGS))
$body[1] = GUICtrlCreatePic("Snake.bmp", 10, 0, 10, 10)
$body[2] = GUICtrlCreatePic("Snake.bmp", 0, 0, 10, 10) 


2.1 Bewegung

 Spoiler

Zuständig für die vertikale Bewegung nach Rechts, die Funktionen für die anderen Bewegungsrichtung können davon leicht abgeleitet werden.

PHP Code:

Func _moveRight()

    Local $aNewPOS
    Global $aFormerPOS

    Dim $aFormerPOS = ControlGetPos("Snake", "", $body[0])

    $aNewPOS = $aFormerPOS[0] + 10
    If $aNewPOS > 299 Then
        GUICtrlSetPos($body[0], 0, $aFormerPOS[1])
    Else
        GUICtrlSetPos($body[0], $aNewPOS, $aFormerPOS[1])
    EndIf
    _SnakeManage() ;allgemeine Funktion zum Körpermanagement
EndFunc   ;==>_moveRight 


2.2 Steuerung

 Spoiler

PHP Code:


While 1

If GUIGetMsg () = $GUI_EVENT_CLOSE Then Exit

    $dll = DllOpen("user32.dll")
    Switch $dir

        Case 0
            _moveRight() ;Funktion zur Bewegung nach Rechts, bei mir _moveRight

            If _IsPressed("26", $dll) Then $dir = 1
            If _IsPressed("28", $dll) Then $dir = 3

        Case 1
            _moveUp() ;Funktion zur Bewegung nach Oben, bei mir _moveUp

            If _IsPressed("25", $dll) Then $dir = 2
            If _IsPressed("27", $dll) Then $dir = 0

        Case 2
            _moveLeft() ;Funktion zum Bewegen nach Links, bei mir _moveLeft

            If _IsPressed("26", $dll) Then $dir = 1
            If _IsPressed("28", $dll) Then $dir = 3

        Case 3
            _moveDown ;Funktion zum Bewegen nach Unten, bei mir _moveDown

            If _IsPressed("25", $dll) Then $dir = 2
            If _IsPressed("27", $dll) Then $dir = 0

    EndSwitch

    $time = TimerInit()
    Do
        Switch $dir

            Case 0

                If _IsPressed("26", $dll) Then $dir = 1
                If _IsPressed("28", $dll) Then $dir = 3

            Case 1

                If _IsPressed("25", $dll) Then $dir = 2
                If _IsPressed("27", $dll) Then $dir = 0

            Case 2

                If _IsPressed("26", $dll) Then $dir = 1
                If _IsPressed("28", $dll) Then $dir = 3

            Case 3

                If _IsPressed("25", $dll) Then $dir = 2
                If _IsPressed("27", $dll) Then $dir = 0

        EndSwitch

If GUIGetMsg () = $GUI_EVENT_CLOSE Then Exit

    Until TimerDiff($time) >= 200
    DllClose($dll)
WEnd 


3.1 Futter erstellen

 Spoiler

Diese Funktion muss immer gecalled werden, wenn ein Futterkorn nicht existiert.

PHP Code:

Func _createFood()

    Global $xFood, $yFood

        $xFood = 10 * Random(2, 29, 1)
        $yFood = 10 * Random(2, 29, 1)

        For $m = 0 To UBound($body) - 1
            Dim $aCheckFood = ControlGetPos("Snake", "", $body[$m])

            If $xFood = $aCheckFood[0] Or $yFood = $aCheckFood[1] Then
                $xFood = 10 * Random(2, 29, 1)
                $yFood = 10 * Random(2, 29, 1)
                $m = 0
            EndIf
        Next

    Global $Food = GUICtrlCreatePic("food.bmp", $xFood, $yFood, 10, 10, BitOR($SS_NOTIFY, $WS_GROUP, $WS_CLIPSIBLINGS))

EndFunc   ;==>_createFood 


3.2 Fressen

 Spoiler

Muss nach der Bewegung des Kopfes ausgeführt werden, sonst könnte es passieren, dass man das Futterkorn einfach überläuft

PHP Code:

Func _eat()
    Local $posHead = ControlGetPos("Snake", "", $body[0])

    If $posHead[0] = $xFood And $posHead[1] = $yFood Then

        Local $new = GUICtrlCreatePic("Snake.bmp", 0, 0, 10, 10)
        _ArrayAdd($body, $new)
        GUICtrlDelete($Food)
        _createFood()
    EndIf
EndFunc   ;==>_eat 


4.0 Bodymanager

 Spoiler

Diese Funktion muss nach der Bewegung des Kopfes ausgeführt werden, sie benötigt allerdings die alte Position des Kopfes.

PHP Code:

Func _SnakeManage()
    For $i = 1 To UBound($body) - 1

        If $i = 1 Then
            Dim $toSetPos[2]
            $toSetPos[0] = $aFormerPOS[0]
            $toSetPos[1] = $aFormerPOS[1]

            Dim $toSetPos2 = ControlGetPos("Snake", "", $body[$i])
        Else
            Dim $toSetPos = $toSetPos2
            Dim $toSetPos2 = ControlGetPos("Snake", "", $body[$i])
        EndIf

        GUICtrlSetPos($body[$i], $toSetPos[0], $toSetPos[1])
    Next

    Local $headPos, $bodyPartsPos

    Dim $headPos = ControlGetPos("Snake", "", $body[0])
    For $j = 1 To UBound($body) - 1

        Dim $bodyPartsPos = ControlGetPos("Snake", "", $body[$j])
        If $bodyPartsPos[0] = $headPos[0] And $bodyPartsPos[1] = $headPos[1] Then
            MsgBox(0, "Snake", "Du hast mit " & UBound ( $body )-3 & " Punkten verloren!")
            Beep()
            Exit


        EndIf
    Next
EndFunc   ;==>_SnakeManage 


[.nAno]

Wie die Überschrifft schon sagt geht es hier um die Weiterentwicklung von Snake.

Was soll ich darunter verstehn?
Bis jetzt sind wir allein auf die Grundfunktionen eingegangen und haben ein so grade lauffähiges Spiel entwickelt, dass ist an sich schonmal einiges Wert, normalerweise wird aber mehr erwartet.
In diesem Abschnitt werde ich euch wieder Denkanstöße oder Ideen geben um letzte Unannehmlichkeiten auszuschalten

Entwicklungsansätze

Futter: Position Scanner und Mapping

Wer bereits ein bisschen rumgespielt hat, dem dürfte aufgefallen sein, dass sich zeitweise ein neues Futterkorn unter einem Körperteil der Schlange befindet. Das kann man als mehr oder weniger schlimm ansehn,mich hats genervt, also hab ichs geändert

Wie mache ich das?
Jedem sollte bis jetzt aufgefallen sein, dass ich nicht unbedingt gerne Codebeispiele rausgebe. Das wird sich hier nicht ändern, aber die Arbeit fällt leicht, da ihr etwas ähnliches schon machen musstet, trotzdem noch einige Tipps:

• Stichwort: KörperArray
• Stichwort: For-Schleife
• Die Anwendung muss sich wiederholen bis alles so läuft wie es soll, eine Schleife reicht also nicht (...bei einer übersichtilichen Lösung).
• Wer's jetzt noch nicht weiss hat ein verdammt mieses Kurzzeitgedächtniss

Wenn man nun spielt ist auf den ersten Blick alles Top, das Korn ist da wo es sein soll und die Funktion läuft unauffällig im Hintergrund ab - Anfangs.
Bei steigender Punktzahl (--> größere Länge der Schlange -->einem größeren Array) friert sich das Programm ein.
Grund dafür ist die soeben erschaffene Funktion: Bei immer größerer Länge steigt die Wahrscheinlichkeit, dass die zufällig bestimmte Position immer öfter unter der Schlange liegt und die Funktion sich unzählige male wiederholt.
Abhilfe schafft hier ein sog. "Mapping", Ziel ist es ein Abbild des Spielfeldes zu erstellen das wir in einem Array speichern. Worauf muss ich achten?

• Der Array muss 2 dimensional sein
• Die Funktion orientiert sich anhand des Rasters für Futter und Kopf
• auch hier ist der KörperArray von Bedeutung
• Die Funktion füllt die entsprechende Stelle im Array mit "True" (Feld nicht belegt) oder "False" (Feld belegt)

Beispiel:
Das Feld in Reihe 1, Spalte 10 (--> $array[1][10] ) soll überprüft werden
ob sich dort ein Objekt befindet oder eben nicht.
Im KörperArray befinden sich alle aktuellen Objekte, daher nehmen wir im Normalfall ihn
Später muss dann ein Fach im Array gewählt werden ab dem geschaut werden soll ob sich ein Objekt an der zugehörigen Stelle befindet, falls ja "Prüfe nächstes Feld", falls Nein "positioniere Korn".
So wird immer, falls es überhaupt eine freie Position gibt, eine Stelle gefunden

Flinkes Futter

Im original Spiel gibt es nicht nur das einfach Futter das sich einfach fressen lässt, sondern auch diese krabelnden Spinnen, etc.
Auch die lassen sich ganz leicht mit uns einer bekannte Funktion erstellen:

• bekannte Funktionen mit gewünschter Funktionalität können gut übertragen werden
• eigene Extrafunktion die das Verhalten des FutterTieres steuert könnte nen bisschen Arbeit spraren (Bewegung, Gefressen werden, etc.)

Ihr werdet dazu keine Grafiken in meinen Anhängen finden, geschwigeden überhaupt die Funktionen, da ich sie noch nicht eingebaut habe, sowie einige andere Methoden die ich hier vorstellen werden.
Es sollte aber auch nicht schwer sein selber etwas derartiges zu erstellen (ich hab Gimp benutzt, damit ich auch durchsichtige Aussparungen wie z.B beim Futterkorn machen konnte)

Weitere Ideen:
Da die Möglichkeiten, die man hat, recht vielfälltig sind kann ich leider nicht alles ordentlich ausführen, deshalb geb ich euch hier mal eine Liste mit Idee die ich selber noch habe oder schon bei meiner persönlichen Version angewandt hab

• zusätzliche GUI, Levelauswahl, etc.
• online Highscore via FTP.au3
• Maussteuerung
• Dynamischer Kopf (bessere Kopfgrafiken für alle 4 Richtungen, Kopf guckt in die grade eingeschlagene Richtung)
• Steuerung verfeinern (ist teilweise noch etwas hackelig bei mir gewesen)

Falls ich noch andere Ideen habe Liste ich sie hier auf, wenn ihr etwas als zu kompliziert empfindet werde ich mir das mal ansehn und das Thema vllt. doch noch ein bisschen erklären.

Schlusswort

So, dass war's mit meinem Workshop, ich hoffe ihr hattet Spaß bei der Entwicklung.
Tut mir Leid, wenn ich es euch nicht immer leicht gemacht habe, aber sonst hätte es keinen Sinn gemacht
Ich freu mich also nachwievor über eure Lösungen oder Programme (ob es jetzt C++, Delphi oder AutoIT, etc. ist, ist mir egal^^)
Bis dahin .nAno

[HardCore.1337]

Ich bin echt begeistert was du hier großartiges hingeschrieben hast.
Denn obwohl du kein einziges Codestück vorgibst, kommt man relativ gut (bedingt durch die Tipps) zurecht.
Meiner Meinung nach sollten in Zukunft noch mehr solche Tutorials/Workshops geschrieben werden, da sie gerade an dem Beispiel zeigen, das man damit einen bis zu 100% höheren Lernerfolg hat.

Großen Respekt an die Arbeit wie du es erklärt hast.

€: Das Programm Snake ist auch gut, auch wenn ich´s nun schon sehr lange von dir kenne

[Loveskill]

39 Punkte habe ich nur erreicht xP
aber naja istsehr gut wie ich finde dein THX kriegste auch :P

[Frezee]

Der Workshop ist echt gut geworden.
Meiner Meinung nach gehört der hier auch nicht in die AutoIT Section, sondern in die allgemeine coder-section.
Warum?
Der Workshop benutzt nämlich keine speziellen Befehle, sondern die Tipps sind eigentlich für jede Programmiersprache übertragbar.

Ich versuch mal das ganze in C++ nachzubauen, mal schauen was dabei rauskommt. =D

btw. hast du gerade mein 1.000tes thx bekommen ;O

[HardCore.1337]

Ich versuch mal das ganze in C++ nachzubauen, mal schauen was dabei rauskommt. =D

Sehr gute Idee. Ich mach mich auch mal dran

[.nAno]

Danke an alle für das Feedback bis jetzt

@Freeze
Das Dumme ist, dass ich nacher noch im unteren Teil in nem Spoiler "Notfall" Codesequenzen einbaue, falls man mal wirklich nen Hänger hat.
Da ich in C++ noch lange nicht soweit bin werden die wohl in AutoIT sein

Aber ich bin mal gespannt was bei dir draus wird und danke :P

[Artimes Fowl]

Sehr gutes Tut! Könnte man das auch in 3D machen ?

[HardCore.1337]

In AutoIt eher schwer (3D funktioniert zwar, allerdings ist die Geschwindigkeit sehr sehr träge)

[Wellard]

Thanks

[.nAno]

Danke für euer Feedback

Ich hab jetzt erstmal die Codebeispiele eingefügt und schonmal einen Weiterentwicklungsvorschlag

[Masterakio1995]

Sehr schönen tutorial

[.nAno]

Danke

Ich finde es nur schade, dass sich anscheinend niemand bisher ernsthaft mit der Anleitung auseinandergesetzt hat
Es wurde mehr als doppelt so oft der komplette SourceCode und nicht das ResourceKit geladen.
Ich werde natürlich weiter Ideen für die Weiterentwicklung sammeln und die Arbeit fortsetzen, obwohl sich mir langsam der Eindruck aufzwingt, dass das Interesse doch nicht so groß ist wie vorher behauptet...

[Shadow992]

Originally Posted by .nAno

Danke

Ich finde es nur schade, dass sich anscheinend niemand bisher ernsthaft mit der Anleitung auseinandergesetzt hat
Es wurde mehr als doppelt so oft der komplette SourceCode und nicht das ResourceKit geladen.
Ich werde natürlich weiter Ideen für die Weiterentwicklung sammeln und die Arbeit fortsetzen, obwohl sich mir langsam der Eindruck aufzwingt, dass das Interesse doch nicht so groß ist wie vorher behauptet...

Wie bereits gesagt , Sourcecode hätte vollkommen gereicht
Aber naja trotzdem sehr schön geworden .

[.nAno]

deshalb hab ich mich ja dazu entschieden nen Workshop daraus zu machen
Mein fertiges Programm dient dabei letztenedes nur als Leitfaden für mich um die Tipps, etc. zu schreiben