-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
276 lines (276 loc) · 8.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>TitleRun</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap"
rel="stylesheet"
/>
<meta property="og:title" content="TitleRun" />
<meta property="og:url" content="https://titlerun.xyz" />
<meta property="og:image" content="img/og-image.png" />
<meta
property="og:description"
content="The game that only exists in your title bar"
/>
</head>
<body>
<div class="background"></div>
<div class="block">
<div class="title">
<h1>
<span class="logo"><span class="triangle">▸</span></span> TitleRun
</h1>
</div>
<p class="highlight">
Welcome to TitleRun — the game that only exists in your title bar
</p>
<p>
It's simple... Jump over the obstacles to survive and reach the flag!
</p>
<p class="a">
<strong>Note:</strong> This game requires the browsers title bar and
keyboard input. For the best experience, use Chrome/Firefox with this
tab in a separate window.
</p>
<h2>Confused?</h2>
<p>Wondering where the game is..? Well — Look up!</p>
<p><em>Ahem</em>, the <strong>*title bar*</strong></p>
<h2>Need help?</h2>
<p>Here's some keyboard shortcuts:</p>
<ul class="bulletless">
<li><kbd>SPACE</kbd> / <kbd>▴</kbd> to jump</li>
<li><kbd>S</kbd> to start the game</li>
<li><kbd>R</kbd> to reload</li>
<li><kbd>1</kbd>-<kbd>3</kbd> to load a specific map</li>
</ul>
<p class="producthunt">
<a
href="https://www.producthunt.com/posts/titlerun?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-titlerun"
target="_blank"
><img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=204412&theme=dark"
alt="TitleRun | Product Hunt Embed Badge"
width="250px"
height="54px"
/></a>
</p>
</div>
<div class="block">
<h2>Wanna make your own map?</h2>
<p>
You've played a few rounds and want to try creating a new map? Awesome!
You can add a map via your browsers <code>localStorage</code>. Simply,
set the <code>map</code> key-value pair. The value can be any string of
unicode characters.
</p>
<p><em>e.g., this is what map #1 looks like:</em></p>
<p>
<span class="underline"
>                ▖     ▖        ▘     ▖   ▖    ▘    ▖      ⚑</span
>
</p>
<a href="img/local-storage.png" target="_blank">
<img
src="img/local-storage.png"
alt="Chrome Developer Tools, Application Section, LocalStorage"
/>
</a>
<figcaption>
<em>
<a
href="https://developers.google.com/web/tools/chrome-devtools/storage/localstorage"
rel="noreferrer"
>Here's a guide for Chrome</a
>; other browsers work similarly</em
>
</figcaption>
<p>
Hit <kbd>M</kbd> to clear the local <code>map</code> key-value pair.
</p>
<p>
Here's some building blocks <em>(i.e., unicode characters)</em> to get
you started:
</p>
<ul>
<li>
<span class="underline"> </span> whitespace for the map
<em
>*trust me it's there (i.e.,
<a
href="https://unicodelookup.com/# /1"
rel="noreferrer"
target="_blank"
>en quad</a
>)</em
>
</li>
<li>
<span class="underline">▖</span> bottom block
<em
>(i.e.,
<a
href="https://unicodelookup.com/#▖/1"
rel="noreferrer"
target="_blank"
>quadrant lower left</a
>)</em
>
</li>
<li>
<span class="underline">▘</span> top block
<em
>(i.e.,
<a
href="https://unicodelookup.com/#▘/1"
rel="noreferrer"
target="_blank"
>quadrant upper left</a
>)</em
>
</li>
<li>
<span class="underline">⚑</span> goal flag,
<em>*optional, but a nice touch</em>
<em
>(i.e.,
<a
href="https://unicodelookup.com/#⚑/1"
rel="noreferrer"
target="_blank"
>black flag</a
>)</em
>
</li>
</ul>
<p>
<em>
*Only top/bottom blocks cause collisions (i.e., need to be avoided
while playing). All other unicode characters will not harm the player
(yep, even <code>ãbç</code> ...)</em
>
</p>
</div>
<div class="block">
<h2>Bookmarklet ▶</h2>
<p>
Now you can play TitleRun on any unsuspecting website
<em>(yep, even Wikipedia or Confluence)</em>. Simply drag the button
below to your bookmarks bar. You can then click on the bookmark to
launch TitleRun anywhere.
</p>
<a href="#BOOKMARKLET" class="highlight bookmarklet">Launch TitleRun</a>
<p>
Thanks to
<a href="https://twitter.com/dnlggr" rel="noreferrer" target="_blank"
>@dnlggr</a
>
for the idea to run TitleRun as a bookmarklet.
</p>
</div>
<div class="block">
<h2>Source ℹ</h2>
<p>
The game is all open-source vanilla JavaScript. You can check it out on
<a
href="https://github.com/janniks/TitleRun"
rel="noreferrer"
target="_blank"
>GitHub</a
>.
</p>
<h2>Feedback ★</h2>
<p>
Feel free to
<a
href="https://twitter.com/intent/tweet?text=Check+out+this+game+https://titlerun.netlify.app"
rel="noreferrer"
target="_blank"
>tweet about TitleRun</a
>
and
<a
href="https://twitter.com/messages/compose?recipient_id=82144365"
rel="noreferrer"
target="_blank"
>let me know what you think
</a>
about the game!
</p>
<h2>About ⚑</h2>
<p>
I'm <a href="https://janniks.com" target="_blank">Jannik</a> and I like
to work on small fun projects on the side. Feel free to follow me on
Twitter
<a href="https://twitter.com/jnnksbrt" rel="noreferrer" target="_blank"
>@jnnksbrt</a
>. You can also show your appreciation via Ko-fi.
<br />
<br />
<script
type="text/javascript"
src="https://ko-fi.com/widgets/widget_2.js"
></script>
<script type="text/javascript">
kofiwidget2.init("Support Me", "#333", "X8X81QOPW");
kofiwidget2.draw();
</script>
<br />
<br />
</p>
<p>
This project was inspired by a tweet from
<a href="https://twitter.com/round" rel="noreferrer" target="_blank"
>@round</a
>
</p>
<blockquote class="twitter-tweet" data-theme="dark">
<p lang="en" dir="ltr">
im gonna make a website that exists entirely in the URL bar
</p>
— Maxim Leyzerovich (@round)
<a
href="https://twitter.com/round/status/1263301030877380608?ref_src=twsrc%5Etfw"
>May 21, 2020</a
>
</blockquote>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
<p>
Well, it's not really a website and it's not in the address bar, but
<em>inspired</em> nontheless.
</p>
</div>
<footer>
<small>
© Copyright —
<a href="https://twitter.com/jnnksbrt" rel="noreferrer" target="_blank"
>@jnnksbrt</a
>
—
<a href="https://janniks.com" target="_blank">janniks.com</a></small
>
</footer>
<script src="game.js"></script>
<script
async
defer
data-domain="titlerun.xyz"
src="https://plausible.io/js/plausible.js"
></script>
<script
src="https://coyote.titlerun.xyz/script.js"
site="RXMXQMUD"
defer
></script>
</body>
</html>