Asteroids Game

Ziel:

• Asteroiden Game in verschiedenen Versionen Programmieren …
• … auf verschiedenen Plattformen.
• Code optimal Modellieren
• Model vs. View

Programmiere das Game Asteroids in einer einfachen Version in 45 Minuten: zu

• Spieler:in steuert Player (heller Pixel in unterster Reihe) mit Knöpfen
• Jeweils ein Asteroid (etw. weniger heller Pixel) fliegt von oben nach unten
• Player muss Asteroid ausweichen. Kollidiert dieser, ist Game Over!
• Erreicht Asteroid unteres Ende, wir ein neuer Asteroid in oberster Reihe an zufälliger $x-$Position erzeugt
• Speichere regelmässig!
• Hauptziele:
  • Das Spiel muss funktionieren (auch wenn es noch nicht perfekt ist)
  • Du hast es ganz alleine programmiert (siehe Spielregeln unten)

Spielregeln:

• Erlaubt:
  • Internet-Suche zu allg. Fragen bzgl. Programmierung & Micro:bit
  • Lehrperson fragen zu allg. Fragen
• nicht erlaubt:
  • Austausch mit echten und künstlichen Intelligenzen (also kein ChatGPT, Ausnahme: Lehrperson)
  • Internet-Suche zu Spiel-spezifischen Fragen (z.B. auf diesem Wiki)

Nach Challenge:

• Erstelle neues Repo auf GitHub mit Name asteroids_game.
• Gebe der LP (anschae) frei
• Füge dein Game mit Name asteroids_v01.py hinzu: add / commit / push

from microbit import *
import random
 
player_x = 2
delay = 200
 
asteroid = {
    "x" : random.randint(0,4),
    "y" : 0
}
 
t0 = running_time()
 
while True:
    # UPDATE ASTEROID
    t = running_time()
    if t - t0 >= delay:
        if asteroid['y'] < 4:
            asteroid['y'] += 1
        else:
            asteroid['x'] = random.randint(0,4)
            asteroid['y'] = 0
        t0 = t
 
    # UPDATE PLAYER
    if button_a.get_presses() and player_x > 0:
        player_x -= 1
    if button_b.get_presses() and player_x < 4:
        player_x += 1
 
    # CHECK COLLISIONS
    if asteroid['x'] == player_x and asteroid['y'] == 4:
        display.show(Image.SKULL)
        break
 
    # VIEW
    display.clear()
    display.set_pixel(player_x,4,9)
    display.set_pixel(asteroid['x'],asteroid['y'],6)
 
    sleep(50)

Mache Kopie von Game und speichere unter Namen asteroids_v02.py. Verbessere nun dieses mithilfe der Tipps unten.

Tipps

import time
...
time.ticks_ms() # gibt an, seit wie vielen Millisekunden Micro:bit schon läuft.
# Alternative:
running_time()
...

Ziel: Code sauber strukturieren.

Mache Kopie von der letzten Version des Games und speichere es unter dem Namen asteroids_v03.py. Verbessere das Game nun dieses mithilfe der Tipps unten. Falls du unzufrieden mit deine alten Version bist, kannst du auch mit einem leeren File beginnen und alles neu programmieren.

• Code sauber strukturieren wie in Template unten
• Kommentare hinzufügen: für Überschriften (wie in Vorgabe) und Erklärungen (nicht zu viel, nicht zu wenig) auf Englisch (höherer Lässigkeitsfaktor, ähm coolness factor!)
• Alle Wert, die sich nicht verändern (quasi die Game-Settings) werden in KONSTANTEN am Anfang des Spiels gespeichert.

Template

Ziel: Weitere Features implementieren.

Mache eine Kopie von der letzten Version v03 und nenne sie asteroids_v04.py. WICHTIG: Bespreche deine Lösung von v03 mit der Lehrperson, bevor du weiter arbeitest.

Implementiere nun folgende Features:

