🚀 Willkommen bei CodeFuchs!
CodeFuchs ist eine einfache Programmiersprache in deutscher Sprache, mit der du spielerisch programmieren lernen kannst.
Was kannst du damit machen?
- 📝 Text ausgeben und Benutzereingaben verarbeiten
- 🔢 Mit Zahlen und Variablen rechnen
- 🔀 Entscheidungen treffen mit Bedingungen
- 🔁 Dinge wiederholen mit Schleifen
- 📦 Eigene Funktionen schreiben
- 🐢 Bunte Bilder und Muster zeichnen
Die Oberfläche
- Code-Editor (links): Hier schreibst du deinen Code
- Ausgabe (oben rechts): Hier siehst du die Text-Ausgaben
- Grafik (unten rechts): Hier erscheinen deine Zeichnungen
- Hilfe (rechts): Zeigt Variablen und Befehle
💡 Tipp: Klicke auf "📚 Beispiele laden" um fertige Programme auszuprobieren!
Dein erstes Programm
Probiere diesen Code aus:
sag "Hallo Welt!"
sag "Ich lerne programmieren!"
Klicke dann auf den grünen "▶️ Ausführen" Button!
📝 Grundlagen
Ausgabe mit "sag"
Mit sag gibst du Text aus:
sag "Hallo!"
sag "Wie geht es dir?"
Eingabe mit "frage"
Mit frage kannst du den Benutzer nach Informationen fragen:
frage "Wie heißt du?" als name
sag "Hallo " + name + "!"
Das als name speichert die Antwort in einer Variable namens "name".
Kommentare
Kommentare beginnen mit # und werden nicht ausgeführt:
# Das ist ein Kommentar
sag "Das wird ausgeführt"
Rechnen
Du kannst mit Zahlen rechnen:
sag 5 + 3
sag 10 - 4
sag 6 * 7
sag 20 / 4
Operatoren: + (Plus), - (Minus), * (Mal), / (Geteilt)
Text verbinden
Mit + kannst du Texte zusammenfügen:
vorname ist "Max"
nachname ist "Mustermann"
sag vorname + " " + nachname
🔢 Variablen
Variablen sind wie Boxen, in denen du Werte speichern kannst.
Variable erstellen
Mit ist weist du einer Variable einen Wert zu:
alter ist 12
name ist "Anna"
groß ist wahr
Variable verwenden
punkte ist 0
punkte ist punkte + 10
sag "Du hast " + punkte + " Punkte"
Datentypen
- Zahlen: 42, 3.14, -5
- Text: "Hallo" (in Anführungszeichen)
- Wahrheitswerte: wahr oder falsch
💡 Tipp: Variablennamen sollten aussagekräftig sein: alter statt x
Beispiel
frage "Wie alt bist du?" als alter
frage "Wie heißt du?" als name
sag name + " ist " + alter + " Jahre alt"
nächstesJahr ist alter + 1
sag "Nächstes Jahr bist du " + nächstesJahr
🧮 Mathe-Funktionen
Neben + - * / gibt es fertige Funktionen für typische Rechenaufgaben.
Runden
Drei Funktionen für drei Rundungsarten:
sag rundeAb(4.7) # Ausgabe: 4 (immer abwärts)
sag rundeAuf(4.2) # Ausgabe: 5 (immer aufwärts)
sag runden(4.5) # Ausgabe: 5 (kaufmännisch)
Rest einer Division (Modulo)
rest(a, b) gibt den Rest zurück, der bei der Division von a durch b übrig bleibt:
sag rest(7, 2) # Ausgabe: 1 (7 geteilt durch 2 = 3, Rest 1)
sag rest(10, 5) # Ausgabe: 0 (geht ohne Rest auf)
Gerade oder ungerade?
Damit lässt sich direkt prüfen, ob eine Zahl gerade oder ungerade ist — praktisch in einer wenn-Bedingung:
zahl ist 7
wenn gerade(zahl) dann
sag zahl + " ist gerade"
sonst
sag zahl + " ist ungerade"
ende
Kleinster und größter Wert
sag min(3, 7) # Ausgabe: 3
sag max(3, 7) # Ausgabe: 7
Wurzel und Absolutwert
sag wurzel(16) # Ausgabe: 4
sag abs(-5) # Ausgabe: 5
Zufallszahlen
zufallsZahl(max) liefert eine ganze Zahl von 0 bis max - 1:
würfel ist zufallsZahl(6) + 1
sag "Du hast eine " + würfel + " gewürfelt"
Alle Mathe-Funktionen im Überblick
| Funktion | Beschreibung |
|---|
zufallsZahl(max) | Zufallszahl von 0 bis max-1 |
wurzel(zahl) | Quadratwurzel |
abs(zahl) | Absolutwert (macht negative Zahlen positiv) |
rundeAb(zahl) | Rundet ab |
rundeAuf(zahl) | Rundet auf |
runden(zahl) | Rundet kaufmännisch |
rest(a, b) | Rest der Division (Modulo) |
gerade(zahl) | Prüft, ob Zahl gerade ist (wahr/falsch) |
ungerade(zahl) | Prüft, ob Zahl ungerade ist (wahr/falsch) |
min(a, b) | Kleinerer der beiden Werte |
max(a, b) | Größerer der beiden Werte |
💡 Tipp: gerade(zahl) ist nur eine Abkürzung für rest(zahl, 2) = 0 — beides funktioniert.
📋 Listen (Arrays)
Listen speichern mehrere Werte in einer einzigen Variable. Perfekt für Sammlungen!
Liste erstellen
# Leere Liste
meineListe ist []
# Liste mit Werten
zahlen ist [1, 2, 3, 4, 5]
namen ist ["Anna", "Max", "Lisa"]
sag zahlen # Ausgabe: [1, 2, 3, 4, 5]
Auf Elemente zugreifen
Der Index startet bei 0 (nicht bei 1)!
farben ist ["rot", "grün", "blau"]
sag farben[0] # Ausgabe: rot
sag farben[1] # Ausgabe: grün
sag farben[2] # Ausgabe: blau
Elemente ändern
farben ist ["rot", "grün", "blau"]
farben[1] ist "gelb"
sag farben # Ausgabe: [rot, gelb, blau]
Listen-Funktionen
| Funktion | Beschreibung |
|---|
länge(liste) | Anzahl der Elemente |
anhängen(liste, wert) | Wert am Ende hinzufügen |
entfernen(liste) | Letztes Element entfernen |
entfernen(liste, index) | Element an Position entfernen |
enthält(liste, wert) | Prüft ob Wert enthalten ist |
finde(liste, wert) | Position des Wertes (-1 wenn nicht gefunden) |
Beispiel: Durch Liste iterieren
zahlen ist [10, 20, 30]
summe ist 0
i ist 0
solange i < länge(zahlen) dann
summe ist summe + zahlen[i]
i ist i + 1
ende
sag "Summe: " + summe # Ausgabe: 60
🔀 Bedingungen
Mit Bedingungen kannst du deinem Programm beibringen, Entscheidungen zu treffen.
Wenn-Dann-Sonst
alter ist 15
wenn alter >= 18 dann
sag "Du bist volljährig"
sonst
sag "Du bist minderjährig"
ende
Vergleichsoperatoren
| Operator | Bedeutung | Beispiel |
|---|
| = | Gleich | x = 5 |
| != | Ungleich | x != 0 |
| > | Größer als | x > 10 |
| < | Kleiner als | x < 20 |
| >= | Größer oder gleich | x >= 18 |
| <= | Kleiner oder gleich | x <= 100 |
Verschachtelte Bedingungen
punkte ist 85
wenn punkte >= 90 dann
sag "Note: Sehr gut!"
sonst
wenn punkte >= 75 dann
sag "Note: Gut"
sonst
sag "Note: Befriedigend"
ende
endeLogische Verknüpfungen
Mit und / oder kannst du mehrere Bedingungen kombinieren:
alter ist 15
wenn alter > 10 und alter < 18 dann
sag "Du bist ein Teenager"
ende
⚠️ Wichtig: Vergiss nicht das ende am Schluss!
🔁 Schleifen
Schleifen wiederholen Code automatisch mehrmals.
Wiederhole X mal
Führt Code eine bestimmte Anzahl aus:
wiederhole 5 mal
sag "Hallo!"
ende
Mit Zähler
zähler ist 1
wiederhole 10 mal
sag "Runde " + zähler
zähler ist zähler + 1
ende
Solange-Schleife
Wiederholt Code, solange eine Bedingung wahr ist:
zahl ist 1
solange zahl <= 10 dann
sag zahl
zahl ist zahl + 1
ende
Beispiel: Einmaleins
frage "Welche Reihe? (1-10)" als reihe
ergebnis ist 0
wiederhole 10 mal
ergebnis ist ergebnis + reihe
sag reihe + " x " + ergebnis / reihe + " = " + ergebnis
ende
⚠️ Vorsicht: Bei solange-Schleifen darauf achten, dass die Bedingung irgendwann falsch wird, sonst läuft die Schleife endlos!
📦 Funktionen
Funktionen sind wiederverwendbare Code-Blöcke mit einem Namen.
Funktion definieren
funktion grüße()
sag "Hallo!"
sag "Schön dich zu sehen!"
ende
grüße()
Mit Parametern
Parameter sind Werte, die du der Funktion übergibst:
funktion grüße(name)
sag "Hallo " + name + "!"
ende
grüße("Anna")
grüße("Max")Mehrere Parameter
funktion addiere(a, b)
summe ist a + b
sag a + " + " + b + " = " + summe
ende
addiere(5, 3)
addiere(10, 7)
Rückgabewerte
Mit zurück gibt eine Funktion einen Wert zurück:
funktion multipliziere(x, y)
zurück x * y
ende
ergebnis ist multipliziere(6, 7)
sag "6 x 7 = " + ergebnis
Praktisches Beispiel
funktion istGerade(zahl)
rest ist zahl - (zahl / 2 * 2)
wenn rest = 0 dann
zurück wahr
sonst
zurück falsch
ende
ende
wenn istGerade(8) dann
sag "8 ist gerade"
ende💡 Tipp: Funktionen helfen dir, deinen Code zu organisieren und nicht immer wieder das Gleiche zu schreiben!
🐢 Turtle-Grafik
Mit der Turtle (Schildkröte) kannst du Bilder und Muster zeichnen!
Grundbefehle
| Befehl | Was passiert |
|---|
| vorwärts(100) | Bewegt die Turtle 100 Pixel vorwärts |
| rückwärts(50) | Bewegt die Turtle 50 Pixel rückwärts |
| links(90) | Dreht die Turtle 90° nach links |
| rechts(90) | Dreht die Turtle 90° nach rechts |
Quadrat zeichnen
wiederhole 4 mal
vorwärts(100)
rechts(90)
ende
Farben
Du kannst Farben als deutsche Farbwörter oder als Hex-Codes angeben:
farbe("rot") # Einfach!
vorwärts(100)
farbe("grün") # Oder...
farbe("#00FF00") # ...als Hex-Code
rechts(90)
vorwärts(100)Verfügbare Farbwörter:
rot orange gelb grün blau lila pink braun schwarz weiß grau himmelblau türkis gold violett rosa
Weitere: hellgrün, dunkelgrün, hellblau, dunkelblau, hellgrau, dunkelgrau, hellrot, dunkelrot, cyan, magenta, marine, beige, silber
Stift heben/senken
vorwärts(50)
stiftHoch() # Nicht mehr zeichnen
vorwärts(50) # Bewegt sich, zeichnet aber nicht
stiftRunter() # Wieder zeichnen
vorwärts(50)
Formen
# Kreis
kreis(50)
# Quadrat
quadrat(100)
Langsames/Animiertes Zeichnen
Mit langsam() siehst du der Turtle beim Zeichnen zu:
# Animation aktivieren (Geschwindigkeit: 5 Pixel/Frame)
langsam(5)
wiederhole 4 mal
vorwärts(100)
rechts(90)
ende
Der Parameter bei langsam() bestimmt die Geschwindigkeit: kleinere Werte = langsamer, größere = schneller.
Beispiel: Buntes Muster
wiederhole 8 mal
farbe("#FF0000")
vorwärts(100)
rechts(45)
farbe("#0000FF")
kreis(30)
ende💡 Tipp: Experimentiere mit verschiedenen Winkeln und Wiederholungen, um coole Muster zu erstellen!
📚 Befehls-Referenz
Ein- und Ausgabe
| Befehl | Beschreibung | Beispiel |
|---|
| sag | Text ausgeben | sag "Hallo" |
| frage ... als | Benutzereingabe | frage "Name?" als n |
Variablen
| Befehl | Beschreibung | Beispiel |
|---|
| ... ist ... | Variable zuweisen | x ist 42 |
Kontrollstrukturen
| Befehl | Beschreibung |
|---|
| wenn ... dann ... ende | Bedingung |
| wenn ... dann ... sonst ... ende | Bedingung mit Alternative |
| wiederhole X mal ... ende | Zählschleife |
| solange bedingung dann ... ende | Bedingungs-Schleife (dann optional) |
Funktionen
| Befehl | Beschreibung |
|---|
| funktion name() ... ende | Funktion definieren |
| funktion name(a, b) ... ende | Funktion mit Parametern |
| zurück wert | Wert zurückgeben |
| name() | Funktion aufrufen |
Turtle-Befehle
| Befehl | Beschreibung |
|---|
| vorwärts(pixel) | Vorwärts bewegen |
| rückwärts(pixel) | Rückwärts bewegen |
| links(grad) | Nach links drehen |
| rechts(grad) | Nach rechts drehen |
| farbe("rot") | Farbe setzen (Farbwort oder Hex) |
| kreis(radius) | Kreis zeichnen |
| quadrat(größe) | Quadrat zeichnen |
| stiftHoch() | Stift anheben (nicht zeichnen) |
| stiftRunter() | Stift absetzen (zeichnen) |
| langsam(speed) | Animiert zeichnen (speed = Pixel/Frame) |
Mathe-Funktionen
| Funktion | Beschreibung | Beispiel |
|---|
| zufallsZahl(max) | Zufallszahl von 0 bis max-1 | zufallsZahl(10) → 0-9 |
| wurzel(zahl) | Quadratwurzel | wurzel(16) → 4 |
| abs(zahl) | Absolutwert | abs(-5) → 5 |
| rundeAb(zahl) | Rundet ab (Nachkommastellen weg) | rundeAb(4.7) → 4 |
| rundeAuf(zahl) | Rundet auf | rundeAuf(4.2) → 5 |
| runden(zahl) | Rundet kaufmännisch | runden(4.5) → 5 |
| rest(a, b) | Rest der Division (Modulo) | rest(7, 2) → 1 |
| gerade(zahl) | Prüft, ob Zahl gerade ist | gerade(4) → wahr |
| ungerade(zahl) | Prüft, ob Zahl ungerade ist | ungerade(4) → falsch |
| min(a, b) | Kleinerer der beiden Werte | min(3, 7) → 3 |
| max(a, b) | Größerer der beiden Werte | max(3, 7) → 7 |
Operatoren
Arithmetik: + - * /
Vergleich: = != < > <= >=
Logik: und oder
🖥️ CODEFUCHS 64 — der Fantasie-Computer
Der CODEFUCHS 64 ist ein eigenes kleines Programm neben der CodeFuchs-Oberfläche: ein nachgebauter Heimcomputer, wie es ihn in den 80er-Jahren gab. Er versteht genau dieselbe Sprache wie CodeFuchs — nur sieht und fühlt er sich anders an.
Starten
Im Terminal im Projektordner eingeben:
npm run fantasie
Der Computer öffnet sich dann im Browser unter Port 3006.
Der große Unterschied: es läuft von selbst
Du musst nichts starten. Was du links tippst, passiert rechts sofort — ein kurzer Moment nachdem du die Finger stillhältst. Kein Start-Knopf, keine Taste, kein Speichern.
Probier es aus: Lade das Beispiel Hallo Welt und ändere die 4 in der Zeile wiederhole 4 mal. Schau dabei nach rechts.
💡 So lernt man am schnellsten: Nimm eine Zahl im Programm und zähl sie hoch und runter. Du siehst sofort, was sie bewirkt — das musst du dir nicht erklären lassen.
Ein Bildschirm für alles
In CodeFuchs hast du getrennte Bereiche für Text und Zeichnungen. Beim CODEFUCHS 64 teilen sich beide denselben Bildschirm — genau wie beim echten Heimcomputer. Der Schirm hat 40 Spalten, 25 Zeilen und 16 Farben. sag schreibt also mitten in deine Zeichnung, wenn du willst.
Wenn etwas nicht stimmt
Beim Tippen ist ein Programm ständig halb fertig — das ist normal und stört nicht. Der Computer wartet dann einfach ab, und das Bild bleibt stehen, wie es war. Erst wenn deine Zeile fertig ist, rechnet er weiter.
Geht wirklich etwas schief, siehst du zwei Dinge: die Zeilennummer links färbt sich rot, und oben am Blatt steht, was los ist. Das Bild zeigt dabei, wie weit dein Programm gekommen ist — daran erkennst du meistens sofort, wo es hakt.
Die Vorführung
Manche Programme können nicht einfach mitlaufen: Wenn dein Programm dich etwas fragen will, oder mit warte und langsam arbeitet, braucht es dich davor.
Dann erscheint auf dem Schirm ein Knopf Vorführen. Ein Klick, und das Programm läuft einmal richtig durch — mit Tastatur, mit Pausen, mit Tönen. Danach geht es normal weiter.
Dein Blatt bleibt
Was du geschrieben hast, ist beim nächsten Öffnen wieder da. Mit Neues Blatt oben rechts fängst du von vorne an.
Zusätzliche Befehle
Weil der CODEFUCHS 64 einen echten Bildschirm mit Raster hat, kann er ein paar Dinge, die CodeFuchs nicht kennt:
| Befehl | Beschreibung |
|---|
| papier(farbe) | Färbt den ganzen Bildschirm |
| rand(farbe) | Färbt den Rahmen um den Schirm |
| schriftfarbe(farbe) | Farbe für den folgenden Text |
| setzeCursor(spalte, zeile) | Springt zu einer Stelle (0–39, 0–24) |
| schreibe(text) | Schreibt ohne neue Zeile |
| lösche() | Leert den Bildschirm |
| zurMitte() | Setzt die Turtle in die Mitte zurück |
| setzeIgel(x, y) | Setzt die Turtle an eine Stelle |
| richtung(grad) | Dreht die Turtle in eine Richtung |
| versteckeIgel() | Blendet die Turtle aus |
| zeigeIgel() | Blendet die Turtle wieder ein |
| warte(sekunden) | Hält das Programm kurz an |
| ton(höhe, dauer) | Spielt einen Piepton |
💡 Tipp: warte(), frage, langsam() und ton() brauchen eine Vorführung — der Computer bietet sie dir dann von selbst an.
Tasten
Es gibt nur eine, und die kennst du schon:
Alles andere passiert von allein.
📱 AppFuchs — Apps bauen und programmieren
AppFuchs ist ein Prototyp neben CodeFuchs. Er trennt, was jedes echte Werkzeug trennt: Das Aussehen malst du, die Logik schreibst du.
Starten
npm run appfuchs
Die Werkbank öffnet sich unter Port 3007.
Die drei Bereiche
- Links liegen die Bausteine: Knopf, Text, Anzeige, Eingabe, Bild, Balken, Tastenfeld
- In der Mitte das Gerät — hier ziehst du sie hin und ordnest sie an
- Rechts der Inspektor — alles über das gewählte Element an einem Ort
Der Inspektor stellt drei Fragen, in der Reihenfolge, in der man sie sich stellt:
- Was tut es? — die Rolle, und womit. Hier fängt alles an.
- Wie sieht es aus? — Beschriftung, Farbe, Größe
- Wie heißt es im Code? — nur nötig, wenn du schreibst; deshalb zugeklappt
Eine eigene Code-Spalte gibt es nicht mehr. Wählst du „macht, was ich sage", erscheint das Schreibfeld direkt im Inspektor — bei dem Element, dem der Code gehört, und es zeigt nur dessen Zeilen.
„Was baue ich heute?"
Oben in der Leiste sitzt ein orangefarbener Knopf. Wer nicht weiß, was er bauen soll, klickt darauf: drei Fragen zum Antippen — was die App machen soll, worum es geht, wie schwer es werden darf — und am Ende steht ein Vorschlag da.
Dazu gehört immer, aus welchen Bausteinen die Idee besteht und wie sie funktioniert. Nichts wird vorgeschlagen, was sich nicht auch bauen lässt.
Neue Idee fängt von vorn an. Auch wer dieselben drei Antworten noch einmal antippt, bekommt etwas anderes — aus elf Vorlagen und über vierzig Themen entstehen mehrere hundert Vorschläge.
Ohne Code: die Rolle
Viele Knöpfe tun etwas ganz Gewöhnliches — hochzählen, etwas hinschreiben, würfeln. Dafür musst du nichts tippen. Wähl das Element an; oben im Panel steht „Was tut es?". Such dir etwas aus, sag womit, fertig.
| Rolle | Was passiert |
|---|
| tippt etwas | schreibt die gedrückte Taste in eine Anzeige |
| zählt hoch | zählt eine Anzeige um einen Schritt weiter |
| schreibt etwas hin | setzt eine Anzeige auf einen festen Wert |
| zeigt und versteckt | blendet ein Element ein oder aus |
| würfelt | schreibt eine Zufallszahl hinein |
| macht, was ich sage | dann entscheidet dein Code |
💡 Woher das kommt: Dasselbe Muster wie in GameFuchs. Dort trägt ein Objekt eine Rolle wie sammelItem, und die Engine weiß den Rest. Erst was keine Rolle abdeckt, wird geschrieben.
Das Tastenfeld
Ein Rechner brauchte früher fünfzehn Knöpfe und fünfzehnmal denselben Code. Das sind aber nicht fünfzehn Dinge, sondern eines — fünfzehnmal abgeschrieben.
Zieh stattdessen ein Tastenfeld hin. Im Inspektor siehst du die Tasten so, wie sie auf dem Gerät liegen — tipp in eine hinein, um sie zu ändern, + legt eine dazu, × nimmt eine weg. Daneben stellst du ein, wie viele nebeneinander stehen.
Im Code fragst du, welche gedrückt wurde:
funktion tasten_geklickt()
schirm.text ist schirm.text + tasten.gedrueckt
ende
Mit der Rolle tippt etwas brauchst du nicht einmal das.
Elemente ansprechen
Jedes Element hat einen Namen. Du siehst ihn rechts im Panel und kannst ihn ändern. Über den Namen und einen Punkt erreichst du seine Eigenschaften:
schirm.text ist "7"
schirm.text ist schirm.text + "7"
knopf.farbe ist "grün"
leiste.wert ist 5
wenn feld.text = "" dann
feld.text ist "Bitte etwas eintippen"
ende
| Eigenschaft | Wo |
|---|
| .text | Überall — Beschriftung oder Inhalt |
| .farbe | Knopf und Balken: grau, orange, grün, blau, rot, gelb |
| .wert · .von | Balken: 3 von 5 |
| .groesse | Text: klein, normal, groß |
| .ausrichtung | Anzeige: links, mitte, rechts |
Alles andere kennst du schon
Der Code ist ganz normales CodeFuchs: wenn/dann/sonst, wiederhole, funktion, Variablen, Listen, zufallsZahl. Es gibt keine Befehle mehr fürs Aussehen — das machst du ja mit der Maus.
Starten und Stoppen
Oben rechts schaltest du um. Beim Bauen siehst du ein feines Raster und kannst alles anfassen. Beim Laufen verschwindet das Raster und die App tut, was dein Code sagt. Drückst du auf Stopp, steht wieder alles wie vorher.
Die zehn Beispiele
Zum Üben:
- Rechner — viele Knöpfe, eine gemeinsame Funktion
- Keks-Fabrik — sammeln und kaufen: wenn genug dann
- Notizzettel — ein Eingabefeld, das etwas merkt
- Würfel — Zufall, Balken, wechselndes Bild
- Quiz — Listen als Fragenspeicher
Zum Spielen:
- Tic Tac Toe — zwei Spieler, Spielfeld als Liste, Gewinnprüfung
- Vier Ecken — Reaktionsspiel mit Zufall
- Memory — Paare finden über mehrere Züge
- Ampel — ein Zustand, der im Kreis weiterschaltet
- Trinkgeld — rechnen mit einer Eingabe
💡 Schau dir Tic Tac Toe an: Das Spielfeld steht in einer Liste, die neun Knöpfe zeigen sie nur an. So trennt man Daten und Anzeige — genau wie in echten Programmen.
Was der Prototyp noch nicht kann
- Keine Animation — Elemente reagieren, aber nichts bewegt sich von selbst
- Kein Rückgängig — ein gelöschtes Element ist weg
- Nur eine Seite — kein Umschalten zwischen Ansichten
🎮 Willkommen bei GameFuchs!
Mit GameFuchs kannst du eigene Spiele programmieren — direkt in deinem Browser!
Was du schon kannst
Du kennst bereits Variablen, Bedingungen und Schleifen aus CodeFuchs. GameFuchs baut genau darauf auf und gibt dir neue Befehle, mit denen du Figuren bewegen, Spielfelder erstellen und echte Spiele bauen kannst.
Dein erstes Spielfeld
Probiere diesen Code aus:
spielfeld(400, 300)
hintergrund("himmelblau")
figur ist neueFigur("fuchs")
setzeFigur(figur, 200, 150)Klicke auf Start und du siehst den Fuchs auf einem himmelblauen Spielfeld!
💡 Tipp: Alle CodeFuchs-Befehle (sag, wenn, wiederhole etc.) funktionieren auch im Game-Modus!
🖼️ Spielfeld & Figuren
Spielfeld erstellen
spielfeld(800, 600) # Breite, Höhe in Pixel
hintergrund("#87CEEB") # Hintergrundfarbe (Hex)Figuren erstellen & platzieren
figur ist neueFigur("fuchs")
setzeFigur(figur, 100, 200) # x, y Position
bewegeFigur(figur, 5, 0) # dx, dy (Richtung)
figurGröße(figur, 2) # Vergrößern (Faktor)Verfügbare Sprites
| Name | Beschreibung |
|---|
| "fuchs" | Fuchs-Figur |
| "robert" | Robert-Figur |
💡 Eigene Sprites: Mit dem 🎨 Sprite-Editor kannst du eigene Pixel-Art Figuren erstellen! Siehe Abschnitt "Sprite-Editor".
🪜 Klettern: Mit dem Werkzeug Klettern ziehst du eine Leiter auf. Ein Spieler mit Plattformer-Steuerung (Pfeile ←→) kann darauf mit Hoch ↑ und Runter ↓ klettern — die Schwerkraft wird währenddessen ausgesetzt. Verlässt der Spieler die Leiter, fällt er wieder normal. Eine waagerechte Leiter (breiter als hoch) wird zu Hangelsprossen: Der Spieler hängt darunter, hangelt sich mit ←→ entlang und lässt mit Runter ↓ los — obendrauf laufen geht nicht.
Befehls-Übersicht
| Befehl | Beschreibung |
|---|
| spielfeld(b, h) | Spielfeld erstellen |
| hintergrund(farbe) | Hintergrundfarbe setzen |
| neueFigur(name) | Neue Figur erstellen |
| setzeFigur(f, x, y) | Figur positionieren |
| bewegeFigur(f, dx, dy) | Figur bewegen |
| figurGröße(f, faktor) | Figur skalieren |
Figur-Eigenschaften
Jede Figur hat Eigenschaften, die du mit einem Punkt abrufen kannst:
held ist neueFigur("fuchs")
setzeFigur(held, 100, 200)
sag held.x # → 100
sag held.y # → 200| Eigenschaft | Beschreibung |
|---|
| .x | X-Position (horizontal) |
| .y | Y-Position (vertikal) |
| .breite | Breite der Figur |
| .höhe | Höhe der Figur |
| .sichtbar | Ob die Figur sichtbar ist |
🎨 Sprite-Editor
Mit dem Sprite-Editor kannst du eigene Pixel-Art Figuren erstellen und direkt in deinem Spiel verwenden!
Editor öffnen
Klicke auf den 🎨 Sprites Button in der Menüleiste. Die Ansicht wechselt zum Sprite-Editor.
Werkzeuge
| Werkzeug | Taste | Beschreibung |
|---|
| ⬚ Markieren | M | Bereich markieren und verschieben |
| ✏️ Stift | P | Pixel mit der aktuellen Farbe zeichnen |
| 🧽 Radierer | E | Pixel löschen (transparent machen) |
| 🪣 Fülleimer | F | Zusammenhängende Fläche füllen |
| 🔍 Pipette | I / Alt+Klick | Farbe eines Pixels aufnehmen |
| ╱ Linie | L | Gerade Linie ziehen (Klicken + Ziehen) |
| ▢ Rechteck | R | Rechteck-Umriss zeichnen (Klicken + Ziehen) |
| ◯ Kreis | C | Kreis-Umriss zeichnen (Klicken + Ziehen) |
| ▪ Gefülltes Rechteck | — | Ausgefülltes Rechteck zeichnen |
| ● Gefüllter Kreis | — | Ausgefüllten Kreis zeichnen |
💡 Markieren-Tool: Ziehe einen Bereich auf, dann klicke und ziehe innerhalb der Markierung um sie zu verschieben. Drücke Esc oder wechsle das Werkzeug um die Markierung zu bestätigen.
💡 Farbpipette: Drücke I um zur Pipette zu wechseln — nach dem Pick kehrt das vorherige Werkzeug automatisch zurück. Alternativ Alt+Klick direkt auf dem Canvas ohne Tool-Wechsel. Rechtsklick setzt die Sekundärfarbe.
Farben & Palette
| Aktion | Steuerung |
|---|
| Primärfarbe wählen | Linksklick auf Palette — schwarzer Rahmen |
| Sekundärfarbe wählen | Rechtsklick auf Palette — weißer Rahmen |
| Mit Sekundärfarbe zeichnen | Rechtsklick auf Canvas (außer Radierer) |
| Palette wechseln | Dropdown über der Palette — Klassisch, Pastel, Neon, NES, PICO-8, DB16, Solarized, Monokai, Gameboy, C64 |
| Eigene Farbe auswählen | Linksklick auf einen der 4 Slots im ✦ eigen-Bereich rechts |
| Eigene Farbe ändern | Doppelklick auf einen dieser Slots — öffnet den Farbwähler |
Das Farbfeld oben links zeigt beide Farben: Primär (vorne) und Sekundär (hinten). Die eigenen Farben bleiben beim Palette-Wechsel erhalten und werden gespeichert.
Canvas-Aktionen
| Aktion | Steuerung |
|---|
| Horizontal spiegeln | ↔ Button in der Werkzeugleiste |
Navigation
| Aktion | Steuerung |
|---|
| Zoomen | Mausrad oder +/− Buttons |
| Verschieben | Leertaste + Ziehen oder Mausrad drücken + Ziehen |
| Ansicht zurücksetzen | ↺ Button |
| Rückgängig | Strg + Z |
| Wiederholen | Strg + Y |
Sprite speichern
- Gib einen Namen ein (nur Kleinbuchstaben und Unterstriche, z.B. mein_held)
- Klicke auf 💾 Speichern
- Das Sprite erscheint in der Liste rechts
Sprite im Spiel verwenden
Verwende den Sprite-Namen direkt in deinem Code:
# Eigenes Sprite als Figur
held ist neueFigur("mein_held")
setzeFigur(held, 100, 200)Größen
Du kannst zwischen drei Größen wählen:
- 16×16 — Klein, gut für Items oder einfache Objekte
- 32×32 — Standard, ideal für Spielfiguren
- 64×64 — Groß, für detaillierte Sprites
💡 Tipp: Deine Sprites werden automatisch gespeichert und sind auch nach dem Neuladen der Seite verfügbar!
● Ungespeicherte Änderungen: Wenn du ein Sprite bearbeitet aber noch nicht gespeichert hast, erscheint ein ● hinter dem Namen in der Liste. Beim Wechsel zu einem anderen Sprite oder beim Schließen des Editors wirst du gefragt, ob du wirklich wechseln möchtest.
⚠️ Hinweis: Reservierte Namen wie fuchs oder robert können nicht überschrieben werden.
✏️ Level-Editor
Mit dem Level-Editor kannst du Spielfelder visuell gestalten — ohne Code tippen zu müssen. Platziere Figuren, Plattformen und Hintergrundfarben direkt per Maus.
Editor öffnen
Klicke auf den ✏️ Level Button in der Menüleiste. Die Ansicht wechselt zum Level-Editor.
So ist der Editor aufgebaut
- Links — Baukasten: Ganz oben die 🖼️ Leinwand (das Level selbst: Größe, Welt, Hintergrund). Darunter unter Bauen alles, was im Spiel fest oder kletterbar ist: ▩ Block, ⛰️ Freiform (festen Boden frei malen) und 🪜 Klettern (senkrecht = Leiter, waagerecht = Hangelstange). Ganz unten deine Figuren als Kacheln; mit + Neu malst du im Sprite-Editor eine eigene.
- Mitte — dein Level: Darüber die Level-Reiter (Level 1, Level 2 … und + für ein neues Level) sowie die Schalter Raster und Kollision.
- Rechts — Inspector: Zeigt, was du angeklickt hast. Ist nichts angeklickt, erklärt er das gewählte Werkzeug — bei der 🖼️ Leinwand stellst du dort Spielfeld-Größe, große Welt und Hintergrund ein.
Was du im Editor machen kannst
| Aktion | Beschreibung |
|---|
| Figur setzen | Figur links im Baukasten anklicken, dann ins Spielfeld klicken |
| Block / Leiter zeichnen | Werkzeug wählen, dann im Spielfeld klicken und ziehen |
| Etwas auswählen | Direkt im Spielfeld anklicken. Liegen Dinge übereinander, wählt ein zweiter Klick auf das Ausgewählte das Objekt darunter |
| Verschieben | Anklicken und ziehen — unten steht dabei die genaue Position |
| Löschen | Rechtsklick, Entf oder 🗑 oben im Inspector |
| Duplizieren | ⧉ oben im Inspector |
| Umbenennen | Auf den Namen oben im Inspector klicken und tippen |
| Größe, Welt, Hintergrund | 🖼️ Leinwand oben im Baukasten (oder den aktiven Level-Reiter anklicken) |
| Rückgängig / Wiederholen | ↩ / ↪ unten links |
Der Inspector einer Figur
Oben stehen Bild und Name, darunter zwei Reiter:
- ⚙️ Eigenschaften: Ganz oben wählst du mit den Kacheln, was die Figur ist (Spieler, Gegner, NPC, Item, Ziel, Portal, Start oder keine Rolle). Darunter steht das Wichtigste dieser Rolle, z. B. Steuerung, Tempo und Leben. Seltener gebrauchte Einstellungen sind aufklappbar: 🎨 Aussehen, ✨ Extras (Werfen, Lava, Timer, Schutzzeit …) und 🧱 Kollision & Physik (Hitbox, Kugel, Kiste). Ein Punkt wie „2 an“ zeigt, dass dort etwas eingeschaltet ist.
- ⚡ Verhalten: Hier baust du WENN/DANN-Regeln — der Kern des Programmierens.
Zahlen stellst du überall gleich ein: mit den Pfeilen ‹ › (gedrückt halten wiederholt) oder durch Tippen.
▶ Schnell testen: Drücke einfach Start während der Level-Editor offen ist. Das Spiel startet automatisch im Vollbild und der Editor öffnet sich nach dem Stopp wieder — mit allen Elementen unverändert.
Figuren-Rollen
Jede Figur im Editor kann eine Rolle bekommen. Die Rolle bestimmt, welcher Code automatisch generiert wird:
| Rolle | Funktion |
|---|
| Spieler | Steuerung per Pfeiltasten oder WASD wird generiert |
| Gegner | Läuft bei Patrouille die Wegpunkte der Reihe nach ab, trifft den Spieler und zieht Leben ab. Nach einem Treffer blinkt der Spieler und ist kurz geschützt — die Dauer stellst du beim Spieler unter Schutzzeit (Sek.) ein |
| Sammel-Item | Kollision mit Spieler gibt Punkt und blendet Item aus |
| Ziel | Kollision mit Spieler beendet das Spiel mit „Gewonnen!" |
| Portal | Kollision wechselt zu einem anderen Level (siehe Multi-Level) |
| Spawner | Markiert eine Startposition in einem Level — der Spieler erscheint hier beim Eintritt |
| NPC | Sprechbare Figur — Dialog-Text eingeben, Spieler öffnet ihn mit E |
| Keine | Figur wird platziert, aber kein Code generiert |
🖼️ Leinwand: Hintergrund
Der Hintergrund hat zwei Ebenen: unten eine Farbe, darüber dein Gemaltes. Beides stellst du bei der 🖼️ Leinwand ein. Mit 🖌️ Hintergrund frei malen malst du wie in Paint — nur Deko, nicht fest; Figuren sind dabei ausgeblendet, ✓ Fertig gemalt bringt dich zurück. Eine andere Farbe ändert nur die untere Ebene, dein Gemaltes bleibt. 🗑️ Gemaltes löschen entfernt nur das Gemalte. Beim Malen findest du dieselben Werkzeuge wie im Sprite-Editor (Stift, Radierer, Fülleimer, Pipette, Linie, Rechteck, Kreis), die gleichen Farbpaletten-Themes und deine eigenen Farben. Jeder Strich lässt sich mit ↩ rückgängig machen.
⛰️ Freiform: festen Boden malen
Mit ⛰️ Freiform im Baukasten malst du festen Boden — oben im Inspector steht dabei groß „Wird fest“. Alles, was du so malst, wird im Spiel zur Plattform: Figuren laufen darauf (auch Hügel hoch und runter), stoßen an gemalte Wände und Decken, Kugeln rollen daran ab. Der Radierer gräbt Löcher und Höhlen. Deine Figuren siehst du dabei halbdurchsichtig, damit du den Boden passend malen kannst.
Körper & Physik: Kugeln und Kisten
Jede Figur (außer Spieler und Spawner) bekommt im Inspector unter Körper & Physik eine Form:
- ▢ Normal — wie bisher, bewegt sich nur durch ihre Rolle.
- ◯ Kugel — rollt Hänge hinunter, prallt ab und lässt sich vom Spieler anschubsen. Stelle Abprall (0 % = Stein, 90 % = Flummi) und Reibung ein. Zusammen mit der Rolle Gegner wird daraus ein rollender Felsbrocken, mit Sammel-Item eine rollende Münze.
- ▣ Kiste — ein fester Körper: Der Spieler kann darauf stehen und sie schieben. Kisten fallen herunter und landen auf dem, was darunter ist.
Ohne Schwerkraft schweben Kugeln und Kisten — gut für Billard oder Spiele von oben.
Löcher sprengen
In den WENN/DANN-Regeln gibt es die Aktion 💥 Loch sprengen (Zahl = Radius in Pixeln). Sie sprengt ein rundes Loch ins gemalte Gelände. Mit dem Auslöser berührt … Boden/Wand baust du zum Beispiel eine Bombe: „WENN berührt Boden/Wand DANN Loch sprengen 40 und verstecke mich“. Mit stoße an (Kugel) gibst du einer Kugel einen Schubs.
Kollision anzeigen
Der Schalter Kollision oben im Level-Editor zeigt alles, was im Spiel fest ist (pink: Blöcke, Gelände, Kisten), und die Hitboxen der Figuren (türkis, bei Kugeln als Kreis).
Treffer, Schutzzeit & Rückstoß
Beim Spieler stellst du ein, wie lange er nach einem Gegner-Treffer geschützt ist (Schutzzeit, er blinkt). Mit Rückstoß bei Treffer wird er zusätzlich vom Gegner weggestoßen — standardmäßig aus.
Hitbox
Bei jeder Figur stellst du im Inspector unter Hitbox ein, welcher Rand (in % von links, rechts, oben, unten) bei Kollisionen nicht zählt. Mit den Pfeilen ‹ › änderst du die Werte in 5er-Schritten (gedrückt halten wiederholt), tippen geht auch. ✨ Auto zieht die durchsichtigen Ränder deines Sprites automatisch ab, ↺ setzt die Hitbox wieder auf das ganze Bild. Die ausgewählte Figur zeigt ihre Hitbox als gestricheltes Rechteck. So musst du beim Malen von Sprites keine Rücksicht auf leere Ränder nehmen.
Laufweg von Gegnern
Bei Patrouille klickst du auf ✏️ Laufweg bearbeiten. Klick aufs Spielfeld setzt Wegpunkte, die du verschieben kannst. Einen gewählten Wegpunkt entfernst du mit Entf oder dem Button 🗑️ Wegpunkt löschen.
Werfen
Bei der Spieler-Rolle kannst du Werfen aktivieren. Der Spieler wirft dann mit der Leertaste ein Objekt. Im generierten Code heißen die Variablen wurf und wurfAktiv — die kannst du im eigenen Code direkt nutzen.
Multi-Level
Über das + neben den Level-Reitern über dem Spielfeld kannst du mehrere Level erstellen. So funktioniert das System:
- Der Spieler aus Level 1 wird global mitgenommen — seine Leben und Variablen bleiben beim Level-Wechsel erhalten
- Jedes Level hat seine eigenen Gegner, Plattformen, Portale und Hintergründe
- Ein Level löschst du mit dem × am Level-Reiter — vorher kommt eine Sicherheitsabfrage. Die übrigen Level werden danach automatisch neu durchnummeriert (level1, level2, …), Portale zeigen weiterhin auf dasselbe Level. Portale, deren Ziel gelöscht wurde, musst du neu einstellen
- Ein Portal in Level 1 kann auf einen Spawner in Level 2 zeigen — der Spieler erscheint dann genau dort
- Es gibt nur eine einzige spielSchleife für alle Level. Dein eigener Code läuft global und gilt für alle Level
- Level-spezifische Logik steht in wenn _aktuellesLevel = 2 dann ... ende Blöcken — so kannst du selbst Level-eigene Trigger bauen
💡 Eigener Level-Wechsel: Du kannst Level auch per Code wechseln:
_naechstesLevel ist 2 — wechselt zum nächsten Frame zu Level 2.
Zum Beispiel für einen Timer: wenn spielZeit() > 30 dann _naechstesLevel ist 2 ende
↔️ Sprite spiegeln: Bei der Rolle Spieler gibt es die Option „Sprite bei Links/Rechts spiegeln". Ist sie aktiv, dreht der Sprite automatisch um wenn der Spieler die Richtung wechselt — ohne extra Code. Für Plattformer ist diese Option standardmäßig aktiviert.
Wie der Level-Editor mit dem Code zusammenarbeitet
Der Editor liest deinen Code und erkennt automatisch:
- Spielfeldgröße (spielfeld())
- Hintergrundfarbe (hintergrund())
- Figuren (neueFigur(), setzeFigur())
- Plattformen (plattform())
- Rollen aus dem # @editor Metadaten-Kommentar
Wenn du im Editor etwas änderst, wird der Setup-Block deines Codes automatisch aktualisiert. Dein eigener Code innerhalb der spielSchleife bleibt erhalten.
Vorlagen
Über den 📋 Vorlagen Button kannst du fertige Spielvorlagen laden. Manche Vorlagen (z.B. Space Invaders, Ausweich-Spiel) enthalten komplexe eigene Spielmechaniken und sind bewusst nicht mit dem Level-Editor kompatibel.
⚠️ # @no-editor
Wenn dein Code die Zeile # @no-editor enthält, ist der Level-Editor gesperrt. Das schützt Spielmechaniken vor unbeabsichtigtem Überschreiben.
Entferne diese Zeile aus dem Code, wenn du den Editor dennoch nutzen möchtest — aber achte darauf, dass manche Spielmechaniken danach nicht mehr funktionieren könnten.
💡 Tipp: Starte mit einer Vorlage die den Level-Editor unterstützt (z.B. Jump'n'Run oder Fang-Spiel) und passe dann das Spielfeld nach deinen Vorstellungen an!
🔄 Steuerung & Spielschleife
Was ist eine Spielschleife?
Ein Spiel läuft in einer Endlosschleife: Jede Runde (Frame) wird geprüft, welche Tasten gedrückt sind, dann werden Figuren bewegt und alles neu gezeichnet. Das passiert ca. 60 mal pro Sekunde!
Spielschleife erstellen
spielfeld(400, 300)
hintergrund("#87CEEB")
held ist neueFigur("fuchs")
setzeFigur(held, 200, 150)
spielSchleife
wenn tasteGedrückt("ArrowRight") dann
bewegeFigur(held, 3, 0)
ende
wenn tasteGedrückt("ArrowLeft") dann
bewegeFigur(held, -3, 0)
ende
endeTastennamen
| Taste | Name |
|---|
| Pfeiltasten | "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight" |
| Leertaste | " " |
| Buchstaben | "a", "b", ... "z" |
Klick-Erkennung
wenn figurGeklickt(held) dann
sag "Du hast den Fuchs angeklickt!"
ende
💡 Tipp: Denke in Frames! Jeder Durchlauf der Spielschleife ist ein einzelnes Bild.
⚡ Physik & Kollision
Schwerkraft
Mit schwerkraft() fallen Figuren nach unten — wie in einem echten Jump&Run!
spielfeld(400, 300)
held ist neueFigur("fuchs")
setzeFigur(held, 200, 50)
schwerkraft(held, 0.5)
spielSchleife
wenn tasteGedrückt(" ") dann
figurSprung(held, 10)
ende
endeSpringen
| Befehl | Beschreibung |
|---|
| schwerkraft(figur, stärke) | Schwerkraft aktivieren |
| figurSprung(figur, kraft) | Figur springen lassen |
| figurAmBoden(figur) | Prüft ob Figur am Boden ist |
Kollision
wenn kollidiert(held, gegner) dann
sag "Getroffen!"
spielEnde("Game Over!")
ende| Befehl | Beschreibung |
|---|
| kollidiert(a, b) | Prüft Kollision zwischen zwei Figuren |
| rechteckKollision(x1,y1,b1,h1, x2,y2,b2,h2) | Prüft Rechteck-Kollision |
| spielEnde(text) | Spiel beenden mit Nachricht |
Plattformen
plattform(100, 250, 200, 20) # x, y, breite, höhe
plattform(350, 180, 150, 20)
| Befehl | Beschreibung |
|---|
| plattform(x, y, b, h) | Plattform erstellen |
| entfernePlattform(id) | Plattform entfernen |
✨ Formen, Sound & Partikel
Formen zeichnen
zeichneRechteck(50, 50, 100, 60, "#FF6347")
zeichneKreis(200, 150, 40, "#4169E1")
zeigeText("Punkte: 42", 10, 20, 18, "#FFFFFF")| Befehl | Beschreibung |
|---|
| zeichneRechteck(x, y, b, h, farbe) | Rechteck zeichnen |
| zeichneKreis(x, y, r, farbe) | Kreis zeichnen |
| zeigeText(text, x, y, größe, farbe) | Text auf Spielfeld anzeigen |
Sound
spieleSound("münze") # Münze / Item einsammeln
spieleSound("sprung") # Sprung
spieleSound("treffer") # Schaden erleiden
spieleSound("punkt") # Punkt / Erfolg
spieleSound("klick") # Button antippen
spieleSound("fehler") # Falsche Aktion
spieleSound("gewonnen") # Spiel gewonnen
spieleSound("verloren") # Spiel verlorenPartikel-System
Erzeuge visuelle Effekte wie Explosionen, Funken oder Konfetti!
# Vordefinierte Effekte
partikel(400, 300, "explosion") # Explosion
partikel(200, 100, "funken") # Funken-Effekt
partikel(300, 200, "konfetti") # Konfetti
partikel(150, 300, "rauch") # Rauch
partikel(400, 400, "feuer") # Feuer
partikel(250, 150, "sterne") # Sterne
partikel(500, 300, "wasser") # Wasser-Spritzer
# Eigener Partikel-Effekt
partikelEffekt(x, y, anzahl, tempo, dauer, größe, farbe)
partikelEffekt(300, 200, 50, 4, 60, 5, "#FF00FF")
| Befehl | Beschreibung |
|---|
| partikel(x, y, typ) | Partikel-Effekt erzeugen |
| partikelEffekt(x, y, n, v, d, s, f) | Eigener Effekt (Anzahl, Tempo, Dauer, Größe, Farbe) |
| partikelLöschen() | Alle Partikel entfernen |
Verfügbare Effekt-Typen:
explosion — Orange/gelbe Explosionfunken — Goldene Funkenrauch — Aufsteigender Rauchkonfetti — Buntes Konfettifeuer — Aufsteigende Flammensterne — Glitzernde Sternewasser — Wasser-Spritzer
💡 Tipp: Kombiniere Formen und Figuren für Punkte-Anzeigen, Lebensbalken oder Hintergründe. Partikel-Effekte machen Treffer und Sammel-Aktionen spektakulärer!
Snake mit Arrays bauen
Snake baust du mit zwei Listen für Segmentpositionen. Index 0 = Schwanz, letzter Index = Kopf:
# Schwanz → Kopf (Index 0 = Schwanz, letzter = Kopf)
segX ist [8, 9, 10]
segY ist [10, 10, 10]
# Bewegung pro Schritt:
# 1. Schwanz entfernen (Index 0)
entfernen(segX, 0)
entfernen(segY, 0)
# 2. Neuen Kopf hinten anfügen
anhängen(segX, segX[länge(segX) - 1] + dx)
anhängen(segY, segY[länge(segY) - 1] + dy)
# Kollision mit eigenem Körper prüfen
letzterIdx ist länge(segX) - 1
kopfX ist segX[letzterIdx]
kopfY ist segY[letzterIdx]
i ist 0
solange i < letzterIdx dann
wenn segX[i] = kopfX und segY[i] = kopfY dann
spielEnde("Treffer!")
ende
i ist i + 1
endeDas komplette Beispiel findest du unter Beispiele → GameFuchs → Snake (Arrays).
🗺️ Multi-Level, NPC & Globaler Zustand
Multi-Level
Mit dem Level-Editor (✏️ Level) kannst du mehrere Level erstellen. Zwei spezielle Variablen steuern den Level-Wechsel:
| Variable | Bedeutung |
|---|
| _aktuellesLevel | Nummer des aktuellen Levels (nur lesen) |
| _naechstesLevel ist 2 | Level wechseln (auf Zahl setzen) |
# Level-spezifische Logik
wenn _aktuellesLevel = 1 dann
zeigeText("Level 1", 10, 25, 18, "weiß")
ende
wenn _aktuellesLevel = 2 dann
zeigeText("Level 2 — Vorsicht!", 10, 25, 18, "orange")
ende
# Level per Code wechseln
wenn held.x > 590 dann
_naechstesLevel ist 2
endeGlobaler Zustand
Variablen werden beim Level-Wechsel zurückgesetzt. Mit globalSetzen und globalHolen bleiben Werte erhalten:
# Am Ende eines Levels speichern:
globalSetzen("punkte", punkte)
globalSetzen("leben", leben)
# Am Anfang des nächsten Levels laden:
punkte ist globalHolen("punkte", 0)
leben ist globalHolen("leben", 3)| Befehl | Beschreibung |
|---|
| globalSetzen("name", wert) | Wert über Level-Wechsel hinaus speichern |
| globalHolen("name", standard) | Gespeicherten Wert laden (Standardwert optional) |
NPC-Gespräche
Mit npcInteraktion kannst du Figuren als sprechbare NPCs einrichten. Kommt der Spieler nahe genug, erscheint ein [E] sprechen-Badge. Drückt der Spieler E, öffnet sich ein Dialog.
# Jeden Frame in der Spielschleife aufrufen:
npcInteraktion(held, dorfbewohner, "Hallo! Ich bin Robert. Schön, dich zu sehen!")
# Mehrere NPCs möglich:
npcInteraktion(held, npc1, "Ich bin NPC 1.")
npcInteraktion(held, npc2, "Ich bin NPC 2.")
| Befehl | Beschreibung |
|---|
| npcInteraktion(spieler, npc, "text") | NPC-Dialog verwalten (jeden Frame aufrufen) |
- E (in der Nähe) — Dialog öffnen
- E (während Schreiben) — Text sofort anzeigen
- E (nach Schreiben) — Dialog schließen
💡 Tipp: NPCs können auch über den Level-Editor eingerichtet werden — wähle die Rolle NPC 💬 und trage den Dialog-Text direkt ein.
📚 GameFuchs Befehls-Referenz
Spielfeld & Hintergrund
| Befehl | Beschreibung |
|---|
| spielfeld(breite, höhe) | Spielfeld erstellen |
| hintergrund(farbe) | Hintergrundfarbe setzen |
| hintergrundBild("name") | Sprite als Hintergrundbild setzen |
Figuren
| Befehl | Beschreibung |
|---|
| neueFigur(name) | Neue Figur erstellen, gibt ID zurück |
| setzeFigur(figur, x, y) | Figur absolut positionieren |
| bewegeFigur(figur, dx, dy) | Figur relativ bewegen |
| figurGröße(figur, breite, höhe) | Figurgroße setzen |
| figurSichtbar(figur, wahr/falsch) | Figur zeigen oder verstecken |
| figurBild(figur, "name") | Figur-Bild wechseln |
| figurSpiegeln(figur, wahr/falsch) | Figur horizontal spiegeln |
| figurGeklickt(figur) | Prüft ob Figur angeklickt wurde |
| figur.x / figur.y | Position der Figur lesen |
| figur.w / figur.h | Größe der Figur lesen |
| figur.sichtbar | Sichtbarkeit der Figur lesen |
Spielschleife & Steuerung
| Befehl | Beschreibung |
|---|
| spielSchleife ... ende | Spielschleife starten (60x/Sek) |
| tasteGedrückt(taste) | Prüft ob Taste gedrückt ist |
| spielEnde(text) | Spiel beenden, Endscreen anzeigen |
| spielPause() | Spielschleife pausieren |
| spielWeiter() | Pausiertes Spiel fortsetzen |
| spielNeustart() | Gesamtes Programm neu starten |
| spielZeit() | Sekunden seit Spielstart |
Physik
| Befehl | Beschreibung |
|---|
| schwerkraft(figur, stärke) | Schwerkraft aktivieren |
| figurSprung(figur, kraft) | Figur springen lassen |
| figurAmBoden(figur) | Prüft ob Figur am Boden steht |
| figurAmRand(figur) | Prüft ob Figur den Spielfeldrand berührt |
| kollidiert(a, b) | Kollision zwischen zwei Figuren |
| rechteckKollision(figur, x, y, b, h) | Kollision mit einem Rechteck prüfen |
| plattform(x, y, b, h, farbe) | Plattform erstellen, gibt ID zurück |
| entfernePlattform(id) | Plattform entfernen |
Zeichnen & Text
| Befehl | Beschreibung |
|---|
| zeichneRechteck(x, y, b, h, farbe) | Gefülltes Rechteck zeichnen |
| zeichneKreis(x, y, r, farbe) | Gefüllten Kreis zeichnen |
| zeigeText(text, x, y) | Text anzeigen |
| zeigeText(text, x, y, größe, farbe) | Text mit Größe und Farbe anzeigen |
| textGröße(größe) | Standard-Schriftgröße setzen |
| textFarbe("farbe") | Standard-Textfarbe setzen |
Sound
| Befehl | Beschreibung |
|---|
| spieleSound("münze") | Münze / Item einsammeln |
| spieleSound("sprung") | Sprung |
| spieleSound("treffer") | Schaden erleiden |
| spieleSound("punkt") | Punkt / Erfolg |
| spieleSound("klick") | Button / Figur antippen |
| spieleSound("fehler") | Falsche Aktion |
| spieleSound("gewonnen") | Spiel gewonnen |
| spieleSound("verloren") | Spiel verloren |
Partikel
| Befehl | Beschreibung |
|---|
| partikel(x, y, typ) | Vordefinierter Effekt: explosion, funken, rauch, konfetti, feuer, sterne, wasser |
| partikelEffekt(x, y, anzahl, tempo, dauer, größe, farbe) | Eigener Partikel-Effekt |
| partikelLöschen() | Alle Partikel entfernen |
Multi-Level & Globaler Zustand
| Befehl / Variable | Beschreibung |
|---|
| _aktuellesLevel | Aktuelle Level-Nummer (lesen) |
| _naechstesLevel ist 2 | Zu Level 2 wechseln |
| globalSetzen("name", wert) | Wert über Level-Wechsel hinaus speichern |
| globalHolen("name", standard) | Gespeicherten Wert laden |
NPC
| Befehl | Beschreibung |
|---|
| npcInteraktion(spieler, npc, "text") | NPC-Dialog (jeden Frame in Spielschleife aufrufen) |
FuchsPlattform