🐍 Racket-Kurs: Vom Anfänger zum Snake-Spiel

Modul 1: Was ist Programmieren?

⏱️ Dauer: 10 Minuten

1.1 Der Computer als Koch

🍳 Der Computer versteht nur genaue Anweisungen

Das ist Programmieren: Dem Computer genaue Anweisungen geben, die er versteht.

📚 Aus "Schreibe Dein Programm!"

Das deutsche Lehrbuch Schreibe Dein Programm! von Prof. Dr. Herbert Klaeren und Dr. Michael Sperber (Universität Tübingen) beschreibt es so:

"Programme lassen sich sehr systematisch konstruieren und – teilweise nahezu automatisch – aus der gegebenen Problemstellung ableiten."

Das bedeutet: Programmieren ist kein Rätselraten, sondern ein systematischer Prozess!

1.2 Warum Racket?

Racket ist eine Programmiersprache, die:

🎨 Sofort zeigt, was passiert (du siehst Bilder!)
🔢 Mathematik verwendet, die du kennst
📏 Einfache, klare Regeln hat

📚 Warum Scheme/Racket?

Aus Die Macht der Abstraktion:

"Scheme ist eine kleine und leicht erlernbare Programmiersprache, die es erlaubt, die Konzepte der Programmierung zu präsentieren, ohne Zeit mit der Konstruktvielfalt anderer Programmiersprachen zu verlieren."

1.3 Warum englischer Code?

Programmiersprachen verwenden englische Wörter. Das ist gut, weil:

🌍 Du lernst wichtige englische Wörter
👥 Du kannst später Code von anderen Programmierern lesen
🌐 Fast alle Programmierer auf der Welt verstehen den gleichen Code

📝 Modul 1: Quiz & Rätsel

🧠 Quiz 1: Was ist Programmieren?

A) Mit dem Computer spielen

B) Dem Computer genaue Anweisungen geben

C) Im Internet surfen

🧠 Quiz 2: Warum ist Racket gut für Anfänger?

A) Weil es die komplizierteste Sprache ist

B) Weil es keine Regeln hat

C) Weil es einfache Regeln hat und sofort Ergebnisse zeigt

🧩 Denk-Rätsel: Der präzise Koch

Du möchtest, dass ein Roboter-Koch dir ein Spiegelei macht. Welche Anweisungen sind zu ungenau?

Ordne die Anweisungen: Schreibe "gut" oder "schlecht" für jede:

"Mach mir ein Ei" → schlecht (zu ungenau!)
"Nimm ein Ei aus dem Kühlschrank" → gut
"Koche irgendwas" → schlecht
"Erhitze die Pfanne auf mittlere Stufe" → gut

Merke: Computer brauchen GENAUE Anweisungen, genau wie unser Roboter-Koch!

✅ Was du in Modul 1 gelernt hast

Programmieren bedeutet, dem Computer genaue Anweisungen zu geben
Racket ist eine einfache Sprache mit klaren Regeln
Englischer Code wird weltweit verstanden
Programme können systematisch konstruiert werden

Modul 2: Erste Schritte mit Racket

⏱️ Dauer: 15 Minuten

2.1 WeScheme starten

Öffne https://www.wescheme.org
Klicke auf "Start Coding"

📝 So sieht WeScheme aus

2.2 Die wichtigste Regel: Klammern!

🔄 Normale Mathematik vs. Racket

📚 Präfix-Notation

Diese Schreibweise heißt Präfix-Notation (der Operator steht am Anfang/Präfix). Sie hat Vorteile:

Beliebig viele Argumente: (+ 1 2 3 4 5) statt 1+2+3+4+5
Keine Punkt-vor-Strich-Regel nötig: Die Klammern machen alles klar!
Konsistent: Funktionen und Operatoren funktionieren gleich

🎯 Übung 2.2: Tippe diese Beispiele

(+ 2 3)     ; → 5
(- 10 4)    ; → 6
(* 5 6)     ; → 30
(/ 20 4)    ; → 5

2.3 Verschachtelte Rechnungen

🧅 Wie Zwiebel-Schichten: Von innen nach außen!

🔧 Konstruktionsanleitung: Ausdrücke auswerten

So wertest du verschachtelte Ausdrücke aus:

Finde die innerste Klammer
Berechne diesen Ausdruck
Ersetze die Klammer durch das Ergebnis
Wiederhole, bis nur noch ein Wert übrig ist

📝 Modul 2: Quiz & Rätsel

🧠 Quiz 1: Was ist `(+ 5 (* 3 2))`?

A) 16

B) 11

C) 30

🧠 Quiz 2: Welcher Ausdruck ist korrekt?

A) (5 + 3)

B) (+ 5 3)

C) + 5 3

🧩 Programmier-Rätsel

Übersetze diese mathematischen Ausdrücke in Racket:

Mathematik	Racket
7 + 8	`(+ 7 8)`
10 - 3	`(- 10 3)`
(5 + 5) × 2	`(* (+ 5 5) 2)`
100 ÷ (2 + 3)	`(/ 100 (+ 2 3))`

Probiere alle in WeScheme aus!

🧩 Knobel-Aufgabe: Das Ergebnis finden

Was ergibt dieser Ausdruck? Löse ihn Schritt für Schritt:

