-
Notifications
You must be signed in to change notification settings - Fork 21
/
page4_de.html
111 lines (81 loc) · 4.55 KB
/
page4_de.html
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
<!doctype html>
<head>
<title>Kursmaterial — Seite 4</title>
<link rel=stylesheet href="fonts.googleapis.com/css-family=Averia+Serif+Libre:300,400">
<link rel=stylesheet href=style.css>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<h1>Ausblick: Ein Spiel</h1>
<p>Das war‘s für heute! Wir hoffen der Workshop hat dir Spaß gemacht und du hast
jetzt Lust auf mehr.</p>
<p>Wenn wir jetzt alles zusammennehmen, was wir bisher gemacht haben und noch
ein bisschen was hinzufügen, kannst du Größeres schaffen. Wie wär‘s mit einem
Spiel!? Zumindest hast du dir eine Runde Spielen verdient!</p>
<h2 class=step>Spiel ein Spiel!</h2>
<h3 class=goal>Ziel</h3>
<p>Einfach ausprobieren und aufhören zu glauben, dass es irgendwie schwierig
sein könnte, ein interaktives Spiel zu programmieren.</p>
<h3 class=inst>Anweisungen</h3>
<p>Öffne <a href="sandbox/index.html#invaders_de.js" target=_blank>das Spiel</a>.</p>
<p>Spiel das Spiel. Denk dir <em>„Ja, das wäre beeindruckend, wenn es 1970
wäre“.</em></p>
<p>Lies den Code und die Kommentare.</p>
<h3 class=ex>Erklärung</h3>
<p>Mit einigen sehr einfachen Berechnungen kannst du ein interaktives Spiel
schreiben, oder auch andere spannende Dinge machen wie z.B. Simulationen von
physikalischem Verhalten. Ziemlich cool, oder?</p>
<h2 class=step>Erweitere es</h2>
<h3 class=goal>Ziel</h3>
<p>Um das Invaders-Programm besser zu verstehen, versuchen wir es jetzt zu
verändern und einige Funktionen hinzuzufügen.</p>
<h3 class=inst>Anweisungen</h3>
<p>Setze alle der folgenden Anpassungen um und teste (in kleinen Schritten), ob
alles noch wie erwartet funktioniert.</p>
<p>Du kannst die Seite jederzeit neu laden (Strg-R / Cmd-R), um zur
ursprünglichen Version des Programms zurückzukehren. Um die letzten paar
Änderungen zu widerrufen, kannst du auch die Tastenkombination Ctrl-Z / Cmd-Z
(undo) im Text-Editor benutzen. Wenn du einen Stand deines Programms hast,
zu dem du später vielleicht zurückkehren möchtest, kannst du den „Save“-Button
oben auf der Seite benutzen, um zu speichern. Mit dem „Load“-Button kannst du
die Version dann wiederherstellen (Achtung, damit überschreibst du dann das
aktuelle Programm).</p>
<p>Wenn du nicht weiterkommst, grübel nicht zu lange. Du kannst die Coaches
jederzeit und immer wieder fragen und dir helfen lassen.</p>
<h3 class=ex>Erklärung</h3>
<p>Wenn du eigene Ideen für Verbesserungen des Spiel hast oder, für die
abenteuerlustigen unter euch, für ein ganz eigenes Spiel, immer drauf los!
Das Folgende sind nur Vorschläge.</p>
<p><strong>a)</strong> Also, das Spiel ist wirklich simpel. Wie bei jedem
ernstzunehmenden Spiel-Automaten wird die Schwierigkeit mit der Zeit immer
größer. Füge einen „Level“-Zähler hinzu, der in der <code>frame</code>-Funktion
gesetzt wird und der die Wahrscheinlichkeit erhöht, dass ein Invader in einem
bestimmten Spielzug erscheint. Zeige das aktuelle Level irgendwo auf dem
Bildschirm an, indem du die <code>text</code>-Funktion benutzt.</p>
<p><strong>b)</strong> Eine weitere tolle Funktion wäre es, verschiedene Arten
von Invaders zu haben. Ändere die <code>newInvader</code>-Funktion so, dass
sie einem neu erzeugten Invader eine Eigenschaft <code>type</code> gibt, die
zufällig gesetzt wird, z.B. so:</p>
<pre>function newInvader() {
var type = "normal";
if (Math.random() < 0.4)
type = "super";
else if (Math.random() < 0.2)
type = "superduper";
....
}</pre>
<p>Als nächstes ändere die Funktion <code>drawInvader</code> so, dass sie
verschiedene Typen bzw. Arten auch unterschiedlich darstellt (z.B. indem sie
einfach eine andere Farbe bekommen) und verändere <code>processBullets</code>
so, dass nicht-normale Invaders mit einer bestimmten Wahrscheinlichkeit
(wieder mit <code>Math.random</code>) einen Treffer einer Kugel überleben.</p>
<p><strong>c)</strong> Abschließend noch eine etwas größere Herausforderung:
Du könntest die Invaders horizontal vor- und zurückbewegen während sie
herabsinken.</p>
<p>Der schwierige Teil hier ist zu entscheiden, in welche Richtung die Invaders
bewegt werden sollen. Wenn sie sich synchron im Zickzack bewegen sollen, wie im
echten Space Invaders-Spiel, musst du für alle Invaders die gleiche Richtung
angeben. Dafür könntest du eine Zähler-Variable benutzen, die bei jedem Zug
erhöht wird. Sobald eine bestimmte Anzahl an Zügen erreicht ist (auch in
einer Variable gespeichert), muss dann die Richtung geändert werden, wobei
auch die Zähler-Variable auf Null zurückgesetzt wird und dann nach weiteren X
Zügen die Richtung wieder geändert wird.</p>