🎮 Spiele & Künstliche Intelligenz

Ein XO-Spiel mit Minimax erstellen

CoderDojo Workshop

CoderDojo Logo
🏎️

Mario Kart

FIFA

🎮

Metin2

⛏️

Minecraft

🎯

Fortnite

🎲

Roblox

🚀

Among Us

Pokémon

🍄

Super Mario

🎮 Welche Spiele spielt ihr?

🤖 KI in Computerspielen

👾 Gegner im Spiel

Computer-Gegner in Mario Kart, Minecraft Mobs

🧠 Clevere Entscheidungen

Schach-Computer, die besser spielen als Menschen!

🎯 Vorhersagen

Computer kann deine nächsten Züge voraussehen

❌⭕ Wer kann uns erinnern,
wie TicTacToe geht?

X
O
X
O
X
O
X

X gewinnt! 🎉

🎮 Spiele gegen den Computer!

Wähle Schwierigkeitsgrad:

Du bist X - Klicke auf ein Feld!

💭 Wie können wir das bauen?

🤔

Wir brauchen eine Sprache, um mit dem Computer zu sprechen!

💻

Das nennt man Programmierung

🗣️

Es gibt viele verschiedene Programmiersprachen

🌍 Verschiedene Programmiersprachen

Alle machen dasselbe - nur anders geschrieben!

🐍 Python

name = "Max"
print("Hallo " + name)

☕ Java

String name = "Max";
System.out.println("Hallo " + name);

📜 JavaScript

let name = "Max";
console.log("Hallo " + name);

💎 Ruby

name = "Max"
puts "Hallo #{name}"

Ausgabe ist immer: Hallo Max 👋

🐍 Unser Python Code

Wir programmieren mit Python und Turtle Graphics!

📋 Was macht unser Code?

1️⃣ Spielfeld zeichnen

Das 3x3 Gitter mit Linien

2️⃣ X und O zeichnen

Symbole in den Feldern anzeigen

3️⃣ Gewinner prüfen

Hat jemand 3 in einer Reihe?

4️⃣ KI-Zug berechnen

Minimax findet den besten Zug

🎯 Heute werdet ihr: Den Code lesen, verstehen und anpassen!

💻 So sieht der Code aus!

Das Spiel Schritt für Schritt

🎨 1. Spielfeld vorbereiten

# Erstelle ein leeres Board
board = [None, None, None,
         None, None, None,
         None, None, None]

# Zeichne das Spielfeld
drawBoard("black")

🎮 2. Spielerzug verarbeiten

# Spieler klickt auf Position 4
board[4] = 'X'

# Zeichne X an Position 4
drawX("blue")

🔍 3. Gewinner prüfen

def check_winner(board):
    # Prüfe alle Gewinnmöglichkeiten
    lines = [[0,1,2], [3,4,5], [6,7,8],
             [0,3,6], [1,4,7], [2,5,8],
             [0,4,8], [2,4,6]]

    for line in lines:
        if board[line[0]] == board[line[1]] == board[line[2]]:
            return board[line[0]]  # Gewinner!
    return None  # Noch kein Gewinner

🤖 4. KI macht ihren Zug

# KI findet besten Zug mit Minimax
best_move = get_ai_move()

# Setze O an bester Position
board[best_move] = 'O'

# Zeichne O
drawO("red")

🔄 5. Spiel läuft weiter

# Immer wieder:
while not game_over:
    # Spieler → KI → Prüfen → Weiter

    if check_winner(board):
        print("Gewonnen!")
        game_over = True

🎨 Programmieren ist kreativ!

Ändere die Farben mit Hex-Codes!

X
O
X
O
X
O
X
O
X

💡 Tipp: Hex-Codes sind Farben in der Programmierung!

Beispiele: #FF0000 (Rot), #00FF00 (Grün), #0000FF (Blau)

📝 So geht das im Code!

Farben mit Variablen speichern

💡 Was sind Variablen?

