path: root/Info/9/3/SpaceInvaders/slides.md

## Ziel

\vspace{-0.5cm}
![](img/space-invaders.png){.center height=95%}

## \faIcon{pencil-alt} Arbeitsauftrag - Modellierung 10 min {.standout}

Erstelle eine Klassendiagramm (mehrere Klassenkarten) zu allen Klassen, die
du bei SpaceInvaders entdecken kannst.

## Exkurs: Wie funktioniert ein Spiel?

* Wer zeichnet das Bild?
* Wer spielt den Ton ab?
* Wer prüft ob eine Taste gedrückt wurde?
* Wer ruft die Methoden unserer Objekte auf und wann?

\pause

Eine \boldred{Engine} und in unserem Fall Greenfoot.

## Exkurs: 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}
::::
:::

## `Update()` - der spannende Teil

Greenfoot hat zwei wichtige Klassen:

* World - Die Spielwelt
* Actor - Ein Objekt, das Teil der Welt ist und etwas tun kann

### Ein Actor

Damit Grennfoot ein Objekt etwas tun lassen kann, muss es ein `Actor` *sein*.

### Wie geht das? (Genaueres beim nächsten Mal)

* Die Klassendefinition muss `class Klassenname extends Actor { ... }`{.java} enthalten
* Die Klassen muss die Methode`public void act() { ... }`{.java} definieren

## Greenfoot und die geheimnisvollen Knöpfe

![](greenfoot_buttons.png){.center}

### Act

Ruft die `act`-Methode jedes Actors [einmal]{.underline} auf.

### Run

Startet einen **EVA**-Loop und ruft während dem `Update`-Schritt die `act`-Methode jedes Actors auf.

## \faIcon{desktop} Arbeitsauftrag - Implementiere die Klasse Raumschiff

* Kopiere das Greenfoot-Projekt **SpaceInvaders** aus dem Vorlagen-Laufwerk und öffne es in Greenfoot.
* Bearbeite den Arbeitsauftrag **SpaceInvaders Arbeitsauftrag1.pdf**

## \faIcon{chalkboard} Raumschiff & Alien {.standout}

Das Projekt **SpaceInvadersVorlage2** enthält eine mögliche Lösung für den Arbeitsauftrag 1

## Von der Klassenkarte zum Code

::: {.columns align=center}
:::: {.column width=30%}
\begin{tikzpicture}
\begin{class}[text width=4cm]{Raumschiff}{0, 0}
\attribute{x}
\attribute{y}
\operation{bewegen()}
\end{class}
\end{tikzpicture}
::::

:::: {.column width=60%}
```java
public class Raumschiff // Klassendefinition
{ // Attribute
  int x;
  int y;

  // Methoden
  public void bewegen() {
    ...
  }
}
```
::::
:::

## Von der Klasse zum Objekt

::: {.columns align=center}
:::: {.column width=45%}
\begin{tikzpicture}
\begin{class}[text width=4cm]{Raumschiff}{0, 0}
\attribute{x}
\attribute{y}
\operation{bewegen()}
\end{class}
\end{tikzpicture}
::::

:::: {.column width=5%}
\Large $\Rightarrow$
::::

:::: {.column width=45%}
\pause
\begin{tikzpicture}
\begin{object}[text width=4cm]{rs1: Raumschiff}{0, 0}
\attribute{x = 300}
\attribute{y = 565}
\end{object}
\end{tikzpicture}
::::
:::

\vspace{1cm}
\pause
### \faIcon{lightbulb} Wo kommen die Attributwerte her?

\pause
Sie müssen beim Erzeugen eines Objekts angegeben werden.

## Objekte erzeugen

Objekte einer Klasse werden mit dem Schlüsselwort `new`{.java} erzeugt.

\pause
### \faIcon{pencil-alt} [Der Konstruktor]{.underline}

>- **Methode** der Klasse, die beim Erzeugen ein neues Objekt aufgerufen wird.
>- Heißt immer wie die Klasse.
>- Hat [keine]{.underline} Angabe eines Rückgabetyps.

\pause
::: {.columns}
:::: {.column width=35%}
\begin{tikzpicture}
\begin{class}[text width=4cm]{Raumschiff}{0, 0}
\attribute{x}
\attribute{y}
\operation{bewegen()}
\end{class}
\end{tikzpicture}
::::

:::: {.column width=65%}
```java
public class Raumschiff {
int x; // Attribute
int y;
public Raumschiff () { // Konstruktor
  x = 300;
  y = 565;
}
```
::::
:::

## \faIcon{pencil-alt} Konstruktor \only<2->{mit Parametern}

### \faIcon{lightbulb} Was wenn die Attributwerte nicht immer gleich sein sollen?

\pause
$\Rightarrow$ Wir können dem Konstruktor Parameter übergeben.

\vspace{0.5cm}
::: {.columns align=center}
:::: {.column width=40%}
\pause
`new Raumschiff(13, 12);`{.java}
::::

:::: {.column width=5%}
\Large $\Rightarrow$
::::