(* (+ 2 3) (- 10 6))

Hinweis: Erst (+ 2 3) = 5, dann (- 10 6) = 4, dann (* 5 4) = ?

✅ Was du in Modul 2 gelernt hast

WeScheme hat zwei Bereiche: Definitions und Interactions
In Racket kommt der Operator ZUERST: (+ 2 3)
Verschachtelte Ausdrücke werden von innen nach außen ausgewertet
Klammern machen die Reihenfolge eindeutig

Modul 3: Funktionen verstehen und schreiben

⏱️ Dauer: 20 Minuten

3.1 Was ist eine Funktion?

🏭 Eine Funktion ist wie eine Maschine

3.2 Eingebaute Funktionen

(abs -5)           ; abs = absolute value (Absolutwert) → 5
(max 3 7 2)        ; max = maximum (Maximum) → 7
(min 3 7 2)        ; min = minimum (Minimum) → 2
(sqr 4)            ; sqr = square (Quadrat, 4²) → 16

3.3 Eigene Variablen mit define

(define age 10)              ; age = Alter
(define favorite-number 42)  ; favorite-number = Lieblingszahl

(+ age 5)               ; → 15
(* favorite-number 2)   ; → 84

3.4 Eigene Funktionen definieren

🔧 So baut man eine Funktion

🔧 Konstruktionsanleitung 1: Funktionen erstellen

Nach Schreibe Dein Programm! gehst du so vor:

Kurzbeschreibung: Was macht die Funktion? (1 Satz)
Signatur: Welche Daten rein, welche raus?
Testfälle: Beispiele schreiben
Gerüst: (define (name param) ...)
Rumpf: Die eigentliche Berechnung
Testen: Funktioniert alles?

📝 Beispiel: Funktion "years-to-days" Schritt für Schritt

Aufgabe: Schreibe eine Funktion, die Jahre in Tage umrechnet.

Schritt 1: Kurzbeschreibung

; Rechnet die Anzahl der Jahre in Tage um

Schritt 2: Signatur

; years-to-days: number -> number

Eine Zahl rein (Jahre), eine Zahl raus (Tage)

Schritt 3: Testfälle

(check-expect (years-to-days 1) 365)
(check-expect (years-to-days 2) 730)
(check-expect (years-to-days 0) 0)

Schritt 4: Gerüst

(define (years-to-days years)
  ...)

Schritt 5: Rumpf ausfüllen

(define (years-to-days years)
  (* years 365))

Schritt 6: Testen

Klicke "Run" → Alle Tests sollten grün sein! ✓

📚 Das erste Mantra

Aus Schreibe Dein Programm!:

"Schreibe zuerst Tests, dann den Code. Tests helfen dir, das Problem zu verstehen, bevor du es löst."

🎯 Übung: Schreibe eigene Funktionen

; Funktion, die 10 addiert:
(define (plus-ten x)
  (+ x 10))

; Funktion, die das Quadrat berechnet:
(define (my-square x)
  (* x x))

; Funktion mit zwei Parametern:
(define (rectangle-area width height)
  (* width height))

📝 Modul 3: Quiz & Rätsel

🧠 Quiz 1: Was gibt `(my-square 5)` zurück?

A) 10

B) 25

C) 5

🧠 Quiz 2: Welche Definition ist korrekt?

A) (define triple x (* x 3))

B) (define (triple x) (* x 3))

C) (define triple (x) (* x 3))

🧩 Programmier-Rätsel 1: Vervollständige die Funktion

Diese Funktion soll eine Zahl verdreifachen und dann 1 abziehen:

(define (mystery x)
  (- (* x ?) ?))

Ersetze die ? so, dass (mystery 5) das Ergebnis 14 ergibt.

Hinweis: 5 × ? = 15, dann 15 - ? = 14

Erste Zahl: Zweite Zahl:

🧩 Programmier-Rätsel 2: Die Durchschnitts-Funktion

Diese Funktion soll den Durchschnitt von zwei Zahlen berechnen:

(define (average a b)
  (? (? a b) 2))

(average 4 6) soll 5 ergeben. (average 10 20) soll 15 ergeben.

Hinweis: Durchschnitt = (a + b) ÷ 2

Erster Operator: Zweiter Operator:

🧩 Programmier-Rätsel 3: Die Alters-Funktion

Diese Funktion berechnet, wie alt jemand in 10 Jahren sein wird:

(define (? current-age)
  (? current-age ?))

(??? 25) soll 35 ergeben.

Funktionsname: Operator: Zahl:

🧩 Denk-Aufgabe: Funktionen kombinieren

Gegeben sind diese Funktionen:

(define (double x) (* x 2))
(define (add-five x) (+ x 5))

Was ergibt (double (add-five 3))?

✅ Was du in Modul 3 gelernt hast

Funktionen sind wie Maschinen mit Input und Output
Mit define erstellst du Variablen und Funktionen
Funktionsnamen mit Parametern brauchen extra Klammern
Die Konstruktionsanleitung hilft beim systematischen Vorgehen

Modul 4: Listen – Die Macht der Datenstrukturen

⏱️ Dauer: 30 Minuten

4.1 Warum brauchen wir Listen?

Statt viele einzelne Variablen nutzen wir EINE Liste:

(define scores (list 100 250 180 90 300))