Eine Variable ist wie eine Box mit einem Namen,
in der wir etwas speichern können!

x_farbe
"blue"
o_farbe
"red"
board_farbe
"black"

🎨 Farben im Code setzen:

# Variablen erstellen und Farben speichern
x_farbe = "blue"
o_farbe = "red"
board_farbe = "black"

# Variablen verwenden
def drawX(row, col):
    pen.color(x_farbe)  # ← Verwendet die Variable!
    # ... zeichnet X

def drawO(row, col):
    pen.color(o_farbe)  # ← Verwendet die Variable!
    # ... zeichnet O

def drawBoard():
    pen.color(board_farbe)  # ← Verwendet die Variable!
    # ... zeichnet das Spielfeld

✨ Vorteil: Farben ändern ist jetzt einfach!

# Nur eine Zeile ändern:
x_farbe = "purple"  # Jetzt sind alle X lila! 💜

🎨 Challenge 1: Farben ändern!

⏱️ 10 Minuten - Jetzt bist du dran!

🎯 Deine Aufgabe:

Ändere die Farben im Code und mache das Spiel zu deinem eigenen!

1

Finde die Farben-Variablen

x_farbe = "blue"
o_farbe = "red"
board_farbe = "black"
2

Ändere die Farben

Wähle deine Lieblingsfarben:

  • "purple", "orange", "pink"
  • Oder Hex-Codes: "#FF5733", "#33FF57"
3

Teste dein Spiel!

Führe den Code aus und sieh dir deine neuen Farben an! 🎨

💡 Bonus:

Ändere auch die Hintergrundfarbe des Bildschirms:

screen.bgcolor("lightblue")

🔄 Das Problem: Falsche Symbole!

Lass uns einen Bug finden!

Was passiert gerade:

X
X

🐛 Beide Züge sind X!

Was sollte passieren:

X
O

✅ Spieler: X, KI: O

Das Problem: Der Code zeichnet IMMER X, egal wer dran ist!

🤔 Was ist if-else?

Entscheidungen im Code treffen

Computer müssen Entscheidungen treffen können!

🚦

Wie eine Ampel

if ampel == "grün":
    fahren()
else:
    stehenbleiben()

Wie beim Wetter

if wetter == "Regen":
    regenschirm_nehmen()
else:
    sonnenbrille_nehmen()

Die Struktur:

if BEDINGUNG:
    Code wenn WAHR
else:
    Code wenn FALSCH

✅ So lösen wir das Problem!

if-else für unser Spiel

Vorher (❌ immer X):

board[pos] = 'X'    # oder 'O'
draw_x(row, col)    # ← IMMER X! BUG!
⬇️

Nachher (✅ richtig!):

board[pos] = 'X'    # oder 'O'

if board[pos] == 'X':
    draw_x(row, col)      # Zeichne X
else:
    draw_o(row, col)      # Zeichne O

🎯 Jetzt wird geprüft: Was steht wirklich im Board?

🔄 Challenge 2: Symbole korrigieren!

⏱️ 15 Minuten

🐛

Finde den Bug und repariere ihn!

📝 Deine Aufgabe:

  • Öffne challenge2_symbole.py
  • Suche nach # TODO Kommentaren
  • Ersetze die Zeile die immer draw_x() aufruft
  • Nutze if-else um zu prüfen: X oder O?

💡 Tipp: Es gibt ZWEI Stellen - Spielerzug UND KI-Zug!

🎉 Gewonnen? Feier es!

Animationen machen Spiele spannend

Wenn jemand gewinnt, können wir:

🎆

Feuerwerk

Bunte Linien in alle Richtungen!

Sterne

Zeichne goldene Sterne!

🌈

Farben

Ändere den Hintergrund!

Idee: Kombiniere mehrere Effekte für eine coole Gewinn-Animation!

🔁 Schleifen: Wiederhole Code!

Wie man Feuerwerk zeichnet

