Aus Das deutschsprachige Scratch-Wiki

Tools.png Dieser Artikel soll in Kürze überarbeitet werden oder wird bereits überarbeitet.
Status: ausstehend

Grund: unkonventionell und unfertig

Grüße von dem Schaf, dem das Blöken zu eigen ist 17:16, 11. Sep. 2012 (CEST)



Sämtliche Skripte und Grafiken aus der Anleitung stehen euch natürlich frei zur Verfügung! Fragen könnt ihr hier stellen, wenn ihr auf Scratch.mit.edu registriert seit.

Allgemein



Schau' dir dieses Projekt auf der Scratch-Webseite an...


(Grüne Flagge drücken und dann die Space-Taste zum Starten!


In diesem Tutorial lernst du Schritt für Schritt, wie du dieses einfaches Snake-Spiel programmierst, bei dem man zufällig generierte Pellets einsammelt und durch den Rand auf die andere Seite kommen kann.

Bestimmt denkst du jetzt, dass man dafür tausende Objekte und viele komplizierte Skripte braucht.

Falsch! Snake besteht aus 4 Objekten und 5 Skripten, dazu kommen 2 Variablen und 4 (bzw. 2) Listen.

Das Tutorial

Die Bühne

Wenn du deinen Hintergrund nicht selbst malen willst, benutze ruhig diesen hier. Auch wenn die bunten Wände auf den ersten Blick unscheinbar aussehen, sind ihre Farben und ihre Anordnung für das Spiel extrem wichtig!

Farben

Die Farben sind später von Bedeutung, wenn die Schlange aus dem Bild raus und auf der anderen Seite wieder reinläuft.

Raster

Die Schlange bewegt sich nicht frei über den Bildschirm, sondern läuft über einen Raster, wie man ihn auch aus Spielen wie Pokémon kennt. Man stellt ihn sich am besten wie ein kariertes Blatt Papier vor, bei dem jedes Karo 25 mal 25 Pixel breit ist. Quadratische Maße zu wählen ist Optimal!

Snake-Screenshot.png


Die Pellets

Alle möglichen x- und y-Positionen für das Pellet, gespeichert in den Listen xPellet und yPellet. Erinnert ihr euch noch an die quadratischen Maße, 25x25? Die Positionen für die Pellets liegen auch jeweils 25 Pixel auseinander!

Zuerst programmieren wir die Pellets, welche die Schlange einsammelt um größer zu werden. Dazu benötigen wir nur ein Objekt, das immer wieder an einer zufälligen, neuen Stelle auftaucht, wenn es den Schlangekopf berührt. Wie die Schlange selber, muss das Pellet sich natürlich nach dem Raster richten! Dies könnte man mit einer komplizierten Formel bewältigen ... einfacher ist es aber, mit Listen zu arbeiten!

Der Raster ist 13 "Kästchen" breit und 12 "Kästchen" lang. Die Mittelpunkte dieser "Kästchen" (dort soll das Pellet ja landen) haben eine x- und eine y-Position. Es gibt also 13 x-Positionen und 12 y-Positionen (mehr dazu unter Koordinatensystem). Wie die konkreten Zahlen ermittelt werden können, dazu kommen wir später. Vorerst kannst du dir die fertigen Werte anschauen, die schon in 2 Listen (eine für die x- und eine für die y-Positionen) eingegeben sind.

Wir müssen eine zufällige Koordinate (also ein Kästchen, in dem das Pellet landet) generieren. Außerdem darf das Pellet nicht auf der Schlange landen!

Wie machen wir das? Am Anfang macht das Pellet sich unsichtbar. Die Befehle die dannach kommen, werden in einer endlosen Wiederholung ausgeführt. Das Pellet geht zu x = ein zufälliges Element aus xPellet und y = ein zufälliges Element aus yPellet. Das tut es in einer Wiederholung so lange, bis es nicht die Schlangekopffarbe und nicht die Schlangenkörperfarbe berührt. Das Pellet soll ja auf einem freien Feld landen! Jetzt macht es sich sichtbar, und wartet, bis der Schlangekopf berührt wird. Dann macht es sich unsichtbar, und sucht eine neue freie Stelle. Fertig!

PelletScript.gif

Die Schlange

Die Schlange besteht aus drei Objekten: Dem Schlangenkopf, dem Schlangenkörper und dem Schlangenschwanz. Der Schlangenkopf wird den Pfeiltasten gesteuert, daher brauchen wir das folgende Script, um die Richtung der Schlange zu verändern:

SchlangeScript1.gif

Startsignal für den Kopf ist das Leerzeichen, damit wird das Spiel begonnen. Dannach wird fortlaufend beprüft, ob eine Pfeiltaste gedrückt wird. Die Richtung des Kopfes wird entsprechend verändert.

Das zweite Skript für den Kopf ist etwas komplizierter ... bevor du es verstehst, musst du wissen, wie die Bewegung der Schlange funktioniert. Schließlich sind auf dem Bild mehr Körperteile zu sehen als eins, aber wir haben nur ein Körperobjekt. Warum?

Der Schlangenkopf speichert nach jedem Schritt auf dem Raster seine Koordinaten in zwei Listen ab: xPos und yPos (Position). Der Körper folgt nämlich dem Kopf und geht immer dahin, wo der Kopf vorher war. Dort hinterlässt er einen Abdruck. Der Schlangenschwanz ist ein vollkommen weißes Viereck. Er geht dorthin, wo der Körper vor einem Zug war (also wo der Kopf vor zwei Zügen war) und hinterlässt auch einen Abdruck. Da der Abdruck die selbe Farbe hat wie der hintergrund, wischt er den Körperabdruck einfach weg. In der selben Zeit, hat der Körper schon wieder einen neuen Abdruck hinterlassen. Die Schlange ist also ein Körperteil lang. Wäre die Schlange fünf Körperteile lang, dann würde der Schwanz das sechste Körperteil immer wegwischen. Gleichzeitig würde der Körper einen neuen Abdruck schaffen.

Um besser zu verstehen, wie alles funktioniert, besuche das fertige Spiel auf Scratch.mit.edu. Spiele, bis die Schlange länger als 10 ist und drücke a. Der Schwanz wird sich grau färben. So siehst du genau, wie er die Körperteile wegwischt. Außerdem wird der Körper die Abdrücke immer in einer neuen Farbe hinterlassen. Suche dir eine Farbe aus und konzentriere dich darauf. Die Farbe bewegt sich nicht, weil es nur ein Abdruck vom Körper ist! Irgendwann wischt der Schwanz sie weg.

Hast du es dir angesehen? Gut, dann gehen wir jetzt zum zweiten Skript des Schlangenkopfes über! Vergiss nicht, dass du dafür die Listen xPos und yPos brauchst!

SnakeSchlangeScript2+Erklärung.png

Bestimmt fragst du dich mittlerweile, wofür man diese ganzen komplizieten Listen und Variablen (xPos, yPos, Zähler und Länge) genau braucht, bis jetzt sieht es ja so aus als würde die Schlange sich auch ohne bewegen! Tut sie auch, aber der Körper und der Schwanz müssen wissen, wo sie als nächstes hinzugehen haben und das funktioniert wie folgt ...

Der Schlangenkörper


Code zum Einbinden ins Forum:
[wiki=de:Snake]Snake[/wiki]