-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
206 lines (202 loc) · 6.13 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Starship SORADES 13K – A HTML5 Arcade Game by Thiemo Mättig</title>
<meta name="description" content="A scrolling shooter in the vein of Raptor: Call of the Shadows and Warning Forever. Are you able to survive 13 waves?">
<meta name="author" content="Thiemo Mättig">
<meta name="date" content="2012-09-11">
<link rel="canonical" href="http://maettig.com/code/canvas/starship-sorades-13k/">
<style>
* {
color: #EEE;
font-family: Consolas, monospace;
}
html, body {
/* I tried to use a gradient in the background but it doesn't look good */
background: #111;
height: 100%;
margin: 0;
/* This avoids the page scrolling up when pressing the cursor keys */
overflow: hidden;
padding: 0;
text-align: center;
width: 100%;
}
a:hover {
background: #FFF;
color: #000;
text-decoration: none;
}
#container, canvas {
display: block;
margin: auto;
/* WebKit browsers support max-height: 100% but I removed it because of layout issues */
max-width: 100%;
}
canvas {
background: #000;
/* I hat to remove the box-shadow because it made th game very slow in Opera */
}
/* The description is placed under the canvas by default */
#desc {
background: #10161C;
background-image: -webkit-linear-gradient(#000 -8px, #10161C 16px);
background-image: -moz-linear-gradient(#000 -8px, #10161C 16px);
background-image: -o-linear-gradient(#000 -8px, #10161C 16px);
background-image: linear-gradient(#000 -8px, #10161C 16px);
border: 1px solid #234563;
border-radius: 0 0 .4em .4em;
border-top-style: none;
margin: 0 auto;
max-width: 990px;
padding: .6em 16px;
text-shadow: 0 1px 2px #000;
}
.note {
font-size: smaller;
margin: 0 0 1.5em;
}
svg {
/* WebKit browsers aren't able to scale the SVG properly when the height is missing */
height: 24px;
width: 24px;
vertical-align: top;
}
#tweet {
background: #10161C;
background-color: rgba(18, 24, 31, .9);
border: 1px solid #234563;
border-radius: .4em;
bottom: 3em;
box-shadow: 0 0 1em #000;
box-sizing: border-box;
left: 50%;
line-height: 1.6em;
margin: 0 0 0 -20em;
padding: 1.5em 0;
position: absolute;
width: 40em;
}
form {
margin: 0;
padding: 0;
}
input {
background: #1A2A39;
background-color: rgba(50, 100, 145, .2);
border: 1px solid #234563;
font-size: 100%;
width: 37em;
}
/* This set of media queries adjust the vertical alignment of the canvas */
@media all and (min-height: 784px) {
#container {
padding-top: 8px;
}
}
@media all and (min-height: 800px) {
#container {
padding-top: 16px;
}
}
@media all and (min-height: 832px) {
#container {
padding-top: 32px;
}
}
@media all and (min-height: 896px) {
#container {
padding-top: 64px;
}
}
@media all and (min-height: 1024px) {
#container {
padding-top: 128px;
}
}
/* Move the description to the left if there is enough space */
@media all and (min-width: 1176px) {
#container {
width: 1176px;
}
canvas {
float: right;
margin-left: 16px;
}
#desc {
background-image: -webkit-linear-gradient(left, #10161C 136px, #000 160px);
background-image: -moz-linear-gradient(left, #10161C 136px, #000 160px);
background-image: -o-linear-gradient(left, #10161C 136px, #000 160px);
background-image: linear-gradient(left, #10161C 136px, #000 160px);
border-radius: .4em;
border-style: solid;
margin: 0;
padding-top: 1.5em;
text-align: right;
}
.note, a.logo {
display: block;
}
a.logo:hover {
background: none;
}
svg {
height: 64px;
margin: 0 86px -32px -32px;
width: 64px;
}
}
</style>
</head>
<body>
<div id="container">
<canvas width="1024" height="768" id="c" moz-opaque>
<h1>SORADES 13K</h1>
<p>This arcade space shooter requires a modern HTML5 enabled web browser and JavaScript enabled.
It was made for the <a href="http://js13kgames.com/">js13kGames</a> competition in 2012.</p>
</canvas>
<p id="desc">
<a href="http://maettig.com/code/canvas/starship-sorades-13k/" rel="bookmark" title="Permalink to this game">SORADES 13K</a>
is a <a href="http://www.gramambo.de/index.php?option=com_content&view=article&id=4&Itemid=5#Spiele">Gramambo game</a>
by <a href="http://maettig.com/">Thiemo Mättig</a>
<span class="note">(<a href="https://twitter.com/maettig">@maettig</a>).</span>
<span class="note">SFX by <a href="http://www.sven-gramatke.de/">Sven Gramatke</a>.</span>
<span class="note">
Press X to fire,
<a href="#" onclick="return toggleFullscreen()">F for fullscreen</a>.
</span>
<span class="note">Licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/de/">CC-BY-SA-3.0-DE</a>.</span>
<span class="note">
Contains <a href="https://github.com/mneubrand/jsfxr">jsfxr</a>
by <a href="https://twitter.com/markusneubrand">Markus Neubrand</a>,
based on <a href="http://code.google.com/p/as3sfxr/">as3sfxr</a>
(<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>)
by <a href="http://tomvian.com/">Thomas Vian</a>,
based on <a href="http://www.drpetter.se/project_sfxr.html">sfxr</a>
(<a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>)
by <a href="http://www.drpetter.se/">Tomas Pettersson</a>.
</span>
<a href="http://www.gramambo.de/" title="Gramambo" class="logo">
<!-- From my SVG size coding gallery at http://maettig.com/code/svg/svg-size-coding-gallery.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<g fill="#08F" stroke="#000">
<path d="M7 3s1 1 0 2L5 7S4 8 3 7L1 5S0 4 1 3l2-2s1-1 2 0z" stroke-width=".3" />
<path d="M4 4h.5c1 0 1 1.6 0 1.6h-.9c-1.5 0-1.5-3.2 0-3.2h1.9" />
</g>
</svg>
</a>
</p>
</div>
<p id="tweet">
<!-- The default message will be changed by the script -->
<a href="https://twitter.com/share?text=I+played+SORADES+13K.&url=http://maettig.com/code/canvas/starship-sorades-13k/&via=maettig"
target="twitter">Click here to tweet your score</a><br>
or blog it:<br>
<input value="I played SORADES 13K: http://maettig.com/code/canvas/starship-sorades-13k/">
</p>
<!-- I merged both scripts to a single file and used Closure Compiler to compress it. This also makes it run a lot faster. -->
<script src="jsfxr.js"></script>
<script src="starship-sorades-13k.js"></script>
</body>
</html>