Advertisement
  1. Code
  2. Games

Erstellen eines klassischen Schlange-Spiels in AS3

by
Read Time:29 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial möchte ich Ihnen zeigen, wie einfach es ist, ein klassisches "Schlange"-Spiel in Flash zu erstellen. Ich werde versuchen, alles einfach und Schritt für Schritt zu erklären, damit Sie das Spiel an Ihre Bedürfnisse anpassen können! Das Spiel wird in AS3 entwickelt und ich werde die FlashDevelop IDE verwenden.


Einführung

Das Spiel wird nicht komplex sein. Immer wenn wir gegen eine Wand stoßen, wird das Spiel neu gestartet. Nach dem Verzehr eines Apfels wächst die Schlange und es erscheint ein 'neuer' Apfel. (Eigentlich wird es der gleiche Apfel sein, aber ich werde das später erklären.)

Einer der wichtigsten Aspekte des Spiels ist die Reaktion des Codes auf KEY_DOWN-Ereignisse. Die Schlange ändert erst dann ihre Richtung, nachdem ein Tick vergangen ist, nicht unmittelbar nach einem Tastendruck. Dies bedeutet, dass, wenn die Schlange nach rechts geht und Sie sehr schnell nach unten und links drücken, die Schlange nach unten geht, nicht nach unten UND nach links. Ohne dieses "Merkmal" würde die Schlange es uns ermöglichen, nach links zu gehen, während wir nach rechts gehen, was bedeuten würde, dass sie sich selbst trifft.


Schauen wir uns das Spiel schon an!

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden:


Schritt 1: Erstellen des Projekts

Erstellen Sie in FlashDevelop ein neues Projekt und erstellen Sie im Ordner 'src' einen Ordner 'com'. Erstellen Sie im Ordner 'com' eine neue Klasse und nennen Sie sie 'Element.as'.

Stellen Sie die Abmessungen des Projekts auf 600 x 600 Pixel ein.

The FlashDevelop project structure

Schritt 2: Warten Sie ... Was ist ein Element?

Die Schlange besteht aus blauen Quadraten, die ich Elemente nenne. Wir werden eine Elementklasse erstellen, die das Element zeichnet. Der rote Apfel wird auch ein Element sein, daher werden wir den Code um einige weitere Zeilen erweitern.

Deshalb werden wir keine neue Klasse für den Apfel erstellen. (Aber wenn Sie wirklich wollen, können Sie.)


Schritt 3: Schreiben der Elementklasse

Die Element-Klasse erstellt ein Quadrat. Es zeichnet es nicht auf die Bühne, es schafft es nur. Der Registrierungspunkt des Elements - die Position, auf die sich seine x- und y-Koordinaten beziehen - befindet sich oben links.

Nach dem Öffnen von Element.as sehen Sie ungefähr Folgendes:

Zuerst benötigen wir dies, um die Shape-Klasse zu erweitern, damit wir das graphics-Objekt zum Zeichnen des Quadrats verwenden können. Erstellen Sie anschließend zwei Variablen: eine für die Richtung (wenn sie Teil der Schlange ist) und eine für den Score-Wert (wenn es sich um einen Apfel handelt), und ändern Sie dann die Parameter der Konstruktorfunktion:

Füllen Sie nun die Funktion mit etwas Code:

Wenn wir jetzt ein Element erstellen, wird ein Rechteck gezeichnet und der Bewertungswert des Elements standardmäßig auf 0 gesetzt. (Das Rechteck wird nicht auf die Bühne gebracht, sondern nur in sich selbst gezeichnet. Beachten Sie, dass wir die Funktion addChild() nicht aufgerufen haben.)

Lassen Sie uns diesen Kurs beenden und dann können wir endlich testen, wie viel wir bereits getan haben:

Wir haben vier Funktionen erstellt, um die Richtung und den Wert des Apfels zu ändern. Dies haben wir mit Setzern und Gettern erreicht. Mehr über Setter/Getters in diesem Artikel!


Schritt 4: Testen der Elementklasse

Öffnen Sie Main.as jetzt.

Importieren Sie die Klasse com.Element und erstellen Sie ein Element in der Funktion init():

