Snake

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...

Zum starten grüne Flagge anklicken

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 2 (bis 3) Objekten und 4 (bis 6) Skripten. Wenn du es einfach halten willst, kannst du einfach die Version mit 2 Objekten und 4 Skripten machen. Wenn du auch noch eine Punkteanzeige machen willst, die zum Rest des Hintergrundes passt, kannst du auch die Version mit einem Objekt und 2 Skripten mehr machen.

Das Tutorial

Die Bühne

Wenn du deinen Hintergrund (oder auch die anderen Bilder) nicht selbst malen willst, kannst du diese hier nehmen: Alle verwendeten Grafiken:

Hintergrundbild
Schlangenkopf
Schlangenkörper
Futter
Zahl 0
Zahl 1
Zahl 2
Zahl 3
Zahl 4
Zahl 5
Zahl 6
Zahl 7
Zahl 8
Zahl 9

Raster

Die Schlange bewegt sich nicht frei über den Bildschirm, sondern läuft über ein Raster, wie man es auch aus Spielen wie Pokémon kennt. Man stellt es sich am besten wie ein kariertes Blatt Papier vor, bei dem jedes Kästchen 25 mal 25 Pixel breit ist. Quadratische Maße sind Voraussetzung dafür, dass die Schlange sich später nicht aus versehen fressen kann, wenn sie knapp an ihrem Körper vorbeigelaufen ist.

Für mehr Übersichtlichkeit kannst du die Extremwerte der Positionen (kleinstes X, größtes X, kleinstes Y und größtes Y) in Variablen speichern. Hier sind die Maximalwerte, die ich für mein Spielfeld verwendet habe:

setze [max X v] auf (98)
setze [min X v] auf (-227)
setze [max Y v] auf (167)
setze [min Y v] auf (-158)

Die Pellets

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 der mathematischen Formel zum runden und dem Block für Zufallszahlen erreichen.

Mathematisch runden

Aber wie soll ich denn jetzt eine zufällige Position auf 25 Pixel runden?? Das ist gar nicht so schwer. Als erstes teilst du die Position durch durch 25 (((Zufallszahl von (-200) bis (200)) / (25))). So kommt alles was du eventuell loswerden willst nämlich hinter das Komma in der Zahl. Das Ergebnis kannst du ganz normal mit dem () gerundet Block runden um das loszuwerden. Weil du aber vorher durch 25 geteilt hast und so ein falsches Ergebnis bekommen würdest, musst du das ganze noch einmal mit 25 multiplizieren, um auf das Endergebnis zu kommen. Diese Formel sieht in Scratch so aus:

((((Zufallszahl von (-200) bis (200)) / (25)) gerundet) * (25))

Pellets programmieren

In diese Formel setzt du die minimal- und maximalwerte für das Spielfeld ein und benutzt sie in einer wiederhole fortlaufend-schleife, um es immer an einer zufälligen Stelle auftauchen zu lassen. Aber dass es nicht die ganze Zeit hin und herspringt und man es mit der Schlange nicht fressen kann, solltest du noch einen warte bis <wird schlange berührt> block dazwischen benutzen. Außerdem musst du bei jeder Berührung die Länger der Schlange um 1 erhöhen, dass sie auch größer werden kann.

Wenn die grüne flagge angeklickt
wiederhole fortlaufend
  gehe zu x: ((((Zufallszahl von (min X) bis (max X)) / (25)) gerundet) * (25)) y: ((((Zufallszahl von (min Y) bis (max Y)) / (25)) gerundet) * (25))
  warte bis <wird (Snake v) berührt?>
  ändere [länge v] um (1)
end

Die Schlange

Die Schlange ist ein Objekt mit zwei Kostümen. Das eine ist der Schlangenkopf und das andere der Schlangenkörper. Der Schlangenkörper sollte eine leicht andere Farbe haben als der Kopf, dass es später einfacher wird, festzustellen, ob die Schlange sich selbst gebissen hat.
Für die Schlange benutzen wir drei Variablen:

setze [länge v] auf (2) // für alle Figuren
setze [schritte v] auf (0) // Für alle Figuren
setze [schritte lebendig v] auf (0) // Nur für diese Figur

