Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
talit:asteroids_game [2024-05-27 10:05] – [Version 4] scatalit:asteroids_game [2024-06-03 11:47] (aktuell) – [Version 5] sca
Zeile 179: Zeile 179:
 **Ziel:** beliebig viele, unabhängige Asteroiden **Ziel:** beliebig viele, unabhängige Asteroiden
  
-Mache eine Kopie von der letzten Version und nenne sie `asteroids_v05.py`. Implementiere dann folgende Features:+Mache eine Kopie von der letzten Version und nenne sie `asteroids_v05.py`.
  
-   * Allfällige Verbesserungen von v04 (direkt in v05 hinein) +   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.<WRAP> 
-   * **Asteroiden:** +++++Lösung| 
-    * **Mehrere** Asteroiden gleichzeitig +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. 
-    * Asteroiden mit **OOP**, siehe Tipps + 
-    * Asteroiden werden **zufällig erzeugt** +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. 
-    * jeder Asteroid bewegt sich **unabhängig** (unterschiedliche Geschwindigkeiten, also auch Positions-Update zu unterschiedlichen Zeiten) + 
-    * Asteroiden sind komplett unabhängig voneinander. Verschwindet einer unten aus Bild, so ist er weg und spawned nicht gleich wieder am oberen Rand. +Diese Lösung ist sehr elegant, da alle Informationen, die einen Asteroiden betreffen, in einer einzigen Variable (ein Dictionary) gespeichert sind. 
-   * **Player:** + 
-     * Player mit **OOP** +Verwende auch für den Player ein Dictionary. 
-     * die beiden Klassen sollten sich möglichst ähnlich sein, z.B. gleiche Methoden-Namen+ 
 +Eine gute Alternative zu Dicts wäre die objektorientierte Programmierung (OOP). Verwende aber Dicts, auch wenn du OOP bereits kennst. 
 +++++ 
 +</WRAP> 
 +   1. **Programmieren:** Mache eine Kopie der letzten Version deines Codes und implementiere die neuen Features (siehe Lösungen von 1.). 
  
 ++++Tipps| ++++Tipps|
  
    * Tipp: Kommentiere Collision temporär aus, damit du dich auf die Asteroiden konzentrieren kannst.    * Tipp: Kommentiere Collision temporär aus, damit du dich auf die Asteroiden konzentrieren kannst.
-   * Jeder Asteroid ist ein Objekt einer Klasse `Asteroid` +   * Information für Asteroid: $x-$ und $y-$Position, Geschwindigkeit (resp. Anzahl ms bis zum nächsten Update), Zeit von letztem Update
-   * Speichere die Asteroiden-Objekte in einer Liste +
-   * Update jeden Asteroiden, indem du dessen `update()`-Methode aufrufst. +
  