Zuerst erstellen wir die Variable testElement, die unser Element enthält. Wir erstellen ein neues Element und weisen es unserer testElement-Variablen zu. Beachten Sie die Argumente, die wir übergeben haben: Zuerst geben wir ihm eine Farbe, dann das Alpha, die Breite und die Höhe. Wenn Sie sich die Elementfunktion der Elementklasse ansehen, können Sie sehen, wie diese Daten zum Zeichnen des Rechtecks verwendet werden.

Nachdem wir das Element erstellt haben, positionieren wir es und stellen es auf die Bühne!


Schritt 5: Einrichten der Variablen

Schauen Sie sich den folgenden Code an. Ich habe die Funktionen der Variablen daneben geschrieben (beachten Sie, dass wir auch die erforderlichen Klassen importiert haben):

Die wichtigste Variable ist der snake_vector. Wir werden jedes Element der Schlange in diesen Vektor setzen.

Dann gibt es den marker_vector. Wir werden Markierungen verwenden, um die Richtung der Teile der Schlange festzulegen. Jedes Objekt in diesem Vektor hat eine Position und einen Typ. Der Typ sagt uns, ob die Schlange nach dem "Schlagen" des Objekts nach rechts, links, oben oder unten gehen soll. (Sie kollidieren nicht, nur die Position der Marker und der Teile der Schlange wird überprüft.)

Wenn wir beispielsweise DOWN drücken, wird ein Objekt erstellt. Das x und y dieses Objekts sind die x- und y-Koordinaten des Schlangenkopfes, und der Typ ist "Down". Immer wenn die Position eines der Elemente der Schlange mit der dieses Objekts übereinstimmt, wird die Richtung der Schlangenelemente auf "Unten" gesetzt.

Bitte lesen Sie die Kommentare neben den Variablen, um zu verstehen, was die anderen Variablen tun!


Schritt 6: Schreiben der Funktion attachElement()

Die Funktion attachElement() akzeptiert vier Parameter: das neue Schlangenelement, die x- und y-Koordinaten und die Richtung des letzten Teils der Schlange.

Bevor wir das Element auf die Bühne bringen, sollten wir es positionieren. Dazu benötigen wir jedoch die Richtung des letzten Elements der Schlange, um zu wissen, ob das neue Element darüber, darunter oder daneben stehen muss.

Nachdem wir die Richtung überprüft und die Position festgelegt haben, können wir sie der Bühne hinzufügen.

Jetzt können wir diese Funktion in der Funktion init() verwenden:

Wir erstellen die ersten 10 Elemente und setzen ihre Richtung auf 'R' (rechts). Wenn es das erste Element ist, rufen wir attachElement() auf und ändern sein Alpha ein wenig (so dass der "Kopf" eine etwas hellere Farbe hat).

Wenn Sie die Position woanders einstellen möchten, beachten Sie bitte Folgendes: Die Schlange muss auf ein Gitter gelegt werden, sonst würde sie schlecht aussehen und nicht funktionieren. Wenn Sie die x- und y-Position ändern möchten, können Sie dies folgendermaßen tun:

Festlegen der x-Position: (snake_vector[0].width+space_value)*[UINT], wobei Sie [UINT] durch eine positive Ganzzahl ersetzen sollten.

Festlegen der y-Position: (snake_vector[0].height+space_value)*[UINT], wobei Sie [UINT] durch eine positive Ganzzahl ersetzen sollten.

Lassen Sie es uns so ändern:

Und das erste Element der Schlange wird auf das 20. Feld im x-Gitter und das 10. Feld im y-Gitter gesetzt.

Das haben wir bisher:


Schritt 7: Schreiben der placeApple()-Funktion

Diese Funktion führt Folgendes aus:

  1. Es wird geprüft, ob der Apfel gefangen wurde. Dazu verwenden wir den caught-Parameter und setzen seinen Standardwert auf true, falls wir in Zukunft keinen Wert als Parameter übergeben. Wenn es gefangen wurde, addiert es 10 zum Punktewert des Apfels (der nächste Apfel ist also mehr wert).
  2. Danach muss der Apfel an einer zufälligen Gitterposition neu positioniert werden (wir erstellen keine neuen Äpfel).
  3. Wenn es auf die Schlange gelegt wird, sollten wir es woanders platzieren.
  4. Wenn es noch nicht auf der Bühne steht, platzieren wir es dort.