4.2 Listen visualisiert

🔗 Eine Liste ist wie eine Kette

first 10

→

empty

📚 Listen in der funktionalen Programmierung

Aus inf-schule.de:

"Ein funktionales Programm besteht aus einer Sammlung an Funktionen, die durch geschickte Kombination miteinander auch sehr komplexe Probleme lösen können."

Listen sind dabei fundamental – der Name "LISP" steht für "LISt Processing"!

4.3 first und rest

(define numbers (list 10 20 30 40))

(first numbers)   ; → 10
(rest numbers)    ; → (list 20 30 40)
(first (rest numbers))  ; → 20

4.4 cons – Listen zusammenbauen

(cons 5 (list 10 20 30))   ; → (list 5 10 20 30)
(cons 1 empty)             ; → (list 1)

4.5 Rekursion – Die Magie!

🔧 Konstruktionsanleitung: Listen verarbeiten

Eine Funktion, die eine Liste verarbeitet, hat diese Schablone:

(define (process-list lst)
  (if (empty? lst)
      ; Basisfall: Was tun bei leerer Liste?
      basis-wert
      ; Rekursivfall: Verarbeite first, dann rest
      (kombiniere (first lst) 
                  (process-list (rest lst)))))

🔄 Rekursion Schritt für Schritt

📝 Modul 4: Quiz & Rätsel

🧠 Quiz 1: Was ist `(first (list 5 10 15))`?

A) 5

B) 10

C) (list 10 15)

🧠 Quiz 2: Was ist `(rest (list 5 10 15))`?

A) 5

B) 15

C) (list 10 15)

🧠 Quiz 3: Was ist `(cons 1 (list 2 3))`?

A) (list 1 2 3)

B) (list 2 3 1)

C) (list (list 1) 2 3)

🧩 Listen-Rätsel

Gegeben: (define zahlen (list 100 200 300))

Wie bekommst du das zweite Element (200)?

Tipp: Benutze first und rest zusammen!

Lösung: (first (rest zahlen))

🧩 Rekursions-Rätsel

Diese Funktion zählt die Elemente einer Liste:

(define (my-length lst)
  (if (empty? lst)
      0
      (+ 1 (my-length (rest lst)))))

Was ergibt (my-length (list "a" "b" "c" "d"))?

✅ Was du in Modul 4 gelernt hast

Listen speichern mehrere Werte in einer Struktur
first gibt das erste Element, rest den Rest
cons fügt ein Element vorne an
Rekursion: Eine Funktion, die sich selbst aufruft
Die Schablone für Listen-Funktionen: Basisfall + Rekursivfall

Modul 5: Bilder zeichnen

⏱️ Dauer: 15 Minuten

5.1 Grundformen

🎨 Diese Formen kannst du zeichnen

5.2 Bilder kombinieren

; above = übereinander
(above (circle 30 "solid" "red")
       (circle 50 "solid" "blue"))

; beside = nebeneinander
(beside (square 40 "solid" "red")
        (square 40 "solid" "green"))

; overlay = überlagern
(overlay (circle 20 "solid" "white")
         (circle 50 "solid" "black"))

5.3 Das Koordinatensystem

📍 y=0 ist OBEN! (anders als in Mathe)

5.4 place-image

(place-image (circle 20 "solid" "red")
             100 150    ; x=100, y=150
             (empty-scene 400 300))

📝 Modul 5: Quiz & Rätsel

🧠 Quiz: Wo ist (0,0) im Racket-Koordinatensystem?

A) Oben links

B) Unten links

C) In der Mitte

🧩 Kreativ-Aufgabe: Baue einen Schneemann!

Kombiniere drei Kreise übereinander:

(above (circle 20 "solid" "white")
       (circle 30 "solid" "white")
       (circle 40 "solid" "white"))

Bonus: Füge Augen hinzu mit overlay!

🧩 Ampel-Rätsel

Erstelle eine Ampel mit drei Kreisen (rot, gelb, grün) übereinander.

Lösung:

(above (circle 25 "solid" "red")
       (circle 25 "solid" "yellow")
       (circle 25 "solid" "green"))

✅ Was du in Modul 5 gelernt hast

Grundformen: circle, rectangle, square, triangle
Stile: "solid" (gefüllt) oder "outline" (Umriss)
Kombinieren: above, beside, overlay
Koordinatensystem: (0,0) ist oben links, y wächst nach unten
place-image platziert Bilder auf einer Szene

Modul 6: Animation – Dinge bewegen sich!

⏱️ Dauer: 20 Minuten

6.1 Was ist eine Animation?

🎬 Die drei Teile einer Animation

📚 Zustandsbasierte Programme

Programme mit Animation haben einen Zustand (state), der sich über die Zeit ändert. Das ist ein wichtiges Konzept in der Informatik!

In Schreibe Dein Programm! werden Studierende bis zum Ende des Semesters befähigt, PacMan, Tetris oder Asteroids nachzubauen.

6.2 Interaktive Demo: Fallender Ball

🔴 Klicke Start um den Ball fallen zu sehen

y-Position: 10

6.3 Der Code dazu

; tick: Ball fällt (y wird größer)
(define (tick y)
  (+ y 3))

; draw: Zeichnet den Ball
(define (draw y)
  (place-image (circle 20 "solid" "red")
               200 y
               (empty-scene 400 400)))

