🐍 Python Lernen

1.1 Neues Projekt erstellen

Erstelle ein neues Projekt für die Web-Version:

cd C:\MeinePythonProjekte
uv init flappybird-web
cd flappybird-web

1.2 Dependencies installieren

Installiere Pygame und Pygbag:

uv add pygame pygbag

1.3 Projekt in VS Code öffnen

code .

2.1 Hauptdatei erstellen

Erstelle eine neue Datei main.py (nicht flappybird.py!):

2.2 Die wichtigsten Änderungen

1. Import von asyncio:

import asyncio  # Wichtig für Web-Export!

2. Async Main-Funktion:

async def main():
    # Spielcode hier

    while laeuft:
        # Spiellogik

        # WICHTIG: Diese Zeile am Ende der Schleife!
        await asyncio.sleep(0)

# Start mit asyncio
asyncio.run(main())

3. Maus-Support hinzufügen:

elif ereignis.type == pygame.MOUSEBUTTONDOWN:
    # Gleiche Aktion wie bei Leertaste
    vogel.springen()

3.1 Normal testen

Teste ob dein angepasster Code noch funktioniert:

uv run python main.py

3.2 Web-Server starten

Pygbag hat einen eingebauten Test-Server:

uv run pygbag .

Das startet einen lokalen Webserver. Nach ein paar Sekunden siehst du:

Serving on http://localhost:8000
Ready to test your game!

3.3 Im Browser öffnen

Öffne deinen Browser und gehe zu: http://localhost:8000

Das Spiel lädt jetzt im Browser! Es kann beim ersten Mal etwas dauern (30-60 Sekunden).

4.1 Build erstellen

Erstelle eine fertige Version für das Web:

uv run pygbag --build --version 0.9.2 src/

Das erstellt einen build Ordner mit allen nötigen Dateien.

4.2 Build-Inhalt verstehen

Im web-build Ordner findest du:

• index.html - Die Hauptseite
• python.js - Der Python-Interpreter für den Browser
• python.wasm - WebAssembly-Version von Python
• Weitere Dateien für das Spiel

4.3 Lokal testen

Du kannst die Build-Version lokal testen:

cd web-build
python -m http.server 8080

Öffne dann http://localhost:8080 im Browser.

5.1 GitHub-Konto erstellen

1. Gehe zu github.com
2. Klicke auf "Sign up" (Registrieren)
3. Wähle einen Benutzernamen (z.B. "max-mueller-2024")
4. Gib deine E-Mail-Adresse ein und erstelle ein Passwort
5. Bestätige deine E-Mail-Adresse

5.2 Neues Repository erstellen

1. Klicke auf das "+" Symbol oben rechts
2. Wähle "New repository"
3. Repository-Name: flappybird-web
4. Beschreibung: "Mein FlappyBird-Spiel im Browser"
5. Wähle "Public" (öffentlich)
6. Klicke auf "Create repository"

5.3 Dateien hochladen

1. Auf der Repository-Seite, klicke auf "uploading an existing file"
2. Öffne deinen web-build Ordner im Explorer
3. Wähle ALLE Dateien aus dem web-build Ordner
4. Ziehe sie auf die GitHub-Seite (Drag & Drop)
5. Warte, bis alle Dateien hochgeladen sind
6. Scrolle nach unten und klicke "Commit changes"

5.4 GitHub Pages aktivieren

1. Klicke oben auf "Settings" (Einstellungen)
2. Scrolle in der linken Sidebar zu "Pages"
3. Unter "Source", wähle "Deploy from a branch"
4. Unter "Branch", wähle "main" und "/ (root)"
5. Klicke auf "Save"
6. Warte 1-2 Minuten

5.5 Dein Spiel ist online!

Gehe zurück zur "Pages" Seite in den Settings. Du siehst jetzt einen grünen Box mit:

Your site is live at https://[dein-username].github.io/flappybird-web/

Klicke auf den Link oder öffne diese URL im Browser - dein Spiel läuft!

5.6 Änderungen hochladen (optional)

Wenn du dein Spiel später aktualisieren möchtest:

1. Gehe zu deinem Repository auf GitHub
2. Klicke auf die Datei, die du ändern möchtest (z.B. main.py)
3. Klicke auf das Stift-Symbol (Edit)
4. Mache deine Änderungen
5. Klicke auf "Commit changes"
6. Erstelle lokal einen neuen Build und lade die Dateien erneut hoch

Ladebildschirm verbessern

Du kannst die index.html anpassen für einen schöneren Ladebildschirm:

Performance-Tipps

• Reduziere die Anzahl der gezeichneten Objekte
• Vermeide große Bilder (nutze kleine Sprites)
• Sounds sparsam einsetzen
• FPS auf 30 reduzieren für schwächere Geräte: uhr.tick(30)

Mobile-Unterstützung

Für Touch-Geräte kannst du Touch-Events hinzufügen:

# Touch-Support
for ereignis in pygame.event.get():
    if ereignis.type == pygame.FINGERDOWN:
        vogel.springen()