Dein erstes Spiel: Formen, Schleife, Tasten

Das lernst du

Formen und Text auf ein Spielfeld zeichnen
Verstehen, wie eine Spielschleife Bild für Bild arbeitet
Eine Figur mit den Pfeiltasten steuern und im Fenster halten

Ein Spiel ist ein Daumenkino

Ein Spiel zeigt viele Bilder pro Sekunde – wie ein Daumenkino. In jedem Bild ist alles ein kleines Stück anders. So sieht es aus, als ob sich etwas bewegt. In dieser Lektion baust du so ein Daumenkino selbst. Dafür gibt es bei Codelix ein kleines Spiele-Modul.

Das Spielfeld

Zuerst malst du ein einzelnes Bild. Der Punkt (0, 0) ist oben links. x wird nach rechts größer, y nach unten. Das ist anders als in der Mathematik, aber so machen es fast alle Spiele.

from codelix import spiel

spiel.fenster(400, 300)
spiel.rechteck(0, 250, 400, 50, "green")      # Wiese
spiel.kreis(330, 60, 35, "gold")              # Sonne
spiel.rechteck(80, 170, 80, 80, "tomato")     # Haus
spiel.text(10, 10, "Mein erstes Bild")

Befehl	Was er zeichnet
`spiel.fenster(400, 300)`	Spielfeld, 400 breit und 300 hoch
`spiel.rechteck(x, y, breite, hoehe, farbe)`	Rechteck, (x, y) ist die Ecke oben links
`spiel.kreis(x, y, radius, farbe)`	Kreis, (x, y) ist die Mitte
`spiel.linie(x1, y1, x2, y2, farbe)`	Linie von einem Punkt zum anderen
`spiel.text(x, y, "Hallo", farbe, groesse)`	Text

Farben sind englische Namen wie "red", "gold" oder "cyan" – oder Codes wie "#ff8800".

Die Spielschleife

Für Bewegung schreibst du eine Funktion. Sie malt ein Bild. spiel.starten(schritt) ruft sie dann 30 Mal pro Sekunde auf. Vor jedem Bild wird das Spielfeld leer gemacht.

from codelix import spiel

spiel.fenster(400, 300)
ball = {"x": 0, "y": 150}


def schritt():
    ball["x"] = ball["x"] + 3
    if ball["x"] > 400:
        ball["x"] = 0
    spiel.kreis(ball["x"], ball["y"], 15, "orange")


spiel.starten(schritt)

Drück auf Stopp, wenn du genug hast. Der Ball läuft sonst für immer.

Warum ein Dictionary? In ball stehen die Werte, die sich ändern. Weil schritt() nur die Werte im Dictionary ändert, klappt das ohne Extra-Befehl. Bei einer normalen Variable wie x = x + 3 müsstest du in der Funktion global x schreiben.

Steuern mit den Pfeiltasten

spiel.taste("links") ist True, solange du die Taste gedrückt hältst. Damit bewegst du eine Figur:

from codelix import spiel

spiel.fenster(400, 300)
spieler = {"x": 180}


def schritt():
    if spiel.taste("links"):
        spieler["x"] = spieler["x"] - 5
    if spiel.taste("rechts"):
        spieler["x"] = spieler["x"] + 5
    spiel.rechteck(spieler["x"], 260, 40, 20, "cyan")
    spiel.text(10, 10, "Pfeiltasten ← →", "white", 16)


spiel.starten(schritt)

So steuerst du: Nach dem Start hat das Spielfeld den Fokus, die Pfeiltasten gehen sofort. Klickst du daneben, klick einfach wieder aufs Spielfeld. Mit Esc verlässt du es. Auf dem Handy nimmst du die Knöpfe unter dem Spielfeld.

Es gibt diese Tasten: "links", "rechts", "oben", "unten", "leertaste", "enter" und "w", "a", "s", "d".

Probier es aus: Halt ← lange gedrückt. Der Spieler verschwindet links aus dem Bild! Genau das reparierst du in der Aufgabe.

Deine Aufgabe

Jetzt bist du dran

Der Spieler fährt schon mit ← und → hin und her. Ergänze zwei Dinge: 1. Mit ↑ und ↓ soll er sich auch nach oben und unten bewegen (5 Pixel pro Bild). 2. Er darf das Fenster nie verlassen: x bleibt zwischen 0 und 360, y zwischen 0 und 280 (das Fenster ist 400 × 300 groß, der Spieler 40 × 20).

from codelix import spiel

spiel.fenster(400, 300)
spieler = {"x": 180, "y": 140}


def schritt():
    if spiel.taste("links"):
        spieler["x"] = spieler["x"] - 5
    if spiel.taste("rechts"):
        spieler["x"] = spieler["x"] + 5
    # Hier fehlen oben und unten

    # Hier fehlen die Ränder

    spiel.rechteck(spieler["x"], spieler["y"], 40, 20, "cyan")


spiel.starten(schritt)

Denkanstoß
Kopiere den Block für links/rechts und ändere ihn: spiel.taste("oben") verkleinert y, spiel.taste("unten") vergrößert y.
Welcher Befehl hilft?
Prüfe nach dem Bewegen: if spieler["x"] < 0: spieler["x"] = 0 – und genauso für y.
Der Spieler ist 40 breit und 20 hoch. Damit er ganz im Fenster bleibt, darf x höchstens 400 − 40 = 360 sein.
Lass die letzte Zeile mit spiel.rechteck(...) in der Funktion stehen.

Lückencode – ergänze die ___

                        from codelix import spiel

spiel.fenster(400, 300)
spieler = {"x": 180, "y": 140}


def schritt():
    if spiel.taste("links"):
        spieler["x"] = spieler["x"] - 5
    if spiel.taste("rechts"):
        spieler["x"] = spieler["x"] + 5
    if ___:
        spieler["y"] = ___
    if ___:
        spieler["y"] = ___

    if ___:
        spieler["x"] = ___
    if ___:
        spieler["x"] = ___
    if ___:
        spieler["y"] = ___
    if ___:
        spieler["y"] = ___

    spiel.rechteck(spieler["x"], spieler["y"], 40, 20, "cyan")


spiel.starten(schritt)

Ohne Hinweise gelöst gibt es einen ⭐ auf deiner Fortschrittsseite.

Lösung anzeigen

Versuch es erst selbst – aus Fehlern lernt man am meisten. Hier ist eine mögliche Lösung:

from codelix import spiel

spiel.fenster(400, 300)
spieler = {"x": 180, "y": 140}


def schritt():
    if spiel.taste("links"):
        spieler["x"] = spieler["x"] - 5
    if spiel.taste("rechts"):
        spieler["x"] = spieler["x"] + 5
    if spiel.taste("oben"):
        spieler["y"] = spieler["y"] - 5
    if spiel.taste("unten"):
        spieler["y"] = spieler["y"] + 5

    if spieler["x"] < 0:
        spieler["x"] = 0
    if spieler["x"] > 360:
        spieler["x"] = 360
    if spieler["y"] < 0:
        spieler["y"] = 0
    if spieler["y"] > 280:
        spieler["y"] = 280

    spiel.rechteck(spieler["x"], spieler["y"], 40, 20, "cyan")


spiel.starten(schritt)