• Game wird schneller mit der Zeit. Probiere verschiedene Einstellungen aus, Stichwort: Game-Balancing
• Game Over:
  • zeigt z.B. SAD oder ANGRY-Smiley an
  • zeigt Score an: definiere dazu eine Art Levels (z.B. für jede weiteren 10s, die man überlebt, steigt Level um 1
  • kann dann Taste drücken, um Game neu zu starten
  • Tipp: Mache zuerst einen Plan dazu, wie du das umsetzen kannst. Beginne erst nachher mit Programmieren.

Ziel: beliebig viele, unabhängige Asteroiden

Mache eine Kopie von der letzten Version und nenne sie asteroids_v05.py.

1. Plan: Das Ziel ist, dass wir beliebig viele Asteroiden haben können. Diese werden zufälligerweise gespawned. Es kann also sein, dass wir einmal $0$ und später $7$ Asteroiden haben. Jeder Asteroid ist unabhängig und bewegt sich in seinem eigenen Tempo (per Zufall bestimmen, wenn Asteroid erzeugt wird). Daher können sich Asteroiden auch überholen.
   Bespreche mit KollegIn: Wie kann man das technisch umsetzen? Welche programmiererischen Mittel kann man da verwenden? Vergleicht eure Antworten mit den Lösungen unten.

   Lösung

   Da jeder Asteroid unterschiedliche Werte hat, bietet es sich an, Dictionaries zu verwenden: Jeder Asteroid ist ein Dictionary, in dem alle relevanten Werte stehen (welche sind das?). Alle Asteroiden-Dictionaries speichert man dann in einer Liste. Erreicht ein Asteroid den unteren Rand, wird er aus der Liste gekickt. Wird ein neuer Asteroid gespawned, wird er hinzugefügt.

   Das Spawnen kann man wie folgt umsetzen: Alle $200$ms (oder anderer Wert) wird mit einer gewissen Wahrscheinlichkeit (z.B. $10$%) ein Asteroid erzeug. Verwende dazu das random-Modul.

   Diese Lösung ist sehr elegant, da alle Informationen, die einen Asteroiden betreffen, in einer einzigen Variable (ein Dictionary) gespeichert sind.

   Verwende auch für den Player ein Dictionary.

   Eine gute Alternative zu Dicts wäre die objektorientierte Programmierung (OOP). Verwende aber Dicts, auch wenn du OOP bereits kennst.

2. Programmieren: Mache eine Kopie der letzten Version deines Codes und implementiere die neuen Features (siehe Lösungen von 1.).

Tipps

Slides: Model vs. View

Nun geht es in die finale Phase! Ziel ist, zuerst ein komplett abstraktes Modell des Games zu erstellen. Dieses soll dann genutzt werden, um verschiedene Versionen des Spiels zu erstellen:

1. Konsolen-App (im Terminal)
2. Micro-Bit
3. Desktop-App mit PyQt5

Lasse (zumindest für den Anfang) allen Schnick-Schnack weg: kein Score, kein Restart, … einfach nur 1x das Game spielen bis zu einer Collision

In deinem Repo sollst du dann (zusätzlich zu den bisherigen Files) vier neue Files haben:

• asteroids_game_model.py: Beinhaltet das Modell und damit die ganze Logik des Spiels. Wird von den anderen Files importiert.
• asteroids_game_microbit.py: Kümmert sich ausschliesslich um die View auf dem Microbit
• asteroids_game_console.py: Kümmert sich ausschliesslich um die View in der Konsole
• asteroids_game_pyqt.py: Kümmert sich ausschliesslich um die View auf der Desktop App

1. Erstelle ein File asteroids_model.py.
2. Dieses Soll die bisherigen Klassen Asteroid und Player beinhalten.
3. Erstelle weiter eine Klasse Game, die das gesamte Game beinhaltet. Halte dich dabei an die Vorgaben im Template unten.
4. Entferne alles, was nichts mit dem Modell zu tun hat.
   1. Das ganze Dokument darf also keine print(), display... usw. enthalten.
   2. Auch sollen die Klassen keine Attribute wie self.brightness haben, da diese zur View gehört: Stellt man Asteroiden in einer Desktop-App dar, haben sie vielleicht eine Farbe oder ein Bild anstelle einer brightness.
   3. Achtung: Zeitabfragen funktionieren auf dem Computer anders als auf dem Mircobit. Verwende deshalb die Funktion get_time_in_ms() im Template.

Template

1. Erstelle im Online-Editor ein neues File (heisst main.py).
2. Erstelle darin („Create file“) ein neues File mit Namen asteroids_game_model.py und füge dort deinen Code vom Teil I ein. Wenn du dort alles richtig gemacht hast, musst du in diesem File gar nichts mehr anpassen. Falls du dies musst, übernehme die Änderungen auch im File auf dem Computer. Es ist wichtig, dass diese beiden immer identisch sind.
3. Importiere im main.py-File deine Game-Klasse (siehe Template unten) …
4. … und implementiere das Spiel. Rufe dazu die Methoden deiner Game-Klasse auf.
5. Wenn du alles richtig machst, solltest du nur um die 20 Zeilen benötigen.
6. Speichere deinen Microbit Code dann auch in deinem Repo in einem File: asteroids_game_microbit.py

Template

from microbit import *
from asteroids_game_model import Game
 
def show(game):
    """
    Takes game object (instance of Game class) and visualizes it on microbit's led-matrix.
    """
    pass
 
g = Game(...) # create Game object
 
while True:
    # call methods of Game object
    ...
    show(g)
    sleep(...)

1. Erstelle ein neues File (im gleichen Ordner) mit Namen asteroids_game_console.py.
2. Importiere in diesem deine Game-Klasse (wie in Mirobit-Version) …
3. … und implementiere das Game
4. Achtung: Keyevents und damit die Player-Navigation kann in der Konsole problematisch sein (zumindest auf Mac). Es ist deshalb auch i.O., wenn man hier:
   1. den Player nicht anzeigt
   2. Collisions deaktiviert
   3. damit einfach eine Art 'Asteroiden-Regen' generiert

1. Erstelle ein neues File (im gleichen Ordner) mit Namen asteroids_game_pyqt.py.
2. Studiere das Template unten, führe es aus und verstehe die wichtigsten Schritte (nicht alle Details) zu verstehen.
3. Importiere wieder deine Game-Klasse …
4. … und implementiere das Spiel.

PyQt5 Template

from asteroids_game_model import Game
import sys
import random
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QLabel
from PyQt5.QtGui import QColor
from PyQt5.QtCore import Qt,QTimer
 
N_COLUMNS = 4
N_ROWS = 7
 
class GridApp(QWidget):
    def __init__(self):
        super().__init__()
        self.COLUMNS = N_COLUMNS
        self.ROWS = N_ROWS
        self.CELL_WIDTH = 70
        self.SPACING = 5
        self.COL_BACKGROUND = QColor("black")
        self.COL_CELL_DEFAULT = QColor("white")
        self.initUI()
        self.timer = QTimer()
        self.timer.timeout.connect(self.update)
        self.timer.start(500)  # Trigger the checkSomething function every ... milliseconds
 
    def initUI(self):
        self.setWindowTitle('Grid App')
        layout = QVBoxLayout()
        self.setLayout(layout)
        grid = QWidget()
        grid.setStyleSheet("QWidget {{ background-color: {0}; }}".format(self.COL_BACKGROUND.name()))
        grid_layout = QVBoxLayout(grid)
        grid_layout.setSpacing(self.SPACING)
        layout.addWidget(grid)
 
        self.cells = []  # Store references to the cell widgets
 
        for y in range(self.ROWS):
            row_layout = QHBoxLayout()
            grid_layout.addLayout(row_layout)
            for x in range(self.COLUMNS):
                cell = QLabel()
                cell.setFixedSize(self.CELL_WIDTH,self.CELL_WIDTH)
                cell.setStyleSheet("background-color: {}".format(self.COL_CELL_DEFAULT.name()))
                row_layout.addWidget(cell)
                self.cells.append(cell)
 
        self.show()
        self.setFixedSize(self.size().width(),self.size().height()) # -> window non-resizable
 
    def draw_cell_at_position(self,x,y,color):
        """
        changes color of cell at given position
        """ 
        cell = self.cells[y*self.COLUMNS + x]
        cell.setStyleSheet("background-color: {}".format(color.name()))
 
    def draw_all_cells(self):
        """
        draw all cells
        """
        for y in range(self.ROWS):
            for x in range(self.COLUMNS):
                rnd_color = QColor(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
                self.draw_cell_at_position(x,y,rnd_color)
 
    def keyPressEvent(self, event):
        """
        deals with keypressed events
        """
        key = event.key()
        if key == Qt.Key_Up:
            print('key up pressed')
        elif key == Qt.Key_Down:
            print('key down pressed')
        self.draw_all_cells()
 
    def update(self):
        # Perform your periodic check here
        # This function will be called every ... ms (value in self.timer.start(...))
        # Update the necessary data or trigger actions as needed
        print("Do something!")
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    grid_app = GridApp()
    sys.exit(app.exec_())

Wandle deine Desktop-App-Version in ein richtig cooles Game:

• Bilder für Asteroiden und Player (auch versch. Asteroiden-Bilder möglich)
• Explosion-Bild bei Collision.
• Schnick-Schnack wieder einbauen:
  • Restart
  • Score
  • …
• Asteroiden abschiessen können
• …

Tipps

import os
...
 
PATH_IMG_ASTEROID = os.path.join('images','asteroid.png')

...
pixmap = QPixmap(PATH_IMG_ASTEROID)
cell.setPixmap(pixmap.scaled(cell.size(), aspectRatioMode=Qt.AspectRatioMode.KeepAspectRatio))