add initial Snake material

3 files changed, 375 insertions, 0 deletions

diff --git a/Info/10/2/Snake/BlueJ_Project b/Info/10/2/Snake/BlueJ_Project
new file mode 160000
+Subproject b25fefa0cce29a6223b8c77666e1e0cfb29441e
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
--- /dev/null
+++ b/Info/10/2/Snake/img/snake.png
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
+
+<!-- ## Klassendiagramm mit pgf-umlcd -->
+
+<!-- \begin{tikzpicture} -->
+ <!-- \begin{class}[text width=5cm]{SPIELAUTOMAT}{0,0} -->
+  <!-- \attribute{walze1 : SPIELWALZE} -->
+  <!-- \attribute{walze2 : SPIELWALZE} -->
+  <!-- \attribute{walze3 : SPIELWALZE} -->
+  <!-- \operation{AlleDrehen()} -->
+ <!-- \end{class} -->
+
+ <!-- \begin{class}[text width=5cm]{SPIELWALZE}{6,0} -->
+  <!-- \attribute{hintergrund : KASTEN} -->
+  <!-- \attribute{farbsymbol : FARBKREIS} -->
+  <!-- \operation{Drehen()} -->
+ <!-- \end{class} -->
+
+  <!-- \association{SPIELAUTOMAT}{}{1}{SPIELWALZE}{3}{} -->
+<!-- \end{tikzpicture} -->
+
+<!-- ## Klassendiagramm mit plain tikz -->
+
+<!-- \begin{center} -->
+<!-- \begin{tikzpicture}[ -->
+<!-- class/.style={ -->
+<!-- draw, -->
+<!-- rectangle,  -->
+<!-- minimum width={width("SCHUELER")}, -->
+<!-- font=\small}] -->
+
+<!-- \node[class] (schueler) at (0,0) {SCHUELER}; -->
+
+<!-- \node[class] (akte) at (5, 0) {AKTE}; -->
+
+<!-- \draw(schueler.east) edge[above, align=center] node {\small > hat eine} (akte.west); -->
+<!-- \end{tikzpicture} -->
+<!-- \end{center} -->
+
+<!-- ## Code -->
+
+<!-- \small -->
+
+<!-- ::: columns -->
+<!-- :::: {.column width=40%} -->
+<!-- ```java -->
+<!-- class SCHUELER { -->
+  <!-- private String name; -->
+
+
+  <!-- void SCHUELER(String n, -->
+                <!-- double s) -->
+  <!-- { -->
+    <!-- name = n; -->
+
+  <!-- } -->
+<!-- } -->
+<!-- ``` -->
+<!-- :::: -->
+
+<!-- :::: {.column width=60%} -->
+<!-- ```java -->
+<!-- class AKTE { -->
+  <!-- public String spitzname; -->
+  <!-- private double notenschnitt; -->
+
+  <!-- public void AKTE(double s) -->
+  <!-- { -->
+    <!-- notenschnitt = s; -->
+    <!-- spitzname = ""; -->
+  <!-- } -->
+<!-- } -->
+<!-- ``` -->
+<!-- :::: -->
+<!-- ::: -->
+
+<!-- \normalsize -->
+
+<!-- ## Some Text in Boxes -->
+
+<!-- ### Merke -->
+
+<!-- Der Grundsatz der **Datenkapselung** besagt, dass nur ein Objekt selbst Zugriff auf seine Attribute haben sollte. -->
+
+<!-- \pause -->
+
+<!-- \vspace{0.75cm} -->
+
+<!-- Der Zugriff von außen sollte nur über durch das Objekt bereitgestellte Methoden erfolgen. -->
+
+<!-- ## Tables -->
+
+<!-- \centering -->
+<!-- \begin{tabularx}{10cm}{X | X} -->
+<!-- \multicolumn{2}{c}{Multicolumn} \\ -->
+<!-- \hline -->
+<!-- \rowcolor{red!30} red line & yeah \\ -->
+<!-- \rowcolor{blue!30} blue line & wuhu \\ -->
+<!-- \end{tabularx} -->