From 7421e9d6e0a0edb39ce15effe1d081835c56ddba Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Fri, 5 Apr 2024 09:41:42 +0200 Subject: add initial Snake material --- .gitmodules | 3 + Info/10/2/Snake/BlueJ_Project | 1 + Info/10/2/Snake/img/snake.png | Bin 0 -> 6976 bytes Info/10/2/Snake/slides.md | 375 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 379 insertions(+) create mode 160000 Info/10/2/Snake/BlueJ_Project create mode 100644 Info/10/2/Snake/img/snake.png create mode 100644 Info/10/2/Snake/slides.md diff --git a/.gitmodules b/.gitmodules index d65a83ec..50cd5ec1 100644 --- a/.gitmodules +++ b/.gitmodules @@ -16,3 +16,6 @@ [submodule "Info/10/2/Felder/Erderwaermung"] path = Info/10/2/Felder/Erderwaermung url = git@gitlab.com:school1805723/tagestemperaturen.git +[submodule "Info/10/2/Snake/BlueJ_Project"] + path = Info/10/2/Snake/BlueJ_Project + url = muhq@muhq.space:repositories/schule/snake.git diff --git a/Info/10/2/Snake/BlueJ_Project b/Info/10/2/Snake/BlueJ_Project new file mode 160000 index 00000000..b25fefa0 --- /dev/null +++ b/Info/10/2/Snake/BlueJ_Project @@ -0,0 +1 @@ +Subproject commit b25fefa0cce29a6223b8c77666e1e0cfb29441e6 diff --git a/Info/10/2/Snake/img/snake.png b/Info/10/2/Snake/img/snake.png new file mode 100644 index 00000000..fd23290f Binary files /dev/null and b/Info/10/2/Snake/img/snake.png differ diff --git a/Info/10/2/Snake/slides.md b/Info/10/2/Snake/slides.md new file mode 100644 index 00000000..e9bc94f0 --- /dev/null +++ b/Info/10/2/Snake/slides.md @@ -0,0 +1,375 @@ +--- +author: Florian Fischer +theme: metropolis +aspectratio: 169 +header-includes: | + \makeatletter + \beamer@ignorenonframefalse + \makeatother +--- + +# Phase I - Modellierung eines Spiels + +## \faIcon{pencil-alt} Modellierung - 10min + +::: {.columns align=center} +:::: {.column width=50%} +* Erstelle ein Klassendiagramm mit allen **Klassen**, die du im linken Screenshot ausmachen kannst. +* Notiere die **Attribute**, die du sehen kannst und die, die Klassen haben müssen. +* Notiere die **Methoden**, die die Klassen vermutlich haben. +* Zeichne und beschrifte die Beziehungen zwischen den Klassen. +:::: + +:::: {.column width=50%} +![](img/snake.png) +:::: +::: + +## "Offensichtliche" Klassen +::: {.columns} +:::: {.column width=50%} +### Schlange + +Attribute: +\vspace{-0.2cm} + +* `richtung` *(rauf, runter, links, rechts)* +* `koerperteile` + +Methoden: +\vspace{-0.2cm} + +* bewegen +* wachse + +### Essen +* Position +::: + +:::: {.column width=50%} +\begin{tikzpicture} + \begin{class}[text width=4cm]{Schlange}{0,0} + \attribute{richtung} + \attribute{koerperteile} + \operation{bewegen()} + \operation{wachse()} + \end{class} + + \begin{class}[text width=4cm]{Essen}{0,-4.5} + \attribute{Position} + \end{class} +\end{tikzpicture} +:::: +::: + + +## \faIcon{desktop} Arbeitsauftrag - 15 min + +* Kopiere die **Snake** BlueJ-Projekt Vorlage +* Erzeuge Objekte der bereits vorhandenen Klassen und untersuche ihre Methoden +* Erstelle eine neue Klasse `Schlange` + * Ergänze die Klasse Schlange um das Attribut `String richtung`{.java} + * Ergänze die Klasse Schlange um ein Attribut `kopf` vom Typ `Rechteck` + * Implementiere den `Konstruktor` der Klasse `Schlange` + * Es soll die Position übergeben werden + * Die Startrichtung soll `"runter"`{.java} sein + * Erzeuge einen neuen grünen Kopf an der Richtigen Position mit der Größe 20x20. + +## \faIcon{desktop} Arbeitsauftrag - 5 min + +* Implementiere die Methode `bewegen` der Schlange +* Je nach ihrer Richtung soll sich der Kopf der Schlange um 20 Pixel bewegen + **Tipp**: verwende die Methode `Verschieben(int deltaX, int deltaY)`{.java} der Klasse `Rechteck` +* Erzeuge ein Schlangen Objekt und verschiebe es über den Bildschirm. + +## + +Wer ruft die Methoden der Klasse Schlange auf? + +\pause +### Once class to rule them all + +Eine Klasse verwaltet das gesamte Spiel indem sie auf Nutzereingaben reagiert und die richtigen Methoden der anderen Objekte ausführt. + +**\faIcon{lightbulb} Welche Attribute hat diese Klasse?** + +\pause +#### Attribute +* schlange +* essen +* rahmen +* zeit +* (highscore) + +## EVA-Prinzip {.t} + +::: {.columns} +:::: {.column width=65%} +\vspace{0.2cm} +\only<2->{ +Trennung der Datenverarbeitung in: + +\begin{itemize} +\item \boldred{E}ingabe: \texttt{input()} +\item \boldred{V}erarbeitung: \texttt{update()} +\item \boldred{A}usgabe: \texttt{output()} +\end{itemize} +} + +\vspace{0.1cm} +\only<3->{\textbf{\faIcon{lightbulb} Wie oft müssen wir die drei Schritte ausführen?}} + +\only<4->{ +Solange das Spiel läuft! + +\begin{block}{EVA-Loop} +\phantomsection\label{eva-loop} + +\texttt{solange Spiel aktiv}\\ +~~\texttt{input()}\\ +~~\texttt{update()}\\ +~~\texttt{output()}\\ +\end{block} +} +:::: + +:::: {.column width=30%} +\vspace{1.5cm} +\begin{tikzpicture} +\only<2->{ + \node[line width=1pt, draw, minimum width=3cm, rounded corners=5pt] (e) {Eingabe}; + \node[line width=1pt, draw, minimum width=3cm, rounded corners=5pt, below=of e] (v) {Verarbeitung}; + \node[line width=1pt, draw, minimum width=3cm, rounded corners=5pt, below=of v] (a) {Ausgabe}; + + \draw[-{Triangle}, line width=1pt] (e) to (v); + \draw[-{Triangle}, line width=1pt] (v) to (a); +} + +\only<4>{ + \draw[-{Triangle}, line width=1pt, dashed] + (a.east) -- + ($(a.east) + (0.5, 0)$) -- + ($(e.east) + (0.5, 0)$) -- + (e.east); +} +\end{tikzpicture} +:::: +::: + +## \only<2->{Spieleengine} + +**\faIcon{lightbulb} Sind wir die ersten mit diesem Problem?** +\pause + +Sicher nicht! Also lasst uns das Rad nicht neu erfinden. +Sondern eine \boldred{Spieleengine} verwenden die uns die lästigen Dinge abnimmt. + +\pause +### GraphicsAndGames + +``` +solange Spiel aktiv <- GraphicsAndGames + input() <- GraphicsandGames + update() <- Wir + output() <- GraphicsAndGames +``` + +## Wie bekommen wir die Eingabe? + +::: {.columns} +:::: {.column width=75%} +Wir erfüllen mit unserer Spiel-Klasse das \boldred{interface} `Zeichenfenster.AktionsEmpfaenger` damit uns GraphicsAndGames Eingaben übergeben kann. + +\vspace{0.1cm} +Ein Interface gibt zu implementierende Methoden vor. +:::: + +:::: {.column width=25%} +\hspace{-1cm} +\scalebox{1.1}{ +\begin{tikzpicture} +\node[line width=1pt, draw, minimum height=1cm, minimum width=3cm, rounded corners=5pt] (v) {Verarbeitung}; +\node[fill=bg, line width=1pt, minimum height=1cm, minimum width=3cm, rounded corners=5pt, above=-0.1cm of v] (e) {Eingabe}; +\draw[line width=1pt, rounded corners=5pt] ($(v.north west) + (0, 1cm)$) -- + ($(v.north east) + (0, 1cm)$) -- + (v.north east) {[sharp corners] -- + ($(v.north east) - (0.625cm, 0)$) -- + ($(v.north east) - (0.6cm, 0.2cm)$) -- + ($(v.north east) - (0.8cm, 0.2cm)$) -- + ($(v.north east) - (0.775cm, 0)$) -- + ($(v.north east) - (1.525cm, 0)$) -- + ($(v.north east) - (1.5cm, 0.2cm)$) -- + ($(v.north east) - (1.7cm, 0.2cm)$) -- + ($(v.north east) - (1.675cm, 0)$) -- + ($(v.north east) - (2.425cm, 0)$) -- + ($(v.north east) - (2.4cm, 0.2cm)$) -- + ($(v.north east) - (2.6cm, 0.2cm)$) -- + ($(v.north east) - (2.575cm, 0)$)} -- + (v.north west) -- + ($(v.north west) + (0, 1cm)$); + +\draw[line width=1pt, red] ($(v.north east) + (0.1cm, 0.2cm)$) -- + ($(v.north east) - (-0.1cm, 0.3cm)$) -- + ($(v.north west) - (0.1cm, 0.3cm)$) -- + ($(v.north west) + (-0.1cm, 0.2cm)$) -- + ($(v.north east) + (0.1cm, 0.2cm)$); + +\node[rotate=90] at ($(v.north west) - (0.3cm, 0.0cm)$) {\boldred{interface}}; +\end{tikzpicture} +} +:::: +::: + +\pause +**Java** +`class Snake implements Zeichenfenster.AktionsEmpfaenger`{.java} + +\pause + +**Methoden** + +* `public void Ausführen()`{.java} +* `public void Taste(char taste)`{.java} +* `public void SonderTaste(int taste)`{.java} +* `public void Geklickt(int x, int y, int anzahl)`{.java} + +## \faIcon{desktop} Arbeitsauftrag + +\begin{itemize} +\item Erstelle eine neue Klasse \texttt{Snake} +\begin{itemize} + \item Ergänze die Klasse \texttt{Snake} um ein \textbf{Referenzattribut} \texttt{schlange} + \item Initialisiere das Attribut \texttt{schlange} im \texttt{Snake} Konstruktor an der Position (380, 280). + \item Ergänze die Klasse \texttt{Snake} um die 4 Methoden des \texttt{AktionsEmpfaenger} interfaces. + \item Definiere, dass die Klasse \texttt{Snake} das interface \texttt{AktionsEmpfaenger} erfüllt. +\end{itemize} +\end{itemize} + +## \faIcon{desktop} Arbeitsauftrag + +* Implementiere die Methode `Taste(char taste)`{.java} sodass die Richtung der Schlange angepasst wird. + * 'W': rauf + * 'S': runter + * 'A': links + * 'D': rechts +* Rufe `schlange.bewegen()` in der `Ausführen` Methode auf +* Teste dein Spiel indem du ein neues `Snake` Objekt erzeugst +* **Für Schnelle:** Implementiert die Schlangensteuerung mit den Pfeiltasten und der Methode `Sondertaste` (Tipp: die Klasse `java.awt.event.KeyEvent` hilft) + +# Phase II - Essen und Wachstum + +## Essen + +## Wachstum + +## Bewegung + +::: {.columns} +:::: {.column width=50%} +:::: + +:::: {.column width=50%} +![](img/Copyrighted/caterpillar_movement.png){.center width=100%} +:::: +::: + + +# Phase III - Kollisionserkennung + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3