Hier wird es etwas Mathe geben, aber wenn Sie es durchdenken, sollten Sie verstehen, warum es so ist. Zeichnen Sie es bei Bedarf einfach auf Papier.

  • boundsX enthält, wie viele Elemente in einer Zeile gezeichnet werden können.
  • randomX nimmt diese boundsX, multipliziert sie mit einer Zahl zwischen null und eins und legt sie fest. Wenn boundsX 12 und die Zufallszahl 0,356 ist, ist floor(12*0,356) 4, sodass der Apfel auf dem 4. Platz im x-Gitter platziert wird.
  • boundsY gibt an, wie viele Elemente in einer Spalte gezeichnet werden können.
  • randomY nimmt diese boundsY, multipliziert sie mit einer Zahl zwischen null und eins und legt sie fest.
  • Dann setzen wir die x- und y-Position auf diese Zahlen.

In der for-Schleife prüfen wir, ob die neuen x- und y-Positionen des Apfels mit einem der snake_vectors-Elemente identisch sind. In diesem Fall rufen wir die Funktion placeApple() erneut auf (rekursive Funktion) und setzen den Parameter auf false. (Das heißt, der Apfel wurde nicht gefangen, wir müssen ihn nur neu positionieren)

(apple.stage) gibt true zurück, wenn sich der Apfel auf der Bühne befindet. wir nehmen das '!' Operator, um diesen Wert zu invertieren. Wenn er sich also NICHT auf der Bühne befindet, platzieren wir ihn dort.

Als letztes müssen wir die Funktion placeApple() am Ende der Funktion init() aufrufen.

Beachten Sie, dass wir als Parameter false übergeben. Es ist logisch, weil wir den Apfel in der init()-Funktion noch nicht gefangen haben. Wir werden es nur in der moveIt()-Funktion abfangen.

Jetzt müssen nur noch drei Funktionen geschrieben werden: die Funktionen directionChanged(), moveIt() und gameOver().


Schritt 8: Starten der moveIt()-Funktion

Die Funktion moveIt() ist für die gesamte Bewegung verantwortlich. Diese Funktion überprüft die Grenzen und prüft, ob sich ein Objekt an der x- und y-Position des Schlangenkopfes befindet. An dieser Stelle wird auch nach dem Apfel gesucht.

Für all dies werden wir unsere Timer-Variable verwenden.

Fügen Sie am Ende der Funktion init() zwei weitere Zeilen hinzu:

Sehen Sie sich die Kommentare im Quellcode an, um zu sehen, welcher Codeblock was tut.

Jetzt müssen wir die Bewegung codieren. Dazu springen wir in den Schalterblock, der wegen der for-Schleife auf jedem Schlangenteil läuft.

Zuerst müssen wir die Richtung des aktuellen Elements überprüfen.

Wenn die Richtung des Teils zum Beispiel auf "R" gesetzt ist, müssen wir seiner aktuellen X-Position etwas hinzufügen (den space_value plus die Breite des Schlangenteils).

In diesem Sinne können wir es ausfüllen:

Nach dem Testen des Codes sollten Sie sehen, dass sich die Schlange bewegt und die Bühne verlässt und niemals aufhört. (Möglicherweise müssen Sie die Seite aktualisieren - oder klicken Sie einfach hier, um sie in ein neues Fenster zu laden.)

Also müssen wir die Schlange aufhalten


Schritt 9: Schreiben der gameOver()-Funktion

Diese Funktion wird die kürzeste sein. Wir räumen einfach die Bühne und starten sie neu:

Das ist es. Wir setzen die dead-Variable auf true, stoppen die Bewegung mit dem Timer, entfernen jedes Kind der Klasse und rufen die Funktion init() auf, als hätten wir gerade das Spiel gestartet.

Kehren wir nun zur Funktion moveIt() zurück.


Schritt 10: Fortsetzung der Funktion moveIt()

Wir werden die gameOver()-Funktion an zwei Stellen verwenden. Das erste ist, wenn wir prüfen, ob der Kopf außerhalb der Grenzen liegt, und das zweite ist, wenn die Schlange sich selbst trifft:

