\documentclass{handout}
\csname endofdump\endcsname
\usepackage{minted}
\usepackage{hyperref}
\usepackage[ngerman]{babel}
\usepackage{hyperref}
\geometry{margin=2cm}

\title{JumpNRun Arbeitsauftrag 1}
\setcounter{section}{1}

\begin{document}
\thispagestyle{empty}

\subsection{\faIcon{pencil-alt} Modellierung}

\begin{tabularx}{\textwidth}{p{0.5\textwidth} p{0.4\textwidth}}
\vspace{-5cm}
\begin{itemize}
\item Erstelle ein Klassendiagramm mit allen \textbf{Klassen}, die du im linken Screenshot ausmachen kannst.
\item Notiere die \textbf{Attribute}, die du sehen kannst und die, die Klassen haben müssen.
\item Notiere die \textbf{Methoden}, die die Klassen vermutlich haben.
\item Zeichne und beschrifte die Beziehungen zwischen den Klassen.
\end{itemize}
&
\includegraphics[keepaspectratio, width=0.4\textwidth]{img/jumpnrun.png} \\
\end{tabularx}

\begin{defbox}{Klassendiagramm}
\iflehrer{
\begin{center}
\begin{tikzpicture}
 \begin{class}[text width=3cm]{Spieler}{0,0}
  \attribute{geschwindigkeit}
  \attribute{position}
  \operation{bewegen()}
  \operation{springen()}
 \end{class}

 \begin{class}[text width=3cm]{Flagge}{0,-4.5}
  \attribute{position}
 \end{class}

 \begin{class}[text width=3cm]{Platform}{5,-2.5}
  \attribute{position}
  \attribute{hoehe}
  \attribute{breite}
 \end{class}
 \association{Spieler}{steht auf}{}{Platform}{}{};
 \association{Spieler}{erreicht}{}{Flagge}{}{};
\end{tikzpicture}
\end{center}
}{\vspace{6cm}}
\end{defbox}

\subsection*{Nutzereingabe}

\begin{defbox}{Nutzereingabe}
\begin{tabularx}{\textwidth}{p{0.65\textwidth} p{0.05\textwidth} p{0.3\textwidth}}
  Eine \boldred{Spiel-Engine} nimmt uns die meiste Arbeit ab, indem sie in einer Schleife die Nutzereingabe entgegen nimmt und an unser Spiel zur Verarbeitung weiterleitet. \\[12mm]
  Unser Spiel übernimmt die Verarbeitung und teilt der Spiel-Engine die Veränderungen auf dem Bildschirm mit damit eine neue Ausgabe erzeugt werden kann.
  &&
\vspace{-1.85cm}
\begin{tikzpicture}
  \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);

  \draw[-{Triangle}, line width=1pt, dashed]
    (a.east) --
    ($(a.east) + (0.5, 0)$) --
    ($(e.east) + (0.5, 0)$) --
    (e.east);
\end{tikzpicture} \\[0.5cm]
\end{tabularx}
\end{defbox}

\begin{defbox}{Schnittstelle}
\begin{tabularx}{\textwidth}{p{0.65\textwidth} p{0.05\textwidth} p{0.3\textwidth}}
\vspace{-2cm}
Um in die Schleife integriert zu werden, müssen unsere Klassen von der Oberklasse \texttt{Actor} direkt oder über die Klasse \texttt{Sprite} erben. &&
\begin{tikzpicture}
\node[line width=1pt, draw, minimum height=1cm, minimum width=3cm, rounded corners=5pt] (v) {Verarbeitung};
\node[fill=white, 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} \\
\end{tabularx}
\end{defbox}

\subsection{\faIcon{desktop} Los gehts!}

\begin{itemize}
\item Öffne das \textbf{JumpNRun Vorlage1} Projekt
\item Untersuche die bereits vorhandenen Klassen
\item Ergänze die Klasse \texttt{Player} um die Attribute: \texttt{vx}, \texttt{speed} vom Typ \mintinline{java}{double}
\item Initialisiere \texttt{vx} mit \texttt{0} und \texttt{speed} mit \texttt{10}
\end{itemize}

