1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
\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}
|