Eine for-Schleife wiederholt Code mehrmals:

def draw_firework(x, y):
    colors = ["red", "yellow", "blue", "green", "purple"]

    for i in range(36):              # Wiederhole 36 mal
        pen.color(random.choice(colors))  # Zufällige Farbe
        pen.goto(x, y)               # Zurück zum Zentrum
        pen.forward(50)              # Linie zeichnen
        pen.right(10)                # Drehe 10 Grad

Was passiert:

  • 36 Linien werden gezeichnet
  • Jede Linie hat eine zufällige Farbe
  • Jede Linie dreht sich 10° weiter
  • 36 × 10° = 360° = voller Kreis!
💥
Ein Feuerwerk!

🎨 Challenge 3: Gewinn-Animation!

⏱️ 15 Minuten

🎉

Mach das Spiel bunter!

📝 Deine Aufgabe:

  • Öffne challenge3_animation.py
  • Finde die celebrate_win() Funktion
  • Zeichne Feuerwerk mit draw_firework()
  • Zeichne Sterne mit draw_star()
  • Ändere die Hintergrundfarbe!

💡 Bonus: Erfinde deine eigene Animation!

🔄 Nochmal spielen!

Was passiert beim Neustart?

❌ Spiel ist vorbei

X
X
X
O
O

Gewinner: X!

✅ Nach Neustart

Alles leer - neues Spiel!

🔄 Die reset_game() Funktion macht:

  • Board zurücksetzen (alle Felder leer)
  • Zeichnungen löschen
  • Spielfeld neu zeichnen
  • Nachricht anzeigen: "Neues Spiel!"

📦 Funktionen: Code-Bausteine!

Wiederverwendbarer Code

Funktionen sind wie Rezepte:

def reset_game():
    board = [None] * 9
    pen.clear()
    text_pen.clear()
    draw_board()
    show_message("Neues Spiel!")

1. Definition: def erstellt die Funktion

2. Name: reset_game beschreibt was sie tut

3. Code: Die Schritte die ausgeführt werden

4. Aufruf: reset_game() führt alles aus!

💡 Vorteil: Einmal schreiben, beliebig oft verwenden!

🔄 Challenge 4: Statistik hinzufügen!

⏱️ 15 Minuten

📊

Zähle Siege und Niederlagen!

📝 Deine Aufgabe:

  • Öffne challenge4_neustart.py
  • Finde die reset_game() Funktion
  • Verstehe was jede Zeile macht
  • BONUS: Füge Zähler hinzu:
    • games_played - Spiele gespielt
    • player_wins - Spieler-Siege
    • ai_wins - KI-Siege

💡 Tipp: Suche nach # TODO BONUS im Code!

💾 Wie speichern wir das Spielfeld?

Das Spielfeld digital verstehen

🎮 Das visuelle Spielfeld:

X 0
O 1
2
3
X 4
5
O 6
7
8
➡️

💻 Im Computer (Liste):

board = [
  'X',    # Position 0
  'O',    # Position 1
  None,   # Position 2 (leer)
  None,   # Position 3 (leer)
  'X',    # Position 4
  None,   # Position 5 (leer)
  'O',    # Position 6
  None,   # Position 7 (leer)
  None    # Position 8 (leer)
]

🔑 Wichtig zu wissen:

  • "b" in den Funktionen = board (das Spielfeld)
  • Eine Liste speichert alle 9 Felder
  • Positionen 0-8 statt 1-9 (Computer zählt ab 0!)
  • None = leeres Feld, 'X' oder 'O' = besetzt

📝 Der Python Code

Wichtige Code-Teile zum Verstehen

🎨 Farben und Zeichnen

def draw_x(row, col):
    pen.color("blue")  # ← Hier ändern!
    pen.pensize(4)
    # ... X zeichnen

def draw_o(row, col):
    pen.color("red")   # ← Hier ändern!
    pen.pensize(4)
    # ... O zeichnen