Beim erstellen der Variable (schritte lebendig::variables) musst du darauf achten, dass sie nur für diese Figur erstellt wird. Das ist wichtig, da der Schlangenkopf später geklont wird und diese Variable auch kopiert werden muss (dass jedes Teil der Schlange eine eigene Lebenszeit hat).

Schlangenkopf programmieren

Wenn das Spiel startet, soll die Schlange an einer zufällige Position auf dem Raster auftauchen. Dafür kannst du dir einfach den Anfang des Skriptes von den Pellets kopieren (der Teil mit gehe zu X: () Y: ()). Außerdem soll am Anfang alles auf die Standardwerte gesetzt werden, also die länge auf 2, die gelaufenen Schritte (die Variable) auf 0 und das Kostüm soll de Kopf sein.

Wenn die grüne flagge angeklickt
gehe zu x: ((((Zufallszahl von (min X) bis (max X)) / (25)) gerundet) * (25)) y: ((((Zufallszahl von (min Y) bis (max Y)) / (25)) gerundet) * (25))
wechsle zu Kostüm (Kopf v)
setze [länge v] auf (2)
setze [schritte v] auf (0)
wiederhole fortlaufend
  ...// das Skript zum laufen
end

In der Wiederhole fortlaufend-Schleife wird später noch das Skript ergänzt, welches die Schlange laufen lässt. Dass sie aber auch die Richtung ändern kann, benutzt du dieses simple Skript, dass einfach guckt, welche Taste gedrückt wird und die Richtung der Schlange entsprechend einstellt.

Wenn die grüne flagge angeklickt
wiederhole fortlaufend
  falls <Taste (Pfeil nach oben v) gedrückt?>, dann
    setze Richtung auf (0) Grad::motion
  end
  falls <Taste (Pfeil nach unten v) gedrückt?>, dann
    setze Richtung auf (180) Grad::motion
  end
  falls <Taste (Pfeil nach rechts v) gedrückt?>, dann
    setze Richtung auf (90) Grad::motion
  end
  falls <Taste (Pfeil nach links v) gedrückt?>, dann
    setze Richtung auf (-90) Grad::motion
  end
end

Schlangenkörper programmieren

Der Schlangenkörper hängt sehr mit de Bewegung des Schlangenkopfes zusammen, was der Grund dafür ist, dass ich es hier beides zusammen versuche zu erklären. Der erste Schritt der Bewegung ist, dass der Schlangenkopf 25px geradeaus läuft. Das wird mit dem Block gehe (25) er-Schritt::motion erreicht. Direkt dannach muss überprüft werden, ob die Schlange aus dem Spielfeld herausgelaufen ist, dass sie auf der anderen Seite wieder auftauchen kann. Das macht man mit vier falls <> dann Konstrukten, die jeweils die Position überprüfen:

...
gehe (25)er Schritt::motion
falls <(x-Position::motion) < (min X)>, dann // Schlange ist links aus dem Feld gelaufen
  setze x auf (max X) // -> gehe ganz nach rechts
end
falls <(x-Position::motion) > (max X)>, dann // Schlange ist rechts aus dem Feld gelaufen
  setze x auf (min X) // -> gehe ganz nach links
end
falls <(y-Position::motion) < (min Y)>, dann // Schlange ist unten aus dem Feld gelaufen
  setze y auf (max Y) // -> gehe ganz nach oben
end
falls <(y-Position::motion) > (max Y)>, dann // Schlange ist oben aus dem Feld gelaufen
  setze y auf (min Y) // -> gehe ganz nach unten
