-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
188 lines (167 loc) · 8.26 KB
/
index.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
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
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project 1: Spider Game</title>
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch|Didact+Gothic" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="splash">
<!-- splash screen !-->
<div class="inside" id="splash-screen">
<img id='title' src='images/title.gif'>
<img id='start' src='images/start-button.gif'>
</div>
</div>
<div id="story">
<!-- info screen !-->
<div class="inside story-screen">
<img src='images/title-story-screen.gif'>
<table class="story-table" width="600">
<tr>
<td class="side">
<img src="images/furry-yellow.png" id="furry-yellow">
</td>
<td>
<div>
<p>"Help me. Hey, I said help me!"</p>
<p>You tear your eyes away from the television long enough to see a furry, four-inch spider descending from the ceiling.</p>
<p>"Your mom is after us again! Help us!"</p>
<p>You decide to ignore the impossibility of an arthropod with a cerebrum the size of a... baby spider... somehow possessing the higher brain function to learn a human language, and then somehow developing the necessary body parts to make sounds that would be recognizable to other human beings.
"Why should I help you? You're just another pest."</p>
<p>"You can't judge our entire species by a few poisonous apples!" the spider protests. "That's positively species-ist of you!"</p>
<p>You pause to consider. "You know what? You're right. I've been grossly intolerant of other species without making any attempt to understand them. Instead
of trying to learn more about the reasons for their existence and the intricacies of their social behavioral patterns, I merely label their presence as an inconvenience to my own and exterminate them for the sake of expediency."</p>
<p>The spider nods. "That's right. A lot of us are totally harmless to you, you know! In fact, we eat other insects in your house that do transmit disease, like mosquitoes, fleas, flies, cockroaches... we eat practically everything else you guys kill. You should be thanking us!"</p>
<img src="images/arrow.gif" id="arrow-1">
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="story-2">
<!-- 2nd info screen !-->
<div class="inside story-screen">
<img src="images/title-story-screen.gif">
<table class="story-table" width="600">
<tr>
<td class="side">
<img src="images/furry-yellow.png" id="furry-yellow">
</td>
<td>
<div>
<p>"Alright then. Thanks a lot."</p>
<p>"I don't need your meaningless thanks; I need your help!" the spider snaps. "Your mom just found a lot of us dwelling near her window, and one of our scouts just spotted her rolling up some newspaper! You know how nearsighted she is... she can't tell the difference between those of us who are poisonous and those of us who aren't hurting anybody.
She's going to kill us all! And right after I just finished making my last mortgage payment!"</p>
<p>You decide to ignore the poorly-written joke and simply volunteer your help so that you can commence playing this game. "Alright. I'll help. What do you want me to do?"</p>
<p>"Just tell her you'll take care of the spider situation. I have no problem sacrificing all my poisonous relatives just to save my kind," the spider replies.
"We'll teach you how to recognize the difference between the poisonous ones and the harmless ones so that you can selectively exterminate."</p>
<p>"So... you want me to save your species by killing off part of your species."</p>
<p>"It's called a paradox. You need to pay more attention in school." The spider sighs. "Whatever. The point is, you're our only hope. Only you can <span>save our spiders!</span></p>
<img src="images/arrow.gif" id="arrow-2">
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="instructions">
<!-- 2nd info screen !-->
<div class="inside story-screen">
<img src="images/title-story-screen.gif">
<table class="story-table" width="600">
<tr>
<td class="side">
<img src="images/furry-yellow.png" id="furry-yellow">
</td>
<td>
<div>
<h1>Objective</h1>
<p>Your job is to kill as many black widow spiders as you can. Your score will increase every time you kill a black widow;
however, if you accidentally kill a harmless jumping spider, your score will decrease. Get 13 points in under 30 seconds and you win!</p>
<img src='images/jumping-spider-intro.jpg' id='intro-jumping'>
<p><span>Jumping spiders</span> are the largest family of spiders, making up 13% of the species. They have a flap on their butt called a "bum flap,"
and it varies in color depending on the spider. They have eight eyes in two distinct rows that allow them an almost 360-degree view. They move like Spiderman --
they first attach a silk safety rope to where they are, and then they jump forward, ensuring that they'll always land safely at their next location.
<p><hr></p>
<img src='images/black-widow-intro.jpg' id='intro-widow'>
<p>The female <span>black widows</span> have a black hourglass body and red spots on its belly. The venom from its bite is said to be 15 times stronger than a rattlesnake's. However, very
few reported bite cases end in death. The male black widows are gray or brown, and are completely harmless to humans. The female spiders sometimes kill and eat their partners after mating,
which gave this infamous spider its name.
<img src='images/ready-to-play.gif' id="ready-to-play">
<!-- <button id="instructions-button">Ready to Play?</button> -->
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="game">
<!-- game screen !-->
<div class="inside">
<table id="gameboard">
<tr>
<td class="spider-column">
<img class="true spider p0" src="images/animated-widow.gif">
</td>
<td class="spider-column">
<img class="false spider p1" src="images/animated-jumping.gif">
</td>
<td class="spider-column">
<img class="true spider p2" src="images/animated-widow.gif">
</td>
<td class="spider-column">
<img class="true spider p1" src="images/animated-widow.gif">
</td>
<td class="spider-column">
<img class="false spider p2" src="images/animated-jumping.gif">
</td>
<td class="spider-column">
<img class="true spider p0" src="images/animated-widow.gif">
</td>
</tr>
</table>
<!-- User Console -->
<table id="console">
<tr>
<td class="console">
Level: 1
</td>
<td class="console" id="timer">
Timer:
</td>
<td class="console" id="score">
Score: 0
</td>
</tr>
</table>
</div>
</div>
<div id="win">
<!-- win screen !-->
<div class="inside replay-screen">
<img src="images/win-message.gif" class="replay-message">
<img src="images/happy-spider.jpg" class="replay-spider">
<img src="images/replay.gif" class="replay-yes">
<!-- <button class='replay'>Play Again?</button> -->
</div>
</div>
<div id="lose">
<!-- lose screen !-->
<div class="inside replay-screen">
<img src="images/lose-message.gif" class="replay-message">
<img src="images/sad-spider.jpg" class="replay-spider">
<img src="images/replay.gif" class="replay-yes">
<!-- <button class='replay'>Play Again?</button> -->
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/main.js"></script>
<script>
init();
</script>
</body>
</html>