; Animation starten!
(big-bang 0
  (on-tick tick)
  (to-draw draw))

6.4 Tastatur-Steuerung

(define (handle-key y key)
  (cond
    [(string=? key "up") (- y 10)]
    [(string=? key "down") (+ y 10)]
    [else y]))

(big-bang 200
  (to-draw draw)
  (on-key handle-key))

📝 Modul 6: Quiz & Rätsel

🧠 Quiz 1: Was macht `on-tick`?

A) Zeichnet das Bild

B) Ruft eine Funktion bei jedem Zeitschritt auf

C) Reagiert auf Tastendruck

🧠 Quiz 2: Wenn y größer wird, wohin bewegt sich der Ball?

A) Nach oben

B) Nach unten

C) Nach rechts

🧩 Code-Rätsel: Schnellerer Ball

Der Ball fällt mit (+ y 3) um 3 Pixel pro Tick.

Wie änderst du den Code, damit er doppelt so schnell fällt?

Lösung: (+ y 6)

🧩 Denk-Aufgabe: Bewegung nach links

Wenn der Zustand die x-Position ist, wie bewegst du ein Objekt nach LINKS?

Tipp: Links bedeutet, x wird...

✅ Was du in Modul 6 gelernt hast

Animationen brauchen: Zustand, Tick-Funktion, Zeichen-Funktion
big-bang startet die Animation
on-tick ändert den Zustand automatisch
to-draw zeichnet den aktuellen Zustand
on-key reagiert auf Tasteneingaben

Modul 7a: Snake – Die Spielwelt aufbauen 🐍

⏱️ Dauer: 15 Minuten | Teil 1 von 3

In den nächsten drei Modulen bauen wir Schritt für Schritt das Snake-Spiel. Heute: Die Grundlagen der Spielwelt.

7a.1 Die Konstanten

Zuerst definieren wir feste Werte, die sich nicht ändern:

; Größe eines Schlangen-Segments in Pixeln
(define SIZE 20)

; Spielfeld-Größe
(define WIDTH 400)
(define HEIGHT 400)

; Der Hintergrund
(define BACKGROUND (empty-scene WIDTH HEIGHT "black"))

💡 Warum Konstanten?

Wenn wir später die Größe ändern wollen, müssen wir nur EINE Zahl ändern, nicht hunderte im ganzen Code!

7a.2 Die Schlange als Liste

Die Schlange besteht aus mehreren Segmenten. Jedes Segment hat eine Position (x, y):

🐍 Die Schlange = Liste von Positionen

; Eine Position ist eine Liste mit x und y
(define pos1 (list 200 200))  ; Kopf
(define pos2 (list 180 200))  ; Mitte
(define pos3 (list 160 200))  ; Schwanz

; Die Schlange ist eine Liste von Positionen
(define my-snake (list pos1 pos2 pos3))

7a.3 Hilfsfunktionen für Positionen

; Hole x-Koordinate aus einer Position
(define (pos-x pos) (first pos))

; Hole y-Koordinate aus einer Position
(define (pos-y pos) (second pos))

; Test:
(pos-x (list 200 150))  ; → 200
(pos-y (list 200 150))  ; → 150

7a.4 Ein Segment zeichnen

; Zeichnet ein grünes Quadrat an Position pos
(define (draw-segment pos image)
  (place-image 
    (square (- SIZE 2) "solid" "green")
    (pos-x pos)
    (pos-y pos)
    image))

7a.5 Die ganze Schlange zeichnen (Rekursion!)

Wir benutzen Rekursion, um jedes Segment zu zeichnen:

; Zeichnet alle Segmente der Schlange
(define (draw-snake snake image)
  (if (empty? snake)
      image  ; Fertig! Gib das Bild zurück
      (draw-snake 
        (rest snake)  ; Rekursion mit dem Rest
        (draw-segment (first snake) image))))

🔧 Wie funktioniert draw-snake?

Ist die Liste leer? → Fertig, gib das Bild zurück
Sonst: Zeichne das erste Segment
Rufe draw-snake mit dem Rest der Liste auf
Wiederhole, bis die Liste leer ist

7a.6 Das Futter zeichnen

; Futter ist auch eine Position
(define food (list 300 300))

; Zeichnet das Futter als roten Kreis
(define (draw-food food-pos image)
  (place-image
    (circle (/ SIZE 2) "solid" "red")
    (pos-x food-pos)
    (pos-y food-pos)
    image))

7a.7 Alles zusammen: Die Zeichenfunktion

; Zeichnet Schlange und Futter auf den Hintergrund
(define (draw-game snake food)
  (draw-snake snake
    (draw-food food BACKGROUND)))

🎯 Probiere es aus!

Kopiere den gesamten Code in WeScheme und teste:

(draw-game my-snake food)

Du solltest eine grüne Schlange und rotes Futter sehen!

📝 Modul 7a: Quiz & Rätsel

🧠 Quiz 1: Was ist die Schlange in unserem Programm?

A) Ein Bild

B) Eine Liste von Positionen

C) Eine einzelne Zahl

🧠 Quiz 2: Warum benutzen wir Rekursion in draw-snake?

A) Weil es cool aussieht

B) Um jedes Segment der Liste zu zeichnen