Dies ist der Code, den wir jetzt haben:


Schritt 11: Die Funktion directionChanged()

Wir wollen auf die Tastatur hören, damit wir die Schlange tatsächlich steuern können. Dazu müssen wir Code in die Funktion init() und die Funktion gameOver() einfügen.

Setzen Sie dies am Ende der init()-Funktion (Einrichten der Listener-Funktion):

Und das am Ende der gameOver()-Funktion:

Erstellen Sie nun eine neue Funktion:

Was geht in den if-Block?

  • Die Richtung des Kopfes sollte neu geschrieben werden.
  • Das Markierungsobjekt muss korrekt gesetzt sein.
  • Die Variable last_button sollte auf die zuletzt gedrückte Taste gesetzt werden.

Wiederholen Sie dies noch dreimal, und wir werden dies haben:

Wir brauchen noch eine Sache, um es zu testen. In der moveIt()-Funktion haben wir ungefähr Folgendes:

Hier brauchen wir eine weitere for-Schleife, um den Teil jeder Schlange gegen jeden Marker auf der Bühne zu prüfen und zu prüfen, ob sie kollidieren. Wenn dies der Fall ist, müssen wir die Richtung des Schlangenteils auf den Markertyp einstellen. Wenn es der letzte Schlangenteil ist, der mit dem Marker kollidiert, müssen wir den Marker auch aus dem marker_vector entfernen, damit die Schlangenteile nicht mehr damit kollidieren.

Wenn Sie damit spielen, sieht es in Ordnung aus, aber es gibt einen Fehler. Erinnern Sie sich, was ich zu Beginn des Tutorials gesagt habe?

Wenn sich die Schlange beispielsweise nach rechts bewegt und Sie die Kombination unten links sehr schnell drücken, trifft sie sich selbst und startet das Spiel neu.

Wie korrigieren wir das? Nun, es ist einfach. Wir haben unsere flag-Variable, und wir werden diese dafür verwenden. Wir können die Richtungen der Schlange nur ändern, wenn dies auf true gesetzt ist (Standard ist false, überprüfen Sie die Funktion init() darauf).

Wir müssen also die directionChanged()-Funktion ein wenig ändern. Die Köpfe der if-Blöcke sollten geändert werden: Fügen Sie am Ende jedes 'if' eine && flag-Klausel hinzu.

Wenn Sie es jetzt testen, funktioniert es nicht, da das Flag immer falsch ist.

Wann müssen wir es dann auf true setzen?

Nach einer Bewegung/einem Häkchen können wir den Benutzern erlauben, die Richtung zu ändern. Wir möchten sie nur nicht zweimal in einem Häkchen ändern. Stellen Sie dies also ganz am Ende der Funktion moveIt() ein:

Testen Sie es jetzt und es gibt keinen Fehler mehr.


Schritt 12: Beenden Sie das Spiel

Jetzt müssen wir nur noch den 'Apple-Check' machen.

Denken Sie daran, ganz am Anfang der moveIt()-Funktion?

Das müssen wir dort tun:

  • Rufen Sie die Funktion placeApple() auf. (Wir setzen den Parameter nicht auf false; wir belassen ihn unverändert. Der Standardwert ist true.)
  • Zeigen Sie die aktuelle Punktzahl
  • Befestigen Sie ein neues Element am letzten Teil der Schlange.

Jetzt sollte alles gut funktionieren. Versuchen Sie es:

Hier ist wieder die ganze Hauptklasse:


Schritt 13: Alles zusammenfassen

Herzliche Glückwünsche! Sie haben gerade ein schönes Spiel erstellt. Jetzt können Sie es weiterentwickeln und einen Superapfel oder so etwas kreieren. Dafür empfehle ich die Verwendung einer anderen Funktion namens placeSuperApple() und einer neuen Klasse namens SuperApple. Immer wenn Sie einen Superapfel fangen, können sich die Schlangenteile möglicherweise um drei Elemente verlängern. Dies kann mit Setzern/Gettern in der SuperApple-Klasse festgelegt werden.

Wenn Sie dies tun möchten und irgendwo stecken bleiben, hinterlassen Sie mir hier einen Kommentar.

Vielen Dank für Ihre Zeit!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.