-
Notifications
You must be signed in to change notification settings - Fork 0
/
gamehistory.html
351 lines (278 loc) · 20.8 KB
/
gamehistory.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game History | King of Space</title>
<link rel="shortcut icon" type="image/png" href="img/kosabt.png">
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha256-gvEnj2axkqIj4wbYhPjbWV7zttgpzBVEgHub9AAZQD4=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/historystyles.css">
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</head>
<body>
<!--Navbar-->
<header>
<div class="container">
<div>
<a href="index.html">
<img class="navlogo" src="img/kosnavwhite.png">
</a>
</div>
<input class="hamburger-button" type="checkbox" id="hamburger-button" />
<label for="hamburger-button">
<div></div>
</label>
<div class="menu">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="author.html">Author</a></li>
<li><a href="#1" class="active">Game History</a></li>
<li><a href="characters.html">Characters</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="credits.html">Team</a></li>
</ul>
</nav>
<div class="buttons">
<a href="game/game.html" class="button primary">PLAY GAME</a>
</div>
</div>
</div>
</header>
<!--End Section-->
<!--Landing Page-->
<div id="1" class="page-content parallax_header">
<div>
<div class="landingheader">GAME HISTORY</div>
</div>
</div>
<!--End Section-->
<!--King of Space Origin Info-->
<section id="origin">
<div id="ognwrapper">
<div class="ognheader">KING OF SPACE ORIGIN</div>
<div class="ogngridcontainer">
<!--Hide image and text on mobile screen, show on desktop-->
<div class="ognitem hide-mobile"><img src="img/tamasterog.png" class="ognimg"></div>
<div class="ognitem2 hide-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">THE
STORY</span><br><br>
A dark science-fictional ritual of fertility and regeneration, King of Space takes place in an abandoned starship, circling the edges of a plague-ridden and collapsing solar system, where an escaped terrorist meets the last star-captain and his ship's Priestess. Old man and young, young woman and ageless starship meet and meet again as enemies, allies, and lovers.<br><br>
The story has elements of gaming; an unwise move can send you to the kitchen ("hundreds of tiny sandwiches, all alike") or into the rocky caverns of the intelligent and unpleasant starship, where a very persistent elevator is waiting to have a conversation. You can meet the Lady Nii's ancient, dreadful lover, King Brady, or become him. You can fall into a maze of love, or find the dance at the center of the world that regenerates the ship.<br><br>
This reconstruction involves new art and illustrations, multiple mini-games, interactive environments, and complex gameplay.<br><br>
</div>
<!--End-->
<!--Hide image and text on desktop screen, show on mobile-->
<div class="ognitem show-mobile"><img src="img/tamasterog.png" style="max-width: 80%;" class="ognimg">
</div>
<div class="ognitem2 show-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">THE
STORY</span><br><br>
A dark science-fictional ritual of fertility and regeneration, King of Space takes place in an abandoned starship, circling the edges of a plague-ridden and collapsing solar system, where an escaped terrorist meets the last star-captain and his ship's Priestess. Old man and young, young woman and ageless starship meet and meet again as enemies, allies, and lovers.<br><br>
The story has elements of gaming; an unwise move can send you to the kitchen ("hundreds of tiny sandwiches, all alike") or into the rocky caverns of the intelligent and unpleasant starship, where a very persistent elevator is waiting to have a conversation. You can meet the Lady Nii's ancient, dreadful lover, King Brady, or become him. You can fall into a maze of love, or find the dance at the center of the world that regenerates the ship.<br><br>
This reconstruction involves new art and illustrations, multiple mini-games, interactive environments, and complex gameplay.<br><br>
Not for kids.
</div>
<!--Hide image and text on mobile screen, show on desktop-->
<div class="ognitem2 hide-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">WHY A
GAME?</span><br><br>
<em>King of Space</em> is an interactive narrative begun in 1988 when text-based and adventure games had gained popularity. These kinds of games rely heavily on a strong story-line and, so, are often authored by established writers. Doug Adams, Thomas M. Disch, Robert Pinsky, and Nick Montfort, like Sarah Smith, are known for publishing print literature along with experimenting with creating video games. Contemporary text-based and adventure games are often published on the Twine platform, open web languages, and other approaches, and remain today important genres of video games.
</div>
<div class="ognitem hide-mobile"><img src="img/smith-folio-front.png" class="ognimg" style="width: 55%">
</div>
<!--End-->
<!--Hide image and text on desktop screen, show on mobile-->
<div class="ognitem show-mobile"><img src="img/smith-folio-back.png" style="max-width: 60%;"
class="ognimg">
</div>
<div class="ognitem2 show-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">WHY A
GAME?</span><br><br>
<em>King of Space</em> is an interactive narrative begun in 1988 when text-based and adventure games had gained popularity. These kinds of games rely heavily on a strong story-line and, so, are often authored by established writers. Doug Adams, Thomas M. Disch, Robert Pinsky, and Nick Montfort, like Sarah Smith, are known for publishing print literature along with experimenting with creating video games. Contemporary text-based and adventure games are often published on the Twine platform, open web languages, and other approaches, and remain today important genres of video games.
</div>
<!--End-->
</div>
</div>
</section>
<!--End Section-->
<!--Background / Creation-->
<section id="bkg">
<div id="bkgwrapper">
<div class="bkgheader">ORIGINAL DESIGN</div>
<div class="bkggridcontainer">
<div class="bkgitem hide-mobile"><img src="img/ogtitle2.png" class="bkgimg" style="width: 80%;"></div>
<div class="bkgitem show-mobile"><img src="img/ogtitle2.png" class="bkgimg" style="width: 100%;"></div>
<div class="bkgitem2"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">INTERFACE</span><br><br>
<em>King of Space</em> was begun in 1988 by Sarah Smith (text) and Mark Bernstein (programming) and published in 1991 by Eastgate Systems, Inc. Although at the time of its release color and robust media were not yet possible, the work nonetheless offered a media-rich environment involving bitmapped images by artist Matthew Mattingly, 8-bit music by Michael Derzhinsky, and 2D animations by Mattingly, Bernstein, and others, for its 317 screens of text and 25 different endings.
</div>
<div class="bkgitem2 hide-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">PUBLISHED
FOLIO BY EASTGATE SYSTEMS, INC. 1991</span><br><br>
At the time of its release, <em>King of Space</em> was packaged in a gray vinyl folio that held the two floppy disks on which the game was stored and a manual that provided information about the game and how to play it. This book-like method of presentation laid a trail of breadcrumbs from the world of print to that of e-lit and played an important role in educating audiences about what was to come.
</div>
<div class="bkgitem hide-mobile"><img src="img/kostitle-og.png" class="bkgimg" style="width: 50%;">
</div>
<!--Hide image and text on desktop screen, show on mobile-->
<div class="bkgitem show-mobile"><img src="img/kostitle-og.png" style="width: 70%;" class="bkgimg">
</div>
<div class="bkgitem2 show-mobile"><span
style="font-size: 30px; letter-spacing: 3px; font-weight: 500;">PUBLISHED
FOLIO BY EASTGATE SYSTEMS, INC. 1991</span><br><br>
At the time of its release, <em>King of Space</em> was packaged in a gray vinyl folio that held the two floppy disks on which the game was stored and a manual that provided information about the game and how to play it. This book-like method of presentation laid a trail of breadcrumbs from the world of print to that of the electronic and, so, played an important role in educating audiences about what was to come. <br><br><br>
</div>
<!--End-->
</div>
</div>
<div id="designwrapper">
<div class="fotorama">
<video autoplay loop muted
src="img/3d-mac.mp4" type="video/mp4" data-arrows="true" data-click="false"
data-swipe="true">
</video>
<video autoplay loop muted src="img/3d-pamphlet.mp4" type="video/mp4" data-arrows="true" data-click="false"
data-swipe="true">
</video>
<video autoplay loop muted src="img/3d-card.mp4" type="video/mp4" data-arrows="true" data-click="false"
data-swipe="true">
</video>
<video autoplay loop muted src="img/3d-floppy.mp4" type="video/mp4" data-arrows="true" data-click="false"
data-swipe="true">
</video>
</div>
<div class="caption">As a pre-web form of interactive media, <em>King of Space</em> was published on physical media. These images showcase a hand-made 3D model of one of the computers the work would have been used to access it along with print materials and one of the two floppy disks packaged together that comprised the work.</div>
</div>
</section>
<!--End Section-->
<!--Original Media-->
<section id="assets">
<div id="assetwrapper">
<div class="assetsheader">ORIGINAL MEDIA</div>
<div class="fotorama" data-nav="thumbs">
<img src="img/greatship-og.png" data-caption="Greatship | Original Illustration by Matthew Mattingly"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/niikoi-og.png"
data-caption="Lady Nii and Koi | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/niidream-og.png"
data-caption="Lady Nii's Dream | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/kettle-og.png" data-caption="Elephant Kettle | Original Illustration by Matthew Mattingly"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/niibirth-og.png" data-caption="Lady Nii Gives Birth to Tam Rosse | Original Illustration by Matthew Mattingly"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/sleeping.png" data-caption="King Brady | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/windowog.png" data-caption="Horizator | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/niiandsleep.png" data-caption="KoS Early Advertising | Original illustrations by Matthew Mattingly; Design and Text by Sarah Smith"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/ogcover.png"
data-caption="KoS Early Advertising | Original Illustration & Design by Sarah Smith" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/tamasterog.png" data-caption="Early Advertising | Original Illustration by Matthew Mattingly"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/kostitle-og.png"
data-caption="KoS Booklet Cover | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-booklet-inside1.jpg"
data-caption="KoS Booklet Inside 1 | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-booklet-inside2.png"
data-caption="KoS Booklet Inside 2 | Original Illustration by Darcy Drayton" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-booklet-inside3.jpg"
data-caption="KoS Booklet Inside 3" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-card-front.png" data-caption="Registration Card Packaged with Work"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/smith-card-back.png" data-caption="Front of Registration Card"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/smith-directions-front.png" data-caption="Installation Instructions"
data-arrows="true" data-click="false" data-swipe="true">
<img src="img/smith-diskette1-front.png"
data-caption="Disk 1 Front" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-diskette1-back.png"
data-caption="Disk 1 Back" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-diskette2-front.png"
data-caption="Disk 2 Front" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-diskette2-back.png"
data-caption="Disk 2 Back" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-folio-front.png"
data-caption="Folio Cover | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-folio-back.png"
data-caption="Folio Back | Original Illustration by Matthew Mattingly" data-arrows="true"
data-click="false" data-swipe="true">
<img src="img/smith-package.png" data-caption="KoS Package | Original Illustration by Matthew Mattingly"
data-arrows="true" data-click="false" data-swipe="true">
</div>
<div class="caption"><br>Unlike most early interactive games, <em>King of Space</em> used original art extensively. The nine works of art displayed here were created for the game by artist Matthew Mattingly (see more of his work at www.matthewmattingly.com). Also displayed are images of the original folio, manual pages, floppy disks, and other components of the work.</div>
</div>
</section>
<!--End Section-->
<!--Play Game-->
<section class="parallax">
<a href="game/game.html"><button class="playbtn">PLAY GAME</button></a>
</section>
<!--End Section-->
<!--Footer-->
<section id="footer">
<div>
<a href="index.html">
<img class="footerlogo" src="img/kosfooterwhite.png">
</a>
<hr>
<div class="footergridcontainer">
<div class="footeritem"><a href="index.html">Home</a></div>
<div class="footeritem"><a href="author.html">Author</a></div>
<div class="footeritem"><a href="#1">Game History</a></div>
<div class="footeritem"><a href="characters.html">Characters</a></div>
<div class="footeritem"><a href="restoration.html">Restoration</a></div>
<div class="footeritem"><a href="credits.html">Team</a></div>
</div>
<div class="socialgridcontainer">
<div class="socialitem"><a href="https://www.instagram.com/cmdc.dtc/" target="_blank"><img
src="img/instagram.png"></a></div>
<div class="socialitem"><a href="https://www.facebook.com/cmdc.dtc" target="_blank"><img
src="img/facebook.png"></a></div>
<div class="socialitem"><a href="https://twitter.com/CMDC_WSUV" target="_blank"><img
src="img/twitter.png"></a></div>
<div class="socialitem"><a href="https://www.tiktok.com/@kingofspace_restored" target="_blank"><img
src="img/tiktok.png"></a></div>
</div>
</div>
</section>
<!--End Section-->
<!--Copyright-->
<footer style="background-color: black;">
Copyright © 2022
</footer>
<!--End Section-->
<script>
/*
THIS IS NOT NECESSARY ON REGULAR WEBSITES
If you're using a library like React, you'll need the mobile menu to close once a link has been clicked.
That's all the below code does.
*/
const hamburgerButton = document.getElementById('hamburger-button');
const headerLinks = document.querySelectorAll('header .container .menu a');
headerLinks.forEach((link) => {
link.addEventListener('click', (e) => hamburgerButton.checked = false);
})
</script>
</body>
</html>