-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·223 lines (206 loc) · 13.3 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
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Black Brick Road of O.Z. HTML5 Story Game</title>
<meta name="description" content="The Black Brick Road of Oz: a Wizard of OZ story game in HTML5, a collaboration between cartoonists and web developer.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript">
// analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3631048-6']);
_gaq.push(['_trackPageview', 'http://rachelnabors.com/blackbrickroad']);
(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>
<meta property="og:title" content="The Black Brick Road of Oz: a Wizard of OZ story game in HTML5" />
<meta property="og:image" content="http://rachelnabors.com/blackbrickroad/i_bbr.jpg" />
<meta property="og:url" content="http://share.rachelnabors.com/bbr" />
<meta property="og:description" content="The Black Brick Road of O.Z. is an ongoing interactive story/comic based on the Wizard of Oz. This installment is an HTML5 collaboration between the artist Xamag and web developer Rachel Nabors." />
<link rel="author" href="https://plus.google.com/+RachelNabors/posts"/>
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Black Brick Road of Oz: a Wizard of OZ story game in HTML5" />
<meta itemprop="description" content="The Black Brick Road of O.Z. is an ongoing interactive story/comic based on the Wizard of Oz. This installment is an HTML5 collaboration between the artist Xamag and web developer Rachel Nabors." />
<meta itemprop="image" content="http://rachelnabors.com/blackbrickroad/i_bbr.jpg" />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@rachelnabors" />
<meta name="twitter:title" content="The Black Brick Road of O.Z. HTML5 story/game" />
<meta name="twitter:description" content="An interactive take on the Wizard of Oz in HTML5 with @RachelNabors" />
<meta name="twitter:image:src" content="http://rachelnabors.com/blackbrickroad/i_bbr.jpg" />
</head>
<body data-currentFloor="default" data-progress="loading">
<div id="credits">
<div class="sidebar">
<h1 class="logo"><a href="http://thebbrofoz.webcomic.ws/" target="blank">
The Black Brick Road of O.Z. #47</a></h1>
<div class="creator xamag">
<a href="http://xamag.deviantart.com/" target="blank">
<div class="pic"></div>
Xamag <span class="job">story & art</span>
</a>
</div>
<div class="creator rachel">
<a href="http://rachelnabors.com/" target="blank">
<div class="pic"></div>
Rachel <del>the Great</del> <span class="job">code</span>
</a>
</div>
<div class="creator incognizant">
<a href="http://incognizant.wix.com/site" target="blank">
<div class="pic"></div>
Incognizant <span class="job">music</span>
</a>
</div>
</div>
<div class="spiel">
<p><a href="http://thebbrofoz.webcomic.ws/" target="blank">The Black Brick Road of O.Z.</a> is an ongoing interactive story/comic based on the Wizard of Oz. Art, story, and concept by the young Russian creator <a href="http://xamag.deviantart.com/" target="blank">Xamag</a>, brought to life with HTML5, CSS3 animations, and JavaScript by American cartoonist-turned-coder <a href="http://rachelnabors.com/" target="blank">Rachel Nabors</a>.</p>
<p><em>Psst—go <a href="http://thebbrofoz.webcomic.ws/comics/1" target="blank">read the whole series</a> and check out <a href="http://codepen.io/rachelnabors/full/lqswg">this other page we did together</a>.</em></p>
<div class="sauce">
<a href="https://github.com/rachelnabors/blackbrickroad">
source code
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="34px" height="34px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.61,0.33c-9.11,0-16.5,7.34-16.5,16.41
c0,7.25,4.73,13.4,11.28,15.57c0.83,0.15,1.13-0.36,1.13-0.79c0-0.39-0.01-1.42-0.02-2.79c-4.59,0.99-5.56-2.2-5.56-2.2
c-0.75-1.9-1.83-2.4-1.83-2.4c-1.5-1.02,0.11-1,0.11-1c1.66,0.12,2.53,1.69,2.53,1.69c1.47,2.51,3.86,1.78,4.8,1.36
c0.15-1.06,0.58-1.78,1.05-2.19c-3.66-0.41-7.52-1.82-7.52-8.11c0-1.79,0.64-3.26,1.7-4.4c-0.17-0.42-0.74-2.08,0.16-4.34
c0,0,1.39-0.44,4.54,1.68c1.32-0.36,2.73-0.55,4.13-0.55c1.4,0.01,2.81,0.19,4.13,0.55c3.15-2.12,4.53-1.68,4.53-1.68
c0.9,2.26,0.33,3.93,0.16,4.34c1.06,1.15,1.7,2.61,1.7,4.4c0,6.3-3.86,7.69-7.53,8.1c0.59,0.51,1.12,1.51,1.12,3.04
c0,2.19-0.02,3.96-0.02,4.5c0,0.44,0.3,0.95,1.13,0.79c6.55-2.17,11.27-8.32,11.27-15.56C33.11,7.67,25.72,0.33,16.61,0.33z"/>
</svg>
is on github</a>
</div>
<div class="plz-donate">
<h2>Wanna help?</h2>
<p>We're collecting tips to help bring the series to Kindle Fire. Tips are split between us both and help pay for expenses! Donate wtih Paypal via the piggy bank below:</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GT59EZ92HG7B6">
<input type="image" src="img/tips.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div id="to-credits">
<a class="credit-control" href="#credits" id="open-credits">Who made this and how?</a>
<div class="credit-control" id="close-credits">kthxbai!</div>
</div>
</div>
<div id="ui">
<div class="instructions">
<h1>Instructions:</h1>
<p>To put the house in order, simply <strong>drag and drop</strong> the objects to their rightful places!</p>
</div>
<div class="instructions-photos">
<h1>Instructions:</h1>
<p>Collect the photo scraps.</p>
</div>
<div id="dialog-intro" class="dialog" data-dialog="1"></div>
<div class="to-do">
<div class="wrapper">
<h1>To clean up:</h1>
<ul id="to-clean">
<li class="upstairs" data-items="rug">Rug</li>
<li class="upstairs" data-items="stool">Stool</li>
<li class="upstairs" data-items="shoe1;shoe2" data-group="shoes">Shoes</li>
<li class="upstairs" data-items="pillowup1;pillowup2" data-group="pillowsup">2 pillows</li>
<li class="upstairs" data-items="books">Books</li>
<li class="upstairs" data-items="telescope">Telescope</li>
<li class="upstairs" data-items="toy">Plushie</li>
<li class="upstairs" data-items="musicbox">Music Box</li>
<li class="upstairs" data-items="broom">Broom</li>
<li class="upstairs" data-items="pot1;pot2;pot3;pot4" data-group="pots">4 pots</li>
<li class="upstairs" data-items="scoop">Scoop</li>
<li class="downstairs" data-items="oilcan">Oil can</li>
<li class="downstairs" data-items="pillow1;pillow3" data-group="pillows">2 pillows</li>
<li class="downstairs" data-items="bottle1;bottle2;bottle3">3 bottles</li>
<li class="downstairs" data-items="blanket">Blanket</li>
<li class="downstairs" data-items="washboard">Washboard</li>
<li class="downstairs" data-group="boots" data-items="boot1;boot2">Boots</li>
<li class="downstairs" data-items="pitcher">Pitcher</li>
<li class="downstairs" data-items="ovenfork">Oven fork</li>
<li class="downstairs" data-items="chair1">Chair</li>
<li class="downstairs" data-items="tablecloth">Table cloth</li>
<li class="downstairs" data-items="cloak">Cloak</li>
<li class="downstairs" data-items="bucket">Bucket</li>
<li class="downstairs" data-items="rifle">Rifle</li>
<li class="downstairs" data-items="samovar">Samovar</li>
<li class="downstairs" data-items="mug1;mug2">2 mugs</li>
<li class="downstairs" data-items="sack1">Sack</li>
<li class="downstairs" data-items="axe">Axe</li>
<li class="downstairs" data-items="shovel">Shovel</li>
<li class="downstairs" data-items="tools">Box of tools</li>
<li class="downstairs" data-items="firewood1;firewood2;firewood3;firewood4;firewood6" data-group="firewood">5 logs</li>
</ul>
</div>
</div>
<div id="dialog-outro" class="dialog" data-dialog="1"></div>
</div>
<div id="frame">
<div id="house">
<div class="props">
<div class="sack2-prop"></div>
<div class="stairs-prop"></div>
<div class="nightstand-prop"></div>
<div class="laundry-prop"></div>
<div class="oven-prop"></div>
<div class="table-prop"></div>
<div class="chair2-prop"></div>
<div class="pot-prop"></div>
<div class="spoons-prop"></div>
<div class="bed-prop"></div>
<div class="pillow2-prop"></div>
<div class="pillowup3-prop"></div>
<div class="basket-prop"></div>
<div class="bedup-prop"></div>
<div class="bedback-prop"></div>
<div class="cradle-prop"></div>
<div class="armchair-prop"></div>
</div>
<ul id="item-places" class="places"></ul>
<ul id="messy-items" class="messy"></ul>
<ul id="letters" class="letters-to-read">
<li class="aug03"></li>
<li class="aug31"></li>
<li class="dec15"></li>
<li class="jun09"></li>
<li class="jun18"></li>
<li class="oct11"></li>
</ul>
<ul id="photos" class="torn-photos">
<li class="photo1" data-scraps="3"></li>
<li class="photo2" data-scraps="2"></li>
<li class="photo3" data-scraps="4"></li>
<li class="photo4" data-scraps="2"></li>
<li class="photo5" data-scraps="3"></li>
<li class="photo6" data-scraps="3"></li>
<li class="photo7" data-scraps="3"></li>
</ul>
<div class="to_upstairs warp" data-setFloor="upstairs"></div>
<div class="to_downstairs warp" data-setFloor="downstairs"></div>
<div class="floor floor_upstairs"></div>
<div class="floor floor_downstairs"></div>
</div>
</div>
<div id="loading">
<div class="card">
<div class="loader"></div>
</div>
</div>
<div id="success">
<div class="card">
<p><a href="http://thebbrofoz.webcomic.ws/comics/1" target="_blank">Read the Rest of the Black Brick Road</a></p>
</div>
</div>
<script src="js/vendor/ifvisible-3.min.js"></script>
<script src="js/game.js"></script>
</body>
</html>