C) Weil Racket keine Schleifen hat

🧩 Code-Rätsel: Position erstellen

Wie erstellst du eine Position bei x=100 und y=250?

(list )

✅ Was du in Modul 7a gelernt hast

Konstanten für Spielfeld-Größe definieren
Positionen als Listen mit (x, y) darstellen
Die Schlange als Liste von Positionen
Rekursives Zeichnen aller Segmente
Futter als roter Kreis

Modul 7b: Snake – Die Bewegung 🐍

⏱️ Dauer: 20 Minuten | Teil 2 von 3

Jetzt bringen wir die Schlange in Bewegung! Das ist der kniffligste Teil.

7b.1 Wie bewegt sich eine Schlange?

🎬 Der Trick: Kopf hinzufügen, Schwanz entfernen!

7b.2 Neuen Kopf berechnen

Je nach Richtung ändert sich x oder y:

; Berechnet die neue Kopf-Position
(define (new-head head direction)
  (cond
    [(string=? direction "up") 
     (list (pos-x head) (- (pos-y head) SIZE))]
    [(string=? direction "down") 
     (list (pos-x head) (+ (pos-y head) SIZE))]
    [(string=? direction "left") 
     (list (- (pos-x head) SIZE) (pos-y head))]
    [(string=? direction "right") 
     (list (+ (pos-x head) SIZE) (pos-y head))]))

💡 Denk dran: y=0 ist OBEN!

"up" bedeutet y wird kleiner (- SIZE)

"down" bedeutet y wird größer (+ SIZE)

7b.3 Das letzte Element entfernen

Wir brauchen eine Funktion, die das letzte Element einer Liste entfernt:

; Entfernt das letzte Element einer Liste
(define (drop-last lst)
  (if (empty? (rest lst))
      empty  ; Nur noch 1 Element? Gib leere Liste zurück
      (cons (first lst) 
            (drop-last (rest lst)))))

; Test:
(drop-last (list 1 2 3 4))  ; → (list 1 2 3)

🔄 drop-last Schritt für Schritt

7b.4 Die Schlange bewegen

; Bewegt die Schlange um einen Schritt
(define (move-snake snake direction)
  (cons (new-head (first snake) direction)  ; Neuer Kopf vorne
        (drop-last snake)))                   ; Schwanz weg

7b.5 Der Spielzustand

Wir packen alles in einen "Zustand":

; Der Spielzustand ist eine Liste: (snake direction food)
(define START-STATE
  (list
    (list (list 200 200) (list 180 200) (list 160 200))  ; Schlange
    "right"                                                ; Richtung
    (list 300 300)))                                      ; Futter

; Hilfsfunktionen für den Zustand
(define (game-snake state) (first state))
(define (game-direction state) (second state))
(define (game-food state) (third state))

7b.6 Die Tick-Funktion

; Wird bei jedem Zeitschritt aufgerufen
(define (tick state)
  (list
    (move-snake (game-snake state) (game-direction state))
    (game-direction state)
    (game-food state)))

🎯 Teste die Bewegung!

; Starte eine einfache Animation
(big-bang START-STATE
  (on-tick tick 0.2)
  (to-draw (lambda (state) 
    (draw-game (game-snake state) (game-food state)))))

Die Schlange sollte sich jetzt nach rechts bewegen!

📝 Modul 7b: Quiz & Rätsel

🧠 Quiz 1: Was macht move-snake?

A) Zeichnet die Schlange

B) Fügt neuen Kopf hinzu und entfernt den Schwanz

C) Ändert die Farbe der Schlange

🧠 Quiz 2: Wenn direction="up" ist, was passiert mit y?

A) y wird kleiner (- SIZE)

B) y wird größer (+ SIZE)

C) y bleibt gleich

🧩 Code-Rätsel: Bewegung verstehen

Der Kopf ist bei Position (100, 100). Die Richtung ist "right".

Wo ist der neue Kopf? (SIZE = 20)

x = , y =

✅ Was du in Modul 7b gelernt hast

Bewegung = neuer Kopf vorne + Schwanz entfernen
new-head berechnet die nächste Position
drop-last entfernt das letzte Element
Der Spielzustand enthält: Schlange, Richtung, Futter
tick aktualisiert den Zustand bei jedem Zeitschritt

Modul 7c: Snake – Das komplette Spiel 🐍

⏱️ Dauer: 20 Minuten | Teil 3 von 3

Jetzt fügen wir Tastatur-Steuerung und Game Over hinzu!

7c.1 Interaktive Demo

🎮 Benutze die Pfeiltasten!

Richtung: right | Klicke erst auf das Spielfeld!

7c.2 Tastatur-Steuerung

; Reagiert auf Pfeiltasten
(define (handle-key state key)
  (cond
    [(string=? key "up")
     (list (game-snake state) "up" (game-food state))]
    [(string=? key "down")
     (list (game-snake state) "down" (game-food state))]
    [(string=? key "left")
     (list (game-snake state) "left" (game-food state))]
    [(string=? key "right")
     (list (game-snake state) "right" (game-food state))]
    [else state]))  ; Andere Tasten ignorieren

7c.3 Kollision mit der Wand

