🚀 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
📋 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)
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
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 ... ... ende | Bedingungs-Schleife |
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 |
Operatoren
Arithmetik: + - * /
Vergleich: = != < > <= >=
Logik: und oder
🎮 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".
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 |
| ╱ Linie | L | Gerade Linie ziehen (Klicken + Ziehen) |
| ▢ Rechteck | R | Rechteck zeichnen (Klicken + Ziehen) |
| ◯ Kreis | C | Kreis zeichnen (Klicken + Ziehen) |
💡 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.
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!
⚠️ Hinweis: Reservierte Namen wie fuchs oder robert können nicht überschrieben werden.
🔄 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 |
🐍 Schlange & Formen
Snake-System
Erstelle ein Snake-Spiel mit eingebauten Befehlen:
schlange ist neueSchlange(200, 150, 5)
spielSchleife
wenn tasteGedrückt("ArrowUp") dann
schlangeRichtung(schlange, "hoch")
ende
bewegeSchlange(schlange)
ende| Befehl | Beschreibung |
|---|
| neueSchlange(x, y, länge) | Neue Schlange erstellen |
| schlangeRichtung(s, richtung) | Richtung setzen ("hoch", "runter", "links", "rechts") |
| bewegeSchlange(s) | Schlange einen Schritt bewegen |
| schlangeWachsen(s) | Schlange wächst um 1 Segment |
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("collect") # Einsammel-Sound
spieleSound("jump") # Sprung-SoundPartikel-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, um Punkte-Anzeigen, Lebensbalken oder Hintergründe zu erstellen! Partikel-Effekte machen Treffer und Sammel-Aktionen viel spektakulärer!
📚 GameFuchs Befehls-Referenz
Spielfeld & Hintergrund
| Befehl | Beschreibung |
|---|
| spielfeld(breite, höhe) | Spielfeld erstellen |
| hintergrund(farbe) | Hintergrundfarbe setzen |
Figuren
| Befehl | Beschreibung |
|---|
| neueFigur(name) | Neue Figur erstellen |
| setzeFigur(figur, x, y) | Figur positionieren |
| bewegeFigur(figur, dx, dy) | Figur bewegen (relativ) |
| figurGröße(figur, faktor) | Figur skalieren |
| figurGeklickt(figur) | Prüft ob Figur angeklickt wurde |
| figur.x / figur.y | Position der Figur abfragen |
| figur.breite / figur.höhe | Größe der Figur abfragen |
| figur.sichtbar | Sichtbarkeit der Figur abfragen |
Spielschleife & Steuerung
| Befehl | Beschreibung |
|---|
| spielSchleife ... ende | Spielschleife starten |
| tasteGedrückt(taste) | Prüft ob Taste gedrückt |
| spielEnde(text) | Spiel beenden |
Physik
| Befehl | Beschreibung |
|---|
| schwerkraft(figur, stärke) | Schwerkraft aktivieren |
| figurSprung(figur, kraft) | Figur springen lassen |
| figurAmBoden(figur) | Prüft ob Figur am Boden |
| kollidiert(a, b) | Kollision zwischen Figuren |
| rechteckKollision(...) | Rechteck-Kollision prüfen |
| plattform(x, y, b, h) | Plattform erstellen |
| entfernePlattform(id) | Plattform entfernen |
Zeichnen
| 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 anzeigen |
Snake-System
| Befehl | Beschreibung |
|---|
| neueSchlange(x, y, länge) | Schlange erstellen |
| schlangeRichtung(s, richtung) | Richtung setzen |
| bewegeSchlange(s) | Schlange bewegen |
| schlangeWachsen(s) | Schlange verlängern |
Sound
| Befehl | Beschreibung |
|---|
| spieleSound(name) | Sound abspielen |
Partikel
| Befehl | Beschreibung |
|---|
| partikel(x, y, typ) | Partikel-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 |