-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
360 lines (359 loc) · 21.8 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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Hipster Dad is a top-down jQuery adventure game. Every object in this game is pulled from the attributes of HTML elements, and styled in CSS.">
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="media/fonts/fontstyle.css" type="text/css" />
<!--<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Hipster Dad</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29665463-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Hipster Dad</h1>
</div>
<div id="data"></div>
<div id="game">
<div id="overlay"></div>
<div id="achievement"></div>
<div id="room" title="Bedroom">
<div id="player"></div>
<div id="projectiles"></div>
<div id="elements"></div>
</div>
<div id="hud">
<h1 id="name">Bedroom</h1>
<div id="money">$0</div>
<ul id="health"><li></li><li></li><li></li><li></li><li></li></ul>
<div id="sound" class="off"></div>
</div>
</div>
<div id="title">
<div id="title-content">
<div title="Controls" id="t-options" class="hidden">
<table cellpadding="0" cellspacing="0">
<tr><td>Up:<span>38</span></td><td class="key-press">Up Arrow</td></tr>
<tr><td>Down:<span>40</span></td><td class="key-press">Down Arrow</td></tr>
<tr><td>Left:<span>37</span></td><td class="key-press">Left Arrow</td></tr>
<tr><td>Right:<span>39</span></td><td class="key-press">Right Arrow</td></tr>
<tr><td>Use Item:<span>81</span></td><td class="key-press">Q</td></tr>
<tr><td>Action:<span>87</span></td><td class="key-press">W</td></tr>
<tr><td>Select Item:</td><td>Number row 1-9</td></tr>
</table>
<p>Double click on the control to change it. Your key must not already be bound to another control.
<div class="link" id="title-default">Revert to Defaults</div>
</div>
<div title="About" id="t-about" class="hidden">
Hipster Dad is a project I started in order to learn more about JavaScript and jQuery. Every object in this game is pulled from the attributes of HTML elements, and styled in CSS. The story of the game follows Warren, a hipster-turned-father who never really learned how to live in the real world. Eventually this game will be a full sandbox- and exploration-type game, where you can go to a number of places in the town. Enjoy!
</div>
<div title="Credits" id="t-credits" class="hidden">
Game concept, design and development by Trevor Moore. Artwork by Tim Giusti and stolen from the internet. Thanks Google!
</div>
</div>
<div class="title-choices">
<div class="link" id="title-start">Start Game</div>
<div class="link" id="title-options">Controls</div>
<div class="link" id="title-about">About</div>
<div class="link" id="title-credits">Credits</div>
<a class="link" id="title-blog" target="_blank" href="http://blog.hipsterdadgame.com/">Blog</a>
<p class="version">v0.2.3 Pre-alpha</p>
</div>
</div>
<ul id="inventory"></ul>
<ul id="loading">
<li title="Your Bedroom" class="inside">
<span id="start">top:134px,left:76px</span>
<div title="Fire" class="stuck message hurt fire">
<span class="hurt">3</span>
<span class="message">Don't know why there's a fire in here. Better not touch it.</span>
</div>
<div title="Bookshelf" class="stuck bookshelf bookshelf1 message"><span class="message">"I've already read all these."</span></div>
<div title="Bookshelf" class="stuck bookshelf bookshelf2 message"><span class="message">"I've already read all these."</span></div>
<div title="Bookshelf" class="stuck bookshelf bookshelf3 message"><span class="message">"I've already read all these."</span></div>
<div title="Bookshelf" class="stuck bookshelf bookshelf4 message"><span class="message">"I've already read all these."</span></div>
<div title="Dresser" class="stuck dresser interact outfit-dependent"><span class="interact outfit0"><p>Do you want to get dressed?</p><input id="dressed_yes" type="button" value="Yes"><input id="change_clothes_no" type="button" value="No"></span><span class="interact outfit1"><p>Do you want to get undressed?</p><input id="undressed_yes" type="button" value="Yes"><input id="change_clothes_no" type="button" value="No"></span></div>
<div title="Bed" class="bed stuck message"><span class="message">You can't go to bed, you just got up.</span></div>
<div title="Chest" class="container chest stuck">
<div title="cake" class="mobile cake"><span class="sprite">1</span></div>
</div>
<div id="doorS" title="Hallway" class="exit room1 door-00"></div>
</li>
<li title="Hallway" class="inside">
<div title="Family Portrait" class="stuck wallart wallart1 message"><span class="message">It's a portrait of your family. You look really cool.</span></div>
<div title="Landscape Painting" class="stuck wallart wallart2 message"><span class="message">It's a painting of a landscape.</span></div>
<div id="doorN" title="Your Bedroom" class="exit room0 door-00"></div>
<div id="doorS" title="Evelyn's Bedroom" class="exit room2 door-01"></div>
<div id="doorE" title="Living Room" class="exit room3 door-02"></div>
</li>
<li title="Evelyn's Bedroom" class="inside">
<div title="Bookshelf" class="stuck bookshelf bookshelf1 message"><span class="message">"There are quite a lot of books for an 8-year-old."</span></div>
<div title="Bookshelf" class="stuck bookshelf bookshelf2 message"><span class="message">"There are quite a lot of books for an 8-year-old."</span></div>
<div title="Bed" class="bed stuck message"><span class="message">You'll be in trouble if she finds you sleeping in her bed again.</span></div>
<div id="doorN" title="Hallway" class="exit room1 door-01"></div>
<div title="Piggy Bank" class="interact stuck piggy-bank">
<span class="interact"><p>It's your daughter's piggy bank. Do you want to smash it?</p><input id="piggy_smash_yes" type="button" value="Yes"><input id="piggy_smash_no" type="button" value="No"></span>
<div title="Money" class="cash money">
<span class="money">25</span>
</div>
</div>
<div title="Office Key" class="key mobile door-03"></div>
</li>
<li title="Living Room" class="inside">
<div title="Table" class="stuck message table"><span class="message">Good old table.</span></div>
<div title="Grandfather Clock" class="stuck message grandfather-clock time"><span class="message">It's your family's grandfather clock. The time is <span class="time">DEMON WRATH</span></span></div>
<div title="TV" class="stuck message tv"><span class="message">"This show is the best."</span></div>
<div id="doorW" title="Hallway" class="exit room1 door-02"></div>
<div id="doorS" title="Office" class="exit locked room4 door-03"><span class="locked">This door is locked. You'll need to use the Office key to open it.</span></div>
<div id="doorE" title="Kitchen" class="exit room5 door-04"></div>
<div id="doorN" title="Your Porch" class="exit room6 door-05"></div>
</li>
<li title="Office" class="inside">
<div id="doorN" title="Living Room" class="exit room3 door-03"></div>
<div title="Desk" class="stuck desk"></div>
<div title="Gun" class="gun mobile"><span class="sprite">2</span></div>
<div title="Computer" class="stuck computer interact">
<span class="interact"><h3 class="bank">CoolBank Online</h3><p>Welcome to CoolBank! Please enter your PIN to log in.</p><input id="computer_pin_ID" type="text"><input id="computer_pin_submit" type="button" value="Submit"><input id="computer_logout" type="button" value="Cancel"></span>
</div>
</li>
<li title="Kitchen" class="inside">
<div id="doorW" title="Living Room" class="exit room3 door-04"></div>
<div title="Fridge" class="stuck message fridge"><span class="message"></span></div>
<div title="Counter" class="stuck counter counter1"></div>
<div title="Counter" class="stuck counter counter2"></div>
<div title="Island" class="stuck island"></div>
</li>
<li title="Your Porch" class="outside">
<div id="doorS" title="Living Room" class="exit room3 door-05"></div>
<div id="doorN" title="Your Driveway" class="exit room7 door-06"></div>
<div title="The Earl of Southwestington" class="stuck message person earl outfit-dependent equip-dependent"><span class="message outfit0">"What are you doing outside in your underwear?"</span><span class="message outfit1">"Hello. I'm not doing anything suspicious. I am the Earl of Southwestington."</span><span class="message equip1">"What are you going to do with that cake?"</span><span class="message equip2">"HELP! A GUN!"</span></div>
<div title="House" class="stuck house"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Sidewalk" class="passThru sidewalk stuck"></div>
<div title="Driveway" class="passThru driveway stuck"></div>
<div title="Garage" class="message garage stuck"><span class="message">Garage door is jammed, you keep forgetting to fix it.</span></div>
</li>
<li title="Your Driveway" class="outside">
<div id="doorS" title="Your Porch" class="exit room6 door-06"></div>
<div id="doorN" title="Forest Entrance" class="exit room9 door-08"></div>
<div id="doorE" title="Allen's Driveway" class="exit room10 door-09"></div>
<div id="doorW" title="Culdesec" class="exit room8 door-07"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Fence" class="stuck fence fence3"></div>
<div title="Fence" class="stuck fence fence4"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk3 stuck"></div>
<div title="Driveway" class="passThru driveway stuck"></div>
<div title="Tree" class="stuck tree tree1"></div>
<div title="Tree" class="stuck tree tree2"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Culdesac" class="outside">
<div id="doorE" title="Your Driveway" class="exit room7 door-07"></div>
<div id="doorN" title="Playground" class="exit room16 door-15"></div>
<div id="doorS" title="Jerry's Porch" class="exit room17 door-16"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk4 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk3 stuck"></div>
<div title="Your Driveway" class="passThru driveway stuck"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Fence" class="stuck fence fence3"></div>
<div title="Fence" class="stuck fence fence4"></div>
<div title="Tree" class="stuck tree tree1"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Forest Entrance" class="outside">
<div id="doorS" title="Your Driveway" class="exit room7 door-08"></div>
<div title="Deadly Forest" class="stuck forest-entrance hurt">
<span class="hurt">10</span>
</div>
<div title="Tree" class="stuck tree tree15"></div>
<div title="Tree" class="stuck tree tree16"></div>
<div title="Tree" class="stuck tree tree1"></div>
<div title="Tree" class="stuck tree tree2"></div>
<div title="Tree" class="stuck tree tree3"></div>
<div title="Tree" class="stuck tree tree4"></div>
<div title="Tree" class="stuck tree tree5"></div>
<div title="Tree" class="stuck tree tree6"></div>
<div title="Tree" class="stuck tree tree7"></div>
<div title="Tree" class="stuck tree tree8"></div>
<div title="Tree" class="stuck tree tree9"></div>
<div title="Tree" class="stuck tree tree10"></div>
<div title="Tree" class="stuck tree tree11"></div>
<div title="Tree" class="stuck tree tree12"></div>
<div title="Tree" class="stuck tree tree13"></div>
<div title="Tree" class="stuck tree tree14"></div>
<div title="Sign" class="stuck sign message"><span class="message">Warning! Do not enter the Deadly Forest! It is very dangerous!</span></div>
<div title="Old Man™ Coins" class="mobile coins"></div>
</li>
<li title="Allen's Driveway" class="outside">
<div id="doorW" title="Your Driveway" class="exit room7 door-09"></div>
<div id="doorE" title="Road" class="exit room12 door-11"></div>
<div id="doorS" title="Allen's Porch" class="exit room11 door-10"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Fence" class="stuck fence fence3"></div>
<div title="Fence" class="stuck fence fence4"></div>
<div title="Fence" class="stuck fence fence5"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk3 stuck"></div>
<div title="Driveway" class="passThru driveway stuck"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
<div title="Tree" class="stuck tree tree1"></div>
<div title="Tree" class="stuck tree tree2"></div>
<div title="Tree" class="stuck tree tree3"></div>
<div title="Tree" class="stuck tree tree4"></div>
<div title="Tree" class="stuck tree tree5"></div>
<div title="Tree" class="stuck tree tree6"></div>
</li>
<li title="Allen's Porch" class="outside">
<div id="doorN" title="Allen's Driveway" class="exit room10 door-10"></div>
<div id="doorS" title="Allen's House: Living Room" class="exit room19 locked door-18"><span class="locked">"Stupid Allen always locking his door like he's got something to prove. I'll show him, I know he keeps a spare key around here somewhere ..."</span></div>
<div title="House" class="stuck house"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Sidewalk" class="passThru sidewalk stuck"></div>
<div title="Driveway" class="passThru driveway stuck"></div>
<div title="Plant" class="stuck container plant1 left">
<div title="Allen's House Key" class="key mobile door-18"></div>
</div>
<div title="Plant" class="stuck plant1 right"></div>
<div title="Plant" class="stuck plant2 garden1"></div>
<div title="Plant" class="stuck plant3 garden1"></div>
<div title="Plant" class="stuck plant2 garden2"></div>
<div title="Plant" class="stuck plant3 garden2"></div>
<div title="Garage" class="garage locked exit"><span class="locked">"No good, Allen's garage is locked too."</span></div>
</li>
<li title="Road" class="outside">
<div id="doorW" title="Allen's Driveway" class="exit room10 door-11"></div>
<div id="doorE" title="Road" class="exit room13 door-12"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
<div title="Tree" class="stuck tree tree1"></div>
</li>
<li title="Road" class="outside">
<div id="doorW" title="Road" class="exit room12 door-12"></div>
<div id="doorE" title="Road" class="exit room14 door-13"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Road" class="outside">
<div id="doorW" title="Road" class="exit room13 door-13"></div>
<div id="doorE" title="Road" class="exit room15 door-14"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Road" class="outside">
<div id="doorW" title="Road" class="exit room14 door-14"></div>
<div id="doorE" title="Town" class="exit room18 door-17"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Playground" class="outside">
<div id="doorS" title="Culdesac" class="exit room8 door-15"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Tree" class="stuck tree tree1"></div>
<div title="Tree" class="stuck tree tree2"></div>
<div title="Tree" class="stuck tree tree3"></div>
<div title="Tree" class="stuck tree tree4"></div>
<div title="Tree" class="stuck tree tree5"></div>
<div title="Tree" class="stuck tree tree6"></div>
<div title="Tree" class="stuck tree tree7"></div>
<div title="Frog" class="stuck frog message"><span class="message">Ribbit.</span></div>
</li>
<li title="Jerry's Porch" class="outside">
<div id="doorN" title="Culdesac" class="exit room8 door-16"></div>
<div title="House" class="stuck house"></div>
<div title="Fence" class="stuck fence fence1"></div>
<div title="Fence" class="stuck fence fence2"></div>
<div title="Sidewalk" class="passThru sidewalk stuck"></div>
<div title="Driveway" class="passThru driveway stuck"></div>
<div title="Garage" class="garage locked exit"><span class="locked">This door is locked.</span></div>
</li>
<li title="Town" class="outside">
<div id="doorW" title="Road" class="exit room15 door-17"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk1 stuck"></div>
<div title="Sidewalk" class="passThru sidewalk sidewalk2 stuck"></div>
<div title="Road" class="passThru hroad stuck">
<div class="line passThru"></div>
</div>
</li>
<li title="Allen's House: Living Room" class="inside">
<div title="Table" class="stuck message table"><span class="message">"What's this dumb table doing in the middle of the room?"</span></div>
<div id="doorE" title="Allen's House: Hallway" class="exit room22 door-21"></div>
<div id="doorS" title="Allen's House: Office" class="exit room21 door-20"></div>
<div id="doorW" title="Allen's House: Kitchen" class="exit room20 door-19"></div>
<div id="doorN" title="Allen's Porch" class="exit room11 door-18"></div>
</li>
<li title="Allen's House: Kitchen" class="inside">
<div id="doorE" title="Allen's House: Living Room" class="exit room19 door-19"></div>
<div title="Fridge" class="stuck message fridge"><span class="message">"Stupid Allen's stupid kid's stupid A+ book report."</span></div>
<div title="Counter" class="stuck counter counter1"></div>
<div title="Counter" class="stuck counter counter2"></div>
<div title="Island" class="stuck island"></div>
</li>
<li title="Allen's House: Office" class="inside">
<div id="doorN" title="Allen's House: Living Room" class="exit room19 door-20"></div>
</li>
<li title="Allen's House: Hallway" class="inside">
<div id="doorN" title="Allen's House: Allen's Bedroom" class="exit room23 door-22"></div>
<div id="doorS" title="Allen's House: Rook's Bedroom" class="exit room24 door-23"></div>
<div id="doorW" title="Allen's House: Living Room" class="exit room19 door-21"></div>
</li>
<li title="Allen's House: Allen's Bedroom" class="inside">
<div id="doorS" title="Allen's House: Hallway" class="exit room22 door-22"></div>
</li>
<li title="Allen's House: Rook's Bedroom" class="inside">
<div id="doorN" title="Allen's House: Hallway" class="exit room22 door-23"></div>
</li>
</ul>
<div id="music">
</div>
</body>
</html>