; Prüft, ob eine Position außerhalb des Spielfelds ist
(define (outside? pos)
  (or (< (pos-x pos) 0)
      (> (pos-x pos) WIDTH)
      (< (pos-y pos) 0)
      (> (pos-y pos) HEIGHT)))

; Spiel vorbei, wenn der Kopf außerhalb ist
(define (game-over? state)
  (outside? (first (game-snake state))))

7c.4 Das komplette Spiel starten

(big-bang START-STATE
  (on-tick tick 0.2)           ; Alle 0.2 Sekunden bewegen
  (to-draw draw-state)         ; Zeichnen
  (on-key handle-key)          ; Tastatur
  (stop-when game-over?))      ; Beenden bei Kollision

7c.5 Kompletter Code

📋 Klicke hier für den gesamten Code zum Kopieren

▼

; ===== SNAKE SPIEL =====
; Für DrRacket (nicht WeScheme!)
(require 2htdp/universe)
(require 2htdp/image)

; ===== KONSTANTEN =====
(define SIZE 20)
(define WIDTH 400)
(define HEIGHT 400)
(define BACKGROUND (empty-scene WIDTH HEIGHT "black"))

; ===== POSITION HELFER =====
(define (pos-x pos) (first pos))
(define (pos-y pos) (second pos))

; ===== SPIELZUSTAND HELFER =====
(define (game-snake state) (first state))
(define (game-direction state) (second state))
(define (game-food state) (third state))

; ===== ZEICHNEN =====
(define (draw-segment pos image)
  (place-image 
    (square (- SIZE 2) "solid" "green")
    (pos-x pos) (pos-y pos) image))

(define (draw-snake snake image)
  (if (empty? snake) image
      (draw-snake (rest snake)
        (draw-segment (first snake) image))))

(define (draw-food food-pos image)
  (place-image
    (circle (/ SIZE 2) "solid" "red")
    (pos-x food-pos) (pos-y food-pos) image))

(define (draw-state state)
  (draw-snake (game-snake state)
    (draw-food (game-food state) BACKGROUND)))

; ===== BEWEGUNG =====
(define (new-head head direction)
  (cond
    [(string=? direction "up") 
     (list (pos-x head) (- (pos-y head) SIZE))]
    [(string=? direction "down") 
     (list (pos-x head) (+ (pos-y head) SIZE))]
    [(string=? direction "left") 
     (list (- (pos-x head) SIZE) (pos-y head))]
    [(string=? direction "right") 
     (list (+ (pos-x head) SIZE) (pos-y head))]))

(define (drop-last lst)
  (if (empty? (rest lst)) empty
      (cons (first lst) (drop-last (rest lst)))))

(define (move-snake snake direction)
  (cons (new-head (first snake) direction)
        (drop-last snake)))

; ===== TICK =====
(define (tick state)
  (list
    (move-snake (game-snake state) (game-direction state))
    (game-direction state)
    (game-food state)))

; ===== TASTATUR =====
(define (handle-key state key)
  (cond
    [(string=? key "up")
     (list (game-snake state) "up" (game-food state))]
    [(string=? key "down")
     (list (game-snake state) "down" (game-food state))]
    [(string=? key "left")
     (list (game-snake state) "left" (game-food state))]
    [(string=? key "right")
     (list (game-snake state) "right" (game-food state))]
    [else state]))

; ===== GAME OVER =====
(define (outside? pos)
  (or (< (pos-x pos) 0)
      (> (pos-x pos) WIDTH)
      (< (pos-y pos) 0)
      (> (pos-y pos) HEIGHT)))

(define (game-over? state)
  (outside? (first (game-snake state))))

; ===== START =====
(define START-STATE
  (list
    (list (list 200 200) (list 180 200) (list 160 200))
    "right"
    (list 300 300)))

(big-bang START-STATE
  (on-tick tick 0.2)
  (to-draw draw-state)
  (on-key handle-key)
  (stop-when game-over?))

📝 Modul 7c: Quiz & Rätsel

🧠 Quiz: Was prüft outside?

A) Ob die Schlange sich selbst berührt

B) Ob eine Position außerhalb des Spielfelds ist

C) Ob das Futter gegessen wurde

🧩 Erweiterungs-Ideen zum Ausprobieren

Versuche, das Spiel zu erweitern:

Futter fressen: Wenn Kopf = Futter-Position, wächst die Schlange (kein drop-last!)
Neues Futter: Nach dem Fressen: zufällige neue Position
Punktezähler: Füge eine Zahl zum Zustand hinzu
Selbst-Kollision: Game Over, wenn Kopf ein anderes Segment berührt

🎓 Herzlichen Glückwunsch!

Du hast ein komplettes Spiel programmiert! Das zeigt, dass du verstehst:

✅ Funktionen definieren und kombinieren
✅ Listen und Rekursion
✅ Bilder zeichnen
✅ Animation mit big-bang
✅ Tastatur-Events
✅ Komplexe Spielzustände verwalten

✅ Was du in Modul 7c gelernt hast

Tastatur-Events mit on-key verarbeiten
Richtung ändern basierend auf Pfeiltasten
Kollisionserkennung mit outside?
Spiel beenden mit stop-when
Alle Teile zu einem kompletten Spiel zusammenfügen!

Häufige Fehler und Lösungen

📖 Die wichtigsten Fehler und wie man sie vermeidet

❌ Fehler 1: Klammern falsch