:::: {.column width=45%}
\pause
\begin{tikzpicture}
\begin{object}[text width=4cm]{rs1: Raumschiff}{0, 0}
\attribute{x = 13}
\attribute{y = 12}
\end{object}
\end{tikzpicture}
::::
:::

## \faIcon{desktop} Arbeitsauftrag - Erzeuge neue Aliens 20min

\centering
Bearbeite den Arbeitsauftrag **SpaceInvaders Arbeitsauftrag2.pdf**

## Methoden aufrufen

### Was wir bereits können:

Methoden des eigenen Objekts aufrufen.

`bewegen(); // Ruft die Methode bewegen auf dem Objekt selbst auf`{.java}

### Was wir neues brauchen:

Methoden anderer Objekte aufrufen.

```java
 // Ruft die Methode bewegen auf anderesObject auf
anderesObject.bewegen();
```

## \faIcon{desktop} Arbeitsauftrag - Schiessen Schiessen Schiessen 15min

\centering
Bearbeite den Arbeitsauftrag **SpaceInvaders AA 2.pdf**

## \faIcon{desktop} Arbeitsauftrag - Schiessen Schiessen Schiessen 15min

\centering
Bearbeite den Arbeitsauftrag **SpaceInvaders AA 2.pdf**

## Eine eigene Klasse für die Schüsse der Aliens

Die Klasse `Lazer`, soll die Schüsse der Aliens implementieren.

### Warum?
* Ein anderes Bild um die Schüsse zu unterscheiden.
* Einfacher um später zu erkennen wer von was getroffen wurde.

\pause
\faIcon{lightbulb} Überlegt euch wie ihr die Klasse `Lazer` implementieren würdet.

## Zweimal der gleiche Code

::: {.columns}
:::: {.column width=50%}
```java
pubic class Laser {
  int geschwindigkeit = 6;
  public void bewegen() {
    setLocation(getX(),
      getY() - geschwindigkeit);
  }
}
```
::::

:::: {.column width=50%}
```java
pubic class Lazer {
  int geschwindigkeit = 5;
  public void bewegen() {
    setLocation(getX(),
      getY() + geschwindigkeit);
  }
}
```
::::
:::

\pause
**Geht das nicht besser?**

## \faIcon{pencil-alt} Vererbung

Eine Klasse kann [alle]{.underline} Attribute und Methoden einer anderen Klasse \boldred{erben}.

\pause
\begin{tikzpicture}
\begin{class}[text width=4cm]{Oberklasse}{0, 0}
\end{class}

\begin{class}[text width=4cm]{Unterklasse}{7, 0}
\inherit{Oberklasse}
\end{class}
\end{tikzpicture}

\pause
Man spricht: Die *Unterklasse* erbt von der *Oberklasse*.

\pause
### Beispiel
\begin{tikzpicture}
\begin{class}[text width=4cm]{Fahrzeug}{0, 0}
\end{class}

\begin{class}[text width=4cm]{Auto}{7, 0}
\inherit{Fahrzeug}
\end{class}
\end{tikzpicture}

*Ein Auto **erbt** von Fahrzeug* bzw. *ein Auto **ist** ein Fahrzeug*.

## \faIcon{pencil-alt} Vererbung in Java

Um eine Vererbung auszudrücken wird in der Klassendefinition der **Unterklasse** `extends Oberklasse`{.java} ergänzt.

Methoden und Attribute der Oberklasse können in der Unterklasse verwendet werden, als ob sie dort definiert sind.

::: {.columns}
:::: {.column width=20%}
```java
class Oberklasse {
  int zahl;

  Oberklasse() {
    zahl = 13;
  }
}
```
::::

:::: {.column width=60%}
```java
class Unterklasse extends Oberklasse {
  // zahl ist bereits in Oberklasse definiert
 Unterklasse() {
    // Aufruf des Konstruktors der Oberklasse
    super();
    zahl = 12;
  }
}
```
::::
:::


## Vererbung - Generalisierung

\begin{tikzpicture}
\begin{class}[text width=4cm]{Laser}{0, 0}
\attribute{geschwindigkeit}
\operation{act()}
\end{class}

\begin{class}[text width=4cm]{Lazer}{7, 0}
\attribute{geschwindigkeit}
\operation{act()}
\end{class}
\end{tikzpicture}

Gemeinsamkeiten mehreren Klassen in eine Oberklasse *auszulagern* nennt man \boldred{Generalisierung}.

\pause

\begin{tikzpicture}
\begin{class}[text width=4cm]{Projektil}{0, 2}
\attribute{geschwindigkeit}
\operation{act()}
\end{class}

\begin{class}[text width=4cm]{Lazer}{7, 0}
\inherit{Projektil}
\end{class}

\begin{class}[text width=4cm]{Laser}{7, 2}
\inherit{Projektil}
\end{class}
\end{tikzpicture}

## Arbeitsauftrag - Rest der Stunde

\centering
Bearbeite den Arbeitsauftrag **SpaceInvaders Arbeitsauftrag3.pdf**