-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathpage4.html
126 lines (91 loc) · 4.56 KB
/
page4.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<head>
<title>Curriculum — page 4</title>
<link rel=stylesheet href="http://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>Curriculum: page 4, a game</h1>
<p>When discussing the material we were going to present for this
course, someone suggested that writing a game would be a great
introduction to programming. To my surprise, someone else mentioned
that they did not think writing a game was a very interesting
thing.</p>
<p>I've thought long and hard about what that latter remark might have
meant. I'm still confused.</p>
<p>If you are someone who can conceive of the notion of game
programming being boring, I must apologize to you. On this page, we
will work on a game.</p>
<h2 class=step>Look at it!</h2>
<h3 class=goal>Goal</h3>
<p>Stop believing that programming an interactive game is in any way
hard to do.</p>
<h3 class=inst>Instructions</h3>
<p>Open <a href="sandbox/#invaders.js" target=_blank>the game</a>.</p>
<p>Play the game. Think <em>"Yeah, that would have been impressive—if
this were 1970."</em></p>
<p>Read through the code and the comments.</p>
<h3 class=ex>Explanation</h3>
<p>With some extremely trivial computations, you can produce an
interactive game experience. Or some similarly engaging object, such
as a simulation of something (physics, life). Isn't that cool?</p>
<h2 class=step>Extend it</h2>
<h3 class=goal>Goal</h3>
<p>To deepen your understanding of the Invaders program, we try to
customize it and add some features.</p>
<h3 class=inst>Instructions</h3>
<p>Perform some or all of the modifications described below, and test
(at every little step) whether things still work as expected.</p>
<p>At any time, you can reload the page (Ctrl-R / Cmd-R) to go back to
the starting program. To undo just your last few changes, use the
Ctrl-Z / Cmd-Z key in the editor. If at any point, you have a program
that you feel you might want to return to, use the 'Save' control at
the top of the page to store it. You can then recall it with the
'Load' control (note that this will overwrite your current
program).</p>
<p>When stuck, don't sit around grinding your teeth. Ask the coaches
for help early and often.</p>
<h3 class=ex>Explanation</h3>
<p>If you have your own ideas for improvements to the game, or, for
the more adventurous, for a completely different game you'd like to
write—go right ahead. The below are merely suggestions.</p>
<p><strong>A)</strong> So, for one thing, this game is really easy.
What every self-respecting arcade game does is increase difficulty
over time. Add a 'level' counter that gets updated somehow in
the <code>frame</code> function, and that influences the chance that a
new invader will appear in a given turn. Display the current level
somewhere on the screen using the <code>text</code> function.</p>
<p><strong>B)</strong> Another neat feature would be to have multiple
kinds of invaders. Make the <code>newInvader</code> function also add
a <code>type</code> property to the invader it creates, which it
randomly fills, for example like this:</p>
<pre>function newInvader() {
var type = "normal";
if (Math.random() < 0.4)
type = "super";
else if (Math.random() < 0.2)
type = "superduper";
....
}</pre>
<p>Then update the <code>drawInvader</code> function to draw different
types differently (for example, by simply giving them a different
color), and update <code>processBullets</code> so that non-normal
invaders have a certain chance (use <code>Math.random</code> again) to
survive being hit by a bullet.</p>
<p><strong>C)</strong> Finally, and slightly more challenging to do,
you could make the invaders move back and forth horizontally during
their descent.</p>
<p>The tricky part for this is to decide which way to move the
invaders. If you want to make them zig-zag left and right
synchronously, as in the original Space Invaders game, you'll have to
use the same direction for all invaders. You could keep a counter
variable for this that is incremented every turn, and that, when
reaching some number of turns, causes the direction in which the
invaders move (also a variable) to be flipped. You then also reset the
counter back to zero when the flip happens, so that after another X
turns it will flip the direction again.</p>
<h2>That's all for today</h2>
<p>I hope you enjoyed your day.</p>
<p>If you raced through the material and have a lot of time to spare,
consider either inventing some more challenges for yourself, or seeing
if you can help one of your classmates.</p>