-Asteroiden-Klasse muss folgende Attribute und Methoden beinhalten. Natürlich kannst du andere (aber sinnvolle) Namen verwenden und auch weitere (sinnvolle) Attribute und Methoden definieren. +++++
-<code python> +
-# Class +
-class Asteroid(): +
-    def __init__(self,...): +
-        self.x = ... +
-        self.y = ... +
-        self.brightness = ... +
-        self.update_time = ... # time between next move +
-        self.time_last_update = ... +
-        self.is_active = True # optional, see info for update-Method+
  
 +===== Version Final =====
 +
 +**Slides:** {{ :talit:microbit_model_view.pdf |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)
 +   1. Micro-Bit
 +   1. 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**
 +
 +=== Teil I: Modell ===
 +
 +   1. Erstelle ein File `asteroids_model.py`.
 +   1. Dieses Soll die bisherigen Klassen `Asteroid` und `Player` beinhalten.
 +   1. Erstelle weiter eine Klasse `Game`, die das gesamte Game beinhaltet. Halte dich dabei an die Vorgaben im **Template** unten.
 +   1. **Entferne alles**, was **nichts mit dem Modell** zu tun hat.
 +     1. Das ganze Dokument darf also keine `print()`, `display...` usw. enthalten.
 +     1. 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.
 +     1. Achtung: Zeitabfragen funktionieren auf dem Computer anders als auf dem Mircobit. Verwende deshalb die Funktion `get_time_in_ms()` im Template.
 +
 +++++Template|
 +
 +<code python asteroids_model.py>
 +# ALL IMPORT STATEMENTS
 +import sys
 +import ...
 +
 +def get_time_in_ms():
 +    """
 +    Time is handled differently on microbit than on regular computers.
 +    Call this function to get current (system) time.
 +    """
 +    if sys.platform == 'microbit':
 +        try:
 +            return time.ticks_ms()
 +        except Exception as e:
 +            print("An error occurred on microbit:", str(e))
 +    else:
 +        try:
 +            return time.time()*1000
 +        except Exception as e:
 +            print("An error occurred on Windows/Mac/Linux/... (not microbit):", str(e))
 +
 +class Player:
 +    def __init__(self,...):
 +        pass
 + 
 +    def update(self,move):
 +        """
 +        move = 1  -> move to right 1 step
 +        move = -1 -> move to right 1 step
 +        """
 +        pass
 + 
 +class Asteroid:
 +    def __init__(self,...):
 +        pass
 + 
     def update(self):     def update(self):
         """         """
-        Method is called each time in game loop. +        if enough time has passed, asteroid's y position increases by 1
-        In here, check if enough time has passed s.t. asteroid moves to next position. +
-        If yes, move asteroid. +
-         +
-        Somewhere need to check if asteroid is out of screen. Can be done here or outside in game loop. +
-        If done here, class need attribute self.is_active = False/True+
         """         """
         pass         pass
  
-    def display(self):+class Game: 
 +    def __init__(self,...): # pass game settings as parameters 
 +        .... 
 +        self.player = Player(...) # create player and attache to Game-class as attribute 
 +        self.asteroids = [] # also create empty list for asteroids 
 +        .... 
 + 
 +    def spawn_asteroids(self):
         """         """
-        displays asteroid+        Checks if enough time has passed s.t. new asteroid is allowed to spawn. 
 +        If it is, new asteroid spawns with given probability
         """         """
         pass         pass
  
-# Create object of class asteroid +    def update_asteroids(self): 
-a = Asteroid(...)+        """ 
 +        updates position of all asteroids 
 +        """ 
 +        pass 
 +         
 +    def player_is_colliding(self): 
 +        """ 
 +        checks if player is colliding with an asteroid 
 +        returns False or True 
 +        """ 
 +        pass
 </code> </code>
  
 ++++ ++++
  
 +=== Teil II: Micro-Bit ===
 +
 +   1. Erstelle im Online-Editor ein neues File (heisst `main.py`).
 +   1. 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.
 +   1. Importiere im `main.py`-File deine Game-Klasse (siehe Template unten) ...
 +   1. ... und implementiere das Spiel. Rufe dazu die Methoden deiner Game-Klasse auf.
 +   1. Wenn du alles richtig machst, solltest du nur um die 20 Zeilen benötigen.
 +   1. **Speichere** deinen Microbit Code dann auch in deinem Repo in einem File: `asteroids_game_microbit.py`
 +
 +++++Template|
 +
 +<code python>
 +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(...)
 +</code>
 +++++
 +=== Teil III: Konsolen-App ===
 +
 +   1. Erstelle ein neues File (im gleichen Ordner) mit Namen `asteroids_game_console.py`.
 +   1. Importiere in diesem deine Game-Klasse (wie in Mirobit-Version) ...
 +   1. ... und implementiere das Game
 +   1. 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
 +      1. Collisions deaktiviert
 +      1. damit einfach eine Art 'Asteroiden-Regen' generiert
 +
 +
 +=== Teil IV: Desktop-App ===
 +
 +   1. Erstelle ein neues File (im gleichen Ordner) mit Namen `asteroids_game_pyqt.py`.
 +   1. Studiere das Template unten, führe es aus und verstehe die wichtigsten Schritte (nicht alle Details) zu verstehen.
 +   1. Importiere wieder deine Game-Klasse ...
 +   1. ... und implementiere das Spiel.
 +
 +++++PyQt5 Template|
 +
 +**Wichtig:** Importiere PyQt5 mit **pip** (siehe [[talit:python_setup#installation_von_python_modulen|Tutorial "Installation von Python Modulen"]])
 +
 +<code python>
 +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_())
 +</code>
 +
 +++++
 +
 +=== Teil V (falls Zeit / für Schnelle): Pimp my Desktop-App ===
 +
 +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|
 +
 +**Bilder Laden:**
 +Es bietet sich an, Bilder in Unterordnern abzulegen. Lädt man das Bild in Python, muss der relative Pfad (in Bezug auf Location von Python-File) angegeben werden. Da Pfade auf versch. Systemen (z.B. Windows und Mac) anders angegeben werden, muss man die `os.path.join(...)` Funktion verwenden.
 +
 +Beispiel: Bild `asteroid.png` ist im Unterordner `images`. Gebe Pfad dann wie folgt an:
 +<code python>
 +import os
 +...
 +
 +PATH_IMG_ASTEROID = os.path.join('images','asteroid.png')
 +</code>
 +
 +**Bild in Cell anzeigen:**
 +
 +<code python>
 +...
 +pixmap = QPixmap(PATH_IMG_ASTEROID)
 +cell.setPixmap(pixmap.scaled(cell.size(), aspectRatioMode=Qt.AspectRatioMode.KeepAspectRatio))
 +</code>
 +
 +++++
  • talit/asteroids_game.1716804334.txt.gz
  • Zuletzt geändert: 2024-05-27 10:05
  • von sca