(+ 1 2 3))     ; Zu viele! ❌
(+ 1 2 3       ; Zu wenige! ❌
(+ 1 2 3)      ; ✓ Richtig!

❌ Fehler 2: Operator in der Mitte

(2 + 3)        ; ❌ FALSCH
(+ 2 3)        ; ✓ RICHTIG

❌ Fehler 3: Leerzeichen in Namen

(define my name "Max")    ; ❌
(define my-name "Max")    ; ✓

❌ Fehler 4: first auf leerer Liste

(first empty)    ; ❌ FEHLER!
; Erst prüfen:
(if (empty? lst) 0 (first lst))  ; ✓

❌ Fehler 5: Funktions-Definition ohne Klammern

(define double x (* x 2))      ; ❌
(define (double x) (* x 2))    ; ✓

Englisch-Deutsch Wörterbuch

Englisch	Deutsch
`define`	definieren
`list / first / rest`	Liste / erstes / Rest
`empty / empty?`	leer / ist leer?
`cons`	konstruieren
`if / cond / else`	wenn / Bedingungen / sonst
`circle / rectangle / square`	Kreis / Rechteck / Quadrat
`above / beside / overlay`	übereinander / nebeneinander / überlagern
`place-image / empty-scene`	Bild platzieren / leere Szene
`big-bang / on-tick / to-draw`	Animation / bei Tick / zeichnen
`on-key / stop-when`	bei Taste / stoppen wenn
`snake / food / direction`	Schlange / Futter / Richtung

📖 Schnellreferenz (Spickzettel)

Alles Wichtige auf einen Blick!

🔢 Rechenoperationen

(+ 1 2 3)       ; → 6
(- 10 3)        ; → 7
(* 4 5)         ; → 20
(/ 20 4)        ; → 5
(sqr 5)         ; → 25
(abs -7)        ; → 7

📝 Variablen & Funktionen

(define name 42)
(define (double x) (* x 2))

📋 Listen

(list 1 2 3)    (first lst)    (rest lst)
(cons 0 lst)    (empty? lst)   (length lst)

❓ Bedingungen

(if bedingung dann sonst)
(cond [bed1 res1] [bed2 res2] [else default])

🎨 Bilder

(circle r "solid" farbe)
(rectangle b h "solid" farbe)
(above bild1 bild2)  (beside bild1 bild2)
(place-image bild x y szene)

🎬 Animation

(big-bang start-zustand
  (on-tick tick-funktion)
  (to-draw zeichen-funktion)
  (on-key tasten-funktion)
  (stop-when stopp-bedingung))

📚 Weiterführende Ressourcen

Schreibe Dein Programm! – Das vollständige Lehrbuch (kostenlos online)
Racket Dokumentation für DeinProgramm
inf-schule.de – Weitere Tutorials auf Deutsch
How to Design Programs – Das englische Original

🎓 Kursabschluss: Was du gelernt hast

Herzlichen Glückwunsch! Du hast den gesamten Kurs durchgearbeitet!

🏆 Deine neuen Fähigkeiten

🔢 Racket-Syntax

📝 Funktionen

📋 Listen

🔄 Rekursion

🎨 Grafik

🎬 Animation

🎮 Spieleprogrammierung

📊 Zusammenfassung aller Module

Modul 1: Was ist Programmieren?

Programmieren = Computer genaue Anweisungen geben
Racket ist einfach und zeigt sofort Ergebnisse
Systematisches Konstruieren ist der Schlüssel

Modul 2: Erste Schritte

Präfix-Notation: (+ 2 3) statt 2 + 3
Verschachtelte Ausdrücke: Von innen nach außen
WeScheme hat Definitions- und Interactions-Bereich

Modul 3: Funktionen

Funktionen = Maschinen mit Input → Output
(define (name param) body)
Konstruktionsanleitung: Kurzbeschreibung → Signatur → Tests → Code

Modul 4: Listen

Listen speichern mehrere Werte
first, rest, cons, empty?
Rekursion: Basisfall + Rekursivfall

Modul 5: Bilder

Grundformen: circle, rectangle, square, triangle
Kombinieren: above, beside, overlay
Platzieren: place-image, empty-scene

Modul 6: Animation

Zustand + Tick-Funktion + Zeichen-Funktion
big-bang startet die Animation
Tastatur-Events mit on-key

Modul 7a: Snake – Die Spielwelt

Konstanten für Spielfeld-Größe
Positionen als (x, y) Listen
Schlange als Liste von Positionen
Rekursives Zeichnen mit draw-snake

Modul 7b: Snake – Die Bewegung

Bewegung = neuer Kopf + Schwanz entfernen
new-head berechnet nächste Position
drop-last entfernt letztes Element
Der Spielzustand: (Schlange, Richtung, Futter)

Modul 7c: Snake – Das komplette Spiel

Tastatur-Steuerung mit on-key
Kollisionserkennung mit outside?
Alles zusammen mit big-bang

📚 Das wichtigste Prinzip

Aus Schreibe Dein Programm!:

"Programmierung mittels Konstruktionsanleitungen kommt dem disziplinierten ingenieursmäßigen Bauen näher als alles andere."

Du hast gelernt, Programme systematisch zu konstruieren – nicht nur zu "hacken". Das ist eine Fähigkeit, die dir bei jeder Programmiersprache helfen wird!

🚀 Wie geht es weiter?

💡 Nächste Schritte

Erweitere das Snake-Spiel: Futter fressen, Punkte zählen, Hindernisse
Baue andere Spiele: Pong, Breakout, Tetris
Lies weiter: Schreibe Dein Programm! geht viel tiefer
Lerne andere Sprachen: Python, JavaScript – die Konzepte bleiben gleich!

🎉 Herzlichen Glückwunsch! 🎉

Du bist jetzt ein Racket-Programmierer!

Denk dran: Jeder Experte war einmal ein Anfänger.

Programmieren lernt man durch Üben – also weitermachen! 🐍

🐍 Racket-Kurs: Vom Anfänger zum Snake-Spiel

Modul 1: Was ist Programmieren?

1.1 Der Computer als Koch

🍳 Der Computer versteht nur genaue Anweisungen

📚 Aus "Schreibe Dein Programm!"

1.2 Warum Racket?

📚 Warum Scheme/Racket?

1.3 Warum englischer Code?

📝 Modul 1: Quiz & Rätsel

🧠 Quiz 1: Was ist Programmieren?

🧠 Quiz 2: Warum ist Racket gut für Anfänger?

🧩 Denk-Rätsel: Der präzise Koch

✅ Was du in Modul 1 gelernt hast

Modul 2: Erste Schritte mit Racket

2.1 WeScheme starten

📝 So sieht WeScheme aus

2.2 Die wichtigste Regel: Klammern!

🔄 Normale Mathematik vs. Racket

📚 Präfix-Notation

🎯 Übung 2.2: Tippe diese Beispiele

2.3 Verschachtelte Rechnungen

🧅 Wie Zwiebel-Schichten: Von innen nach außen!

🔧 Konstruktionsanleitung: Ausdrücke auswerten

📝 Modul 2: Quiz & Rätsel

🧠 Quiz 1: Was ist (+ 5 (* 3 2))?

🧠 Quiz 2: Welcher Ausdruck ist korrekt?

🧩 Programmier-Rätsel

🧩 Knobel-Aufgabe: Das Ergebnis finden

✅ Was du in Modul 2 gelernt hast

Modul 3: Funktionen verstehen und schreiben

3.1 Was ist eine Funktion?

🏭 Eine Funktion ist wie eine Maschine

3.2 Eingebaute Funktionen

3.3 Eigene Variablen mit define

3.4 Eigene Funktionen definieren

🔧 So baut man eine Funktion

🔧 Konstruktionsanleitung 1: Funktionen erstellen

📝 Beispiel: Funktion "years-to-days" Schritt für Schritt

📚 Das erste Mantra

🎯 Übung: Schreibe eigene Funktionen

📝 Modul 3: Quiz & Rätsel

🧠 Quiz 1: Was gibt (my-square 5) zurück?

🧠 Quiz 2: Welche Definition ist korrekt?

🧩 Programmier-Rätsel 1: Vervollständige die Funktion

🧩 Programmier-Rätsel 2: Die Durchschnitts-Funktion

🧩 Programmier-Rätsel 3: Die Alters-Funktion

🧩 Denk-Aufgabe: Funktionen kombinieren

✅ Was du in Modul 3 gelernt hast

Modul 4: Listen – Die Macht der Datenstrukturen

4.1 Warum brauchen wir Listen?

4.2 Listen visualisiert

🔗 Eine Liste ist wie eine Kette

📚 Listen in der funktionalen Programmierung

4.3 first und rest

4.4 cons – Listen zusammenbauen

4.5 Rekursion – Die Magie!

🔧 Konstruktionsanleitung: Listen verarbeiten

🔄 Rekursion Schritt für Schritt

📝 Modul 4: Quiz & Rätsel

🧠 Quiz 1: Was ist (first (list 5 10 15))?

🧠 Quiz 2: Was ist (rest (list 5 10 15))?

🧠 Quiz 3: Was ist (cons 1 (list 2 3))?

🧩 Listen-Rätsel

🧩 Rekursions-Rätsel

✅ Was du in Modul 4 gelernt hast

Modul 5: Bilder zeichnen

5.1 Grundformen

🎨 Diese Formen kannst du zeichnen

5.2 Bilder kombinieren

5.3 Das Koordinatensystem

📍 y=0 ist OBEN! (anders als in Mathe)

5.4 place-image

📝 Modul 5: Quiz & Rätsel

🧠 Quiz: Wo ist (0,0) im Racket-Koordinatensystem?

🧩 Kreativ-Aufgabe: Baue einen Schneemann!

🧩 Ampel-Rätsel

✅ Was du in Modul 5 gelernt hast

Modul 6: Animation – Dinge bewegen sich!

6.1 Was ist eine Animation?

🎬 Die drei Teile einer Animation

🧠 Quiz 1: Was ist `(+ 5 (* 3 2))`?

🧠 Quiz 1: Was gibt `(my-square 5)` zurück?

🧠 Quiz 1: Was ist `(first (list 5 10 15))`?

🧠 Quiz 2: Was ist `(rest (list 5 10 15))`?

🧠 Quiz 3: Was ist `(cons 1 (list 2 3))`?

🧠 Quiz 1: Was macht `on-tick`?