🔍 Gewinner prüfen

def check_winner(b):  # b = board (Spielfeld)
    lines = [
        [0,1,2], [3,4,5], [6,7,8],  # Reihen
        [0,3,6], [1,4,7], [2,5,8],  # Spalten
        [0,4,8], [2,4,6]             # Diagonal
    ]
    for line in lines:
        if b[line[0]] == b[line[1]] == b[line[2]]:
            return b[line[0]]  # Gewinner!

🤖 Minimax Algorithmus

def minimax(b, is_maximizing):  # b = board
    winner = check_winner(b)
    if winner == 'O':
        return 10  # KI gewinnt
    if winner == 'X':
        return -10  # Mensch gewinnt

    # Probiere alle Züge aus...
    # Wähle den besten!

🧠 Was ist Minimax?

1️⃣ Alle Möglichkeiten durchdenken

Computer probiert jeden möglichen Zug aus

2️⃣ In die Zukunft schauen

Was passiert nach diesem Zug? Und danach?

3️⃣ Beste Entscheidung wählen

Wählt den Zug mit der höchsten Gewinnchance

Der Computer denkt wie ein Schachspieler:
"Wenn ich das mache, dann machst du das, dann kann ich..."

🏆 Entwerfe deine eigene Strategie!

Teamwork - 20 Minuten

👥 Aufgabe für Teams (2-3 Personen):

🎯 Ziel: Eine unbesiegbare Strategie erfinden!

  • 1. Bildet 2er- oder 3er-Teams
  • 2. Überlegt: Wie spielt man am besten?
  • 3. Schreibt eure Strategie auf (Papier/Whiteboard)
  • 4. Testet sie gegeneinander!

💡 Denkanstöße:

🎯

Welches Feld ist am wichtigsten?
(Ecke? Mitte? Kante?)

🛡️

Wann musst du blockieren?
(Gegner hat 2 in einer Reihe?)

⚔️

Wann greifst du an?
(Zwei Gewinnmöglichkeiten schaffen?)

🔮

Wie viele Züge voraus denkst du?
(1, 2, 3... alle?)

🎬 Showtime - Der Wettbewerb!

15 Minuten

⚔️ Jetzt wird es ernst!

📋 Ablauf:

  1. Teams treten gegeneinander an

    Spielt mit eurer Strategie gegen andere Teams

  2. Erklärt eure Strategie während des Spiels

    "Ich spiele hier, weil..."

  3. Lernt von anderen

    Was machen die anderen besser?

  4. Teste gegen den Computer

    Schafft ihr es, gegen Minimax zu gewinnen?

🏅 Es geht nicht ums Gewinnen...

...sondern darum:

  • ✨ Strategisch zu denken
  • ✨ Aus Fehlern zu lernen
  • ✨ Zusammenzuarbeiten
  • ✨ Spaß zu haben!

💪 Die ultimative Herausforderung:

Kann jemand den Minimax-Algorithmus besiegen? 🤔

(Spoiler: Nicht wirklich... aber ein Unentschieden ist möglich! 😊)

💭 Was habt ihr heute gelernt?

🌟 Zusammenfassung & Ausblick

🚀 Was ihr heute gelernt habt:

  • ✅ Wie KI in Spielen funktioniert
  • ✅ Was Programmierung ist
  • ✅ Python Code lesen und anpassen
  • ✅ Der Minimax-Algorithmus
  • ✅ Spielstrategien entwickeln
  • ✅ Im Team programmieren

💻 Nächste Schritte:

  • 🐍 Lerne Python auf Trinket.io
  • 🎮 Erweitere dein XO-Spiel
  • 🤖 Probiere andere Algorithmen
  • 🌟 Baue 4-Gewinnt oder Schach!
  • 👥 Komm wieder zu CoderDojo!

Ihr könnt das! 💪

Jede:r Programmierer:in hat mal als Anfänger:in angefangen!

Danke fürs Mitmachen! 🎉