end
falls <Farbe (#000000) berührt (#1fcf22) ?>, dann // Falls die Farbe der Augen die Farbe des Körpers berührt
  sage [Du hast dich selbst gefressen]
  stoppe [dieses Skript v] // Bewegungsskript stoppen
end
ändere [schritte v] um (1) // Diese Variable zeigt an, bei welchen Schritt die Schlange gerade ist
...
warte (0.2) Sekunden::control // je kleiner, desto schneller läuft die Schlange

Das waren jetzt alles recht einfache Sachen, die nicht sehr schwer nachvollziehbar sein sollten. Für den Schlangenkörper wird es ein bisschen komplizierter. Nach jedem Schritt wird die Variable (schritte lebendig::variables) (eine Variable, die 'nur für dieses Objekt' erstellt wurde) auf die Länge der Schlange + die gelaufenen Schritte gesetzt: ((länge::variables) + (schritte::variables)) Das Ergebnis dieser Berechnung ist, wie viele Schritte lang das nächste Stück des Körpers leben wird. Wenn man den Schlangenkopf dann mit erzeuge Klon von (mir selbst v)::control kopiert wird auch die Variable kopiert und gilt dann für den erstellten Klon. Das Skript für den Klon wechselt einfach nur das Kostüm auf den Schlangenkörper, wartet, bis die Differenz zwischen schritte lebendig und schritte gleich 0 ist und wird dann gelöscht. Als Skript sieht das dann so aus:

Wenn ich als Klon entstehe
wechsle zu Kostüm [Körper v]
warte bis <((schritte lebendig) - (schritte)) = [0]>
lösche diesen Klon

Schlange: vollständiges Skript

Wenn du bis hier gekommen bist und alles verstanden hast, hast du schon ein funktionierendes Snake-Spiel programmiert :)
Die Variable länge kannst du sichtbar machen und auf dem Hintergrund unter den Text Punkte ziehen, wenn du jetzt schon genug hast. Wenn nicht, kannst du dir auch noch den nächsten Absatz durchlesen.
Hier sind noch einmal alle Skripte für die Schlange:

Wenn die grüne flagge angeklickt
setze [max X v] auf [98]
setze [min X v] auf [-227]
setze [max Y v] auf [167]
setze [min Y v] auf [-158]
gehe zu x: ((((Zufallszahl von (min X) bis (max X)) / (25)) gerundet) * (25)) y: ((((Zufallszahl von (min Y) bis (max Y)) / (25)) gerundet) * (25))
wechsle zu Kostüm (Kopf v)
setze [länge v] auf (2)
setze [schritte v] auf (0)
wiederhole fortlaufend
  gehe (25)er Schritt::motion
  falls <(x-Position::motion) < (min X)>, dann // Schlange ist links aus dem Feld gelaufen
    setze x auf (max X) // -> gehe ganz nach rechts
  end
  falls <(x-Position::motion) > (max X)>, dann // Schlange ist rechts aus dem Feld gelaufen
    setze x auf (min X) // -> gehe ganz nach links
  end
  falls <(y-Position::motion) < (min Y)>, dann // Schlange ist unten aus dem Feld gelaufen
    setze y auf (max Y) // -> gehe ganz nach oben
  end
  falls <(y-Position::motion) > (max Y)>, dann // Schlange ist oben aus dem Feld gelaufen
    setze y auf (min Y) // -> gehe ganz nach unten
  end
  falls <Farbe (#000000) berührt (#1fcf22) ?>, dann // Falls die Farbe der Augen die Farbe des Körpers berührt
    sage [Du hast dich selbst gefressen]
    stoppe [dieses Skript v] // Bewegungsskript stoppen
  end
  ändere [schritte v] um (1) // Diese Variable zeigt an, bei welchen Schritt die Schlange gerade ist
  setze [schritte lebendig v] auf ((länge) + (schritte))
  erzeuge Klon von [mir selbst v]::control
  warte (0.2) Sekunden::control // je kleiner, desto schneller läuft die Schlange
end

Wenn die grüne flagge angeklickt
wiederhole fortlaufend
  falls <Taste (Pfeil nach oben v) gedrückt?>, dann
    setze Richtung auf (0) Grad::motion
  end
  falls <Taste (Pfeil nach unten v) gedrückt?>, dann
    setze Richtung auf (180) Grad::motion
  end
  falls <Taste (Pfeil nach rechts v) gedrückt?>, dann
    setze Richtung auf (90) Grad::motion
  end
  falls <Taste (Pfeil nach links v) gedrückt?>, dann
    setze Richtung auf (-90) Grad::motion
  end
end

Wenn ich als Klon entstehe
wechsle zu Kostüm [Körper v]
warte bis <((schritte lebendig) - (schritte)) = [0]>
lösche diesen Klon

Punkteanzeige

Wenn dir die normale Variablenanzeige nicht gefällt oder du noch Lust hast, es noch ein bisschen besser zu machen, kannst du dir deine eigene Punkteanzeige basteln. Hier wie du damit vorgehst.

Vorbereitung

Für die Punkteanzeige erstellst du dir ein neues Objekt und nennst es beispielsweise 'Punkteanzeige'. Als Kostüme von diesem Objekt erstellst du die Zahlen von 0 bis 9. Die 0 sollte das 10. (letzte) Kostüm sein, da Scratch bei dem Block wechsle zu Kostüm [kostümname v] die Kostümnummer nimmt, falls man eine Zahl eingegeben hat.
Außerdem erstellst du noch eine Variable mit dem Namen ID, die auch 'Nur für diese Figur' ist.

Start-Skript

Wenn das Spiel gestartet wird, soll dieses Objekt 4 Dinge tun:

sich verstecken
zu der Stelle gehen, wo das erste Zeichen angezeigt wird
einen Klon hinterlassen
zu der Stelle gehen wo das zweite Zeichen angezeigt werden soll und 3. wiederholen

Vor dem erstellen eines Klones muss die ID gesetzt werden, dass die beiden Kopien nicht immer das gleiche tun.

Wenn die grüne flagge angeklickt
verstecke dich
gehe zu x: (165) y: (-50)
setze [ID v] auf [1]
erzeuge Klon von [mir selbst v]
ändere x um (15)
setze [ID v] auf [2]
erzeuge Klon von [mir selbst v]

Mit dieser Konstellation sollte das Objekt 'Punkteanzeige' immer versteckt sein und an der Stelle wo die Punkte (Schlangenlänge) angezeigt werden soll zwei Klone hinterlassen haben. Anhand der ID, die man den Klonen zugewiesen hat kann man sie jetzt getrennt programmieren, dass sie jeweils eine Ziffer anzeigen. Das sieht dann in etwa so aus:

Wenn ich als Klon entstehe
zeige dich
wiederhole fortlaufend
  falls <(ID) = [1]>, dann // Stelle 1
    ...
  end
  falls <(ID) = [2]>, dann // Stelle 2
    ...
  end
end

So kann man dem Klon mit ID 1 eine andere Funktion geben als dem Klon mit ID 2. Falls die länge der Schlange nur eine Stelle hat, kann man eine der beiden Stellen verstecken, und die Punktzahl nur auf der anderen anzeigen.

falls <(länge von(länge)) = [1]>, dann // Punkte einstellig
  verstecke dich // -> eine Ziffer verstecken
sonst // Punktzahl zweistellig
  zeige dich // -> Ziffer zeigen und Kostüm auf Zeichen 1 setzen
  wechsle zu Kostüm (Zeichen [1] von (länge)
end



falls <(länge von (länge)) = [1]>, dann // Punkte einstellig
  wechsle zu Kostüm (länge) // -> nur diese Ziffer ist sichtbar -> Kostüm = Punktzahl
sonst // Punktzahl zweistellig
  wechsle zu Kostüm (Zeichen [2] von (länge)) // -> Kostüm auf Zeichen 2 setzen
end

vollständiges Skript

Wenn die grüne flagge angeklickt
verstecke dich
gehe zu x: (165) y: (-50)
setze [ID v] auf [1]
erzeuge Klon von [mir selbst v]
ändere x um (15)
setze [ID v] auf [2]
erzeuge Klon von [mir selbst v]

Wenn ich als Klon entstehe
zeige dich
wiederhole fortlaufend
  falls <(ID) = [1]>, dann // Stelle 1
    falls <(länge von(länge)) = [1]>, dann // Punkte einstellig
      verstecke dich // -> eine Ziffer verstecken
    sonst // Punktzahl zweistellig
      zeige dich // -> Ziffer zeigen und Kostüm auf Zeichen 1 setzen
      wechsle zu Kostüm (Zeichen [1] von (länge)
    end
  end
  falls <(ID) = [2]>, dann // Stelle 2
    falls <(länge von (länge)) = [1]>, dann // Punkte einstellig
      wechsle zu Kostüm (länge) // -> nur diese Ziffer ist sichtbar -> Kostüm = Punktzahl
    sonst // Punktzahl zweistellig
      wechsle zu Kostüm (Zeichen [2] von (länge)) // -> Kostüm auf Zeichen 2 setzen
    end
  end
end

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

Navigation

Werkzeuge

Für Autoren

URL Tools

Helfe dem Wiki!