\subsection{\faIcon{desktop} Bewegung des Spielers}

Vervollständige die Methode \texttt{act} des Spielers.

\begin{tcolorbox}[title=Tipp]
Vergiss nicht deine Implementierung regelmäßig zu testen.
\end{tcolorbox}

\begin{itemize}
\item Bewege die Figur anhand ihrer Geschwindigkeit in X-Richtung (\texttt{vx}) horizontal\\
      (\mintinline{java}{move(double deltaX, double deltaY)}).
\item Ändere die Geschwindigkeit, \emph{falls} eine Pfeiltaste gedrückt wird, um \texttt{speed} in die entsprechende Richtung
      (\mintinline{java}{isKeyDown(int key)} und \mintinline{java}{Key.ArrowLeft}, \mintinline{java}{Key.ArrowRight}).
\item Bremse die Figur, falls \boldred{keine} der beiden Tasten gedrückt wird (setzte \texttt{vx} auf $80\%$ des aktuellen Werts).
\end{itemize}

\subsection{\faIcon{desktop} Gravitation}

Die Spielfigur soll nach unten fallen, wenn kein Boden unter ihr ist.
Dazu orientieren wir uns an der Gravitation.

\begin{itemize}
\item Ergänze die Klasse \texttt{Spieler} um die Attribute: \texttt{vy}, \texttt{gravity}, \texttt{sprung} vom Typ \mintinline{java}{double}.
\item Initialisiere die Attribute \texttt{gravity} mit \texttt{0.8} und \texttt{sprung} mit \texttt{-15}.
\item Bewege die Figur entsprechend ihrer Geschwindigkeit in Y-Richtung \texttt{vy}.  
\item Erhöhe \texttt{vy}, \emph{falls} die Figur \boldred{nicht} auf dem Boden steht, d.h. ihr Mittelpunkt einen Y-Wert (\mintinline{java}{getCenterY()}) $< 350$ hat, um \texttt{gravity}.
\item \emph{Ansonsten} setzte \texttt{vy} auf 0.
\end{itemize}

\subsection{\faIcon{desktop} Springen}

Um sich der Gravitation zu widersetzen, erhöhen wir die Geschwindigkeit in Y-Richtung um die Sprungkraft der Figur.

\begin{itemize}
\item Erhöhe \texttt{vy} um \texttt{sprung}, \emph{falls} die Figur auf dem Boden steht, d.h. ihr Mittelpunkt einen Y-Wert $\geq 350$ hat, \boldred{und} die Pfeiltaste nach oben \mintinline{java}{Key.ArrowUp} gedrückt ist.
\end{itemize}

\subsection{\faIcon{earlybirds} \faIcon{desktop} Animation}

Die Figur soll auch so Aussehen, als würde sie sich bewegen. 

\begin{itemize}
  \item Ergänze die Figur um das Attribut \texttt{headingRight}
  \item Setze den Wert entsprechend, wenn die Figur die Richtung wechselt.
  \item Spiegele die Figur damit die Blickrichtung zur Laufrichtung passt (\mintinline{java}{mirrorX()}).
\end{itemize}

Die Online-IDE kann mehrere Bilder eines Sprites nacheinander anzeigen.

\begin{itemize}
  \item Betrachte die Sprites (Characters\_1) der Online-IDE, die zu unserem Spieler passen, unter \url{https://www.online-ide.de/spriteLibrary.html}.
  \item Lies die Beschreibung der \mintinline{java}{Sprite.playAnimation(...)} Methode unter \url{https://www.online-ide.de/api_documentation.html}.
  \item Spiele eine Animation, wenn der Spieler läuft und beende die Animation, wenn der Spieler steht (\mintinline{java}{stopAnimation()}).
\end{itemize}

\vfill
Dieses Werk ist lizenziert unter einer \href{https://creativecommons.org/licenses/by-sa/4.0/}{CC BY-SA 4.0} Lizenz \faCreativeCommons\ \faCreativeCommonsBy\ \faCreativeCommonsSa.
\end{document}