-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
391 lines (337 loc) · 13.4 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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> LD34 - Metaforski! (For lack of a better name!) </title>
<style>
* { padding: 0; margin: 0; }
canvas { background: "grey"; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="game" width="640" height="480"> Canvas goes here! </canvas>
<script>
// Seriously, it's the worst code ever. I sort of gave up midway. Don't judge me.
// 2015-12-13 (<--- to remind myself of when i wrote this abomination)
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var game_state = "intro";
var game_over = false;
var score = 0;
function clone(x) { return(JSON.parse(JSON.stringify(x))) }
function rand_int(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function rand_walk(curr, min, max) {
if (curr == min) return(min + 1);
if (curr == max) return(max - 1);
return(curr + [-1, 1][rand_int(0, 1)]);
}
var buffer_pattern = [
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ]
];
var blocks = clone(buffer_pattern).concat(clone(buffer_pattern));
var queued_pattern = clone(buffer_pattern);
var num_x = blocks[0].length; // 5
var num_y = blocks.length; // 7
var block_w = 315/num_x;
var block_h = 360/num_y;
var left_edge = (canvas.width - 315)/2;
var top_edge = 2;
function canv_pos_of(x, y) { return({ x: left_edge + block_w/2 + x * block_w, y: top_edge + block_h/2 + y * block_h }) }
function draw_block(x, y) {
block_center = canv_pos_of(x, y);
ctx.fillStyle = "steelblue";
ctx.strokeStyle = "darkblue";
ctx.lineWidth = 3;
ctx.fillRect(block_center.x - block_w/2, block_center.y - block_h/2, block_w, block_h);
ctx.strokeRect(block_center.x - block_w/2, block_center.y - block_h/2, block_w, block_h);
}
function draw_all_blocks() {
for (row = 0; row < num_y; row++) {
for (col = 0; col < num_x; col++) {
if (blocks[row][col] == 1) draw_block(col, row);
} } }
var pattern_library = [
(function() { // gates
var template = [
[ 1, 1, 1, 1 ],
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ],
[ 0, 0, 0, 0 ],
];
var_num_gates = rand_int(1, 4);
var result = [[0, 0, 0, 0]];
for(i = 0; i < var_num_gates; i++) {
opening_lower = rand_int(1, num_x - 2);
curr_lower = (JSON.parse(JSON.stringify(template)));
curr_lower[0][opening_lower] = 0;
opening_upper = rand_walk(rand_walk(rand_walk(opening_lower, 0, num_x - 1), 0, num_x - 1), 0, num_x - 1);
curr_upper = (JSON.parse(JSON.stringify(template)));
curr_upper[0][opening_upper] = 0;
result = curr_upper.concat(curr_lower).concat(result);
}
return(result);
}),
(function() { // tunnel
var template = [[1, 1, 1, 1]]
var result = [[0, 0, 0, 0]];
curr_open = rand_int(0, num_x - 1);
for(i = 0; i < rand_int(5, 40); i++) {
next_open = rand_walk(curr_open, 0, num_x - 1);
result = (JSON.parse(JSON.stringify(template))).concat(JSON.parse(JSON.stringify(template))).concat(result);
result[0][curr_open] = 0;
result[0][next_open] = 0;
result[1][curr_open] = 0;
curr_open = next_open;
}
return(result);
}),
(function() { // landmines
var template = [
[1, 0, 1, 0],
[0, 0, 0, 0],
[0, 1, 0, 1],
[0, 0, 0, 0]
];
result = [];
for(i = 0; i < rand_int(4, 5); i++) {
result = template.concat(result);
}
return(result);
}),
(function() { // sparse
var template = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
];
result = [];
for(i = 0; i < rand_int(2, 3); i ++) {
curr = JSON.parse(JSON.stringify(template));
curr[1][rand_int(0, num_x - 1)] = 1;
curr[3][rand_int(0, num_x - 1)] = 1;
result = curr.concat(result);
}
return(result);
}),
(function() { // bowtie
var template = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
];
result = [];
for(i = 0; i < rand_int(1, 2); i ++) {
curr = JSON.parse(JSON.stringify(template));
rand_1 = rand_int(0, num_x - 1)
curr[0][rand_1] = 1;
curr[1][rand_walk(rand_1, 0, num_x - 1)] = 1;
result = curr.concat(result);
}
return(result);
})
];
function go_faster() {
if (speed_multiplier > 15) speed_multiplier -= 5;
else if (speed_multiplier > 10) speed_multiplier -= 1;
}
function go_up (queued_pattern) { blocks.pop(); blocks.unshift(queued_pattern.pop()); }
function update_block_positions () {
height_reached++;
if (game_state != "play") return(0);
if (queued_pattern.length <= 3) {
upcoming_pattern = pattern_library[rand_int(0, pattern_library.length - 1)]();
queued_pattern = upcoming_pattern.concat(buffer_pattern).concat(queued_pattern);
next_safe_height = height_reached + 5;
}
if (height_reached == next_safe_height) go_faster();
go_up(queued_pattern);
}
var height_reached = 0;
var next_safe_height = 0;
var min_freq = 10;
var speed_multiplier = 15;
var millis = 0;
function update_logic () {
millis += min_freq;
if (millis % (min_freq * speed_multiplier) == 0) update_block_positions();
if (millis % 1000 == 0) update_score();
}
var updater = undefined;
function update_score () {
if (game_state == "play") {
score++;
}
}
function draw_bg () {
ctx.fillStyle = "white";
ctx.fillRect(left_edge, top_edge, num_x * block_w, num_y * block_h);
}
var player = {
x : 1,
y : num_x,
r : block_h * 0.2,
draw : function () { draw_ball(player.x, player.y, player.r) },
shiftl : function () { if (player.x > 0) { player.x-- } },
shiftr : function () { if (player.x < num_x - 1) { player.x++ } }
}
function draw_ball(x, y, r) {
ball_center = canv_pos_of(x, y);
ctx.fillStyle = "gold";
ctx.lineWidth = 3;
ctx.strokeStyle = "orange";
ctx.beginPath();
ctx.arc(ball_center.x, ball_center.y, r, 0, Math.PI * 2);
ctx.closePath();
ctx.fill(); ctx.stroke();
}
function collision_happened () {
// return(false); // for testing
return(blocks[player.y][player.x] == 1)
}
function draw_intro () {
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.font = "12px serif";
ctx.fillText("move the circle around to avoid the rectangles", canvas.width/2, canvas.height/2 - 40);
ctx.font = "bold 14px serif";
ctx.fillText("controls: left and right arrow keys, or a and d.", canvas.width/2, canvas.height/2 - 20);
ctx.font = "12px serif";
ctx.fillText("Are you ready? (Press any key!)", canvas.width/2, canvas.height/2 + 60);
}
var metaphors = [
["candy", "kid in candy shop", "wasted youth"],
["holes of some kind", "peg of some kind", "utter waste of time"],
["asteroids", "laika 2", "time spent as space-dog"],
["acid pools that look like fresh water", "tourists", "fond memories"],
["icebergs", "titanic", "violin-recital-count"],
["rebel scum", "plucky spherical spaceship", "time spent on dark side"],
["death", "you", "time spent in transitionary period"],
["urge to scratch", "itchy guy", "silent suffering"],
["people's personal spaces", "guy who just needs a hug", "silent suffering"],
["sapphire crystals", "blind guy", "time spent not knowing what he missed"],
["molten sulphur", "chicken on fire", "time spent in blaze of glory"],
["nothing", "nothing", "nothing at all"],
["fresh leaves in the wind", "calm, open skies", "somebody farting"],
["poor people", "rich guy in ferrari", "fake notes to raise + crush their hopes"],
["no skills", "little time", "fun had"],
["rival racers in relative motion", "your trusty motorbike", "burnt rubber"],
["literal obstacles in your path", "you, escaping from a stray octopus", "icky tentacles"],
["helpless fluffy kittens", "dark road", "blood from the last time you did this"],
["innocent people", "your unfounded rage", "broken relationships or something"],
["mounds of earth", "the sun's guidance", "lazy creeper"],
["walls of babylon", "the second law of thermodynamics", "the ravages of time"],
["pixel art for giant screens", "pixel art magnified", "pixel poop-trail"],
["your dad's toenail clippings", "your mom's indifference", "resentment building up"],
["your absentee father", "your try-hard mom", "your messed-up life"],
["rectangular rain", "circular sun", "some sort of tapeworm, presumably"],
["windows into your soul", "linux into your mind", "macs up your ass"],
["the sheer difficulty of some things", "motivation levels", "small, worthwhile successes"],
["lazy dogs", "a quick brown fox", "the inevitable chem-trail"],
["the zen state of mind", "you", "the inevitable regrets"],
["intrusive thoughts about sex", "your mind", "um... i'd rather not say this time, actually"],
["memories of your ex", "your mind", "unfounded rage"],
["the absurdities of life", "you", "your illusory achievements"],
["fungal cheese", "bacteria", "something disgusting, no doubt"],
["chocolate bars", "a fat guy on a diet", "his longest streak, the poor man"],
["internet time-sinks", "work that needs to be done", "work that somehow happened"],
["distractions", "focus", "some... results, hopefully"],
["spittle from your professor's mouth", "inattentive student you", "nothing but doodles in your notebook"],
["pools of moisture", "a spore of some sort", "ugh.. whatever this is"],
["inspiration", "you trying too hard", "shitty art"],
["awkward memories from high-school", "you trying to sleep", "hours of rest, lost forever"],
["a metaphor", "you, not getting it", "your futile attempts"],
["responsibilities", "you", "your fears and failures"],
["trees", "ski-dude or ski-dudette", "yeti"],
["a circle", "rectangles", "mount sumeru"],
];
function draw_are_you_ready () {
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.font = "12px serif";
ctx.fillText("This time, the rectangles represent:", canvas.width/2, canvas.height/2 - 60);
ctx.font = "bold 14px serif";
ctx.fillText(metaphors[metaphor_num][0], canvas.width/2, canvas.height/2 - 35);
ctx.font = "12px serif";
ctx.fillText("The circle represents:", canvas.width/2, canvas.height/2 );
ctx.font = "bold 14px serif";
ctx.fillText(metaphors[metaphor_num][1], canvas.width/2, canvas.height/2 + 25);
ctx.font = "12px serif";
ctx.fillText("And your score represents:", canvas.width/2, canvas.height/2 + 60);
ctx.font = "bold 14px serif";
ctx.fillText(metaphors[metaphor_num][2], canvas.width/2, canvas.height/2 + 85);
ctx.font = "12px serif";
ctx.fillText("(PRESS ANY KEY TO START!)", canvas.width/2, canvas.height/2 + 140);
}
function game_overer () {
clearInterval(updater);
exclaim_text = exclaim_choices[rand_int(0, exclaim_choices.length - 1)];
game_state = "outro";
}
function draw_play () {
draw_bg();
draw_all_blocks();
player.draw();
if (score > 0) {
ctx.fillStyle = "black";
ctx.font = "bold 12px serif";
ctx.fillText("Score: " + score, 40, 40);
}
window.onBlur = game_overer;
if (collision_happened()) game_overer();
}
var exclaim_choices = ["BOING!", "CRASH!", "OH NOES!", "WELP!", "HMM...", "AHA!", "AWW, MAN!" ];
function draw_outro () {
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.font = "bold 12px serif";
ctx.fillText(exclaim_text + " GAME OVER!", canvas.width/2, canvas.height/2 - 30);
ctx.font = "12px serif";
ctx.fillText(metaphors[metaphor_num][2] +" amounted to: ", canvas.width/2, canvas.height/2);
ctx.font = "bold 20px serif";
ctx.fillText(score + " seconds!", canvas.width/2, canvas.height/2 + 30);
ctx.font = "12px serif";
ctx.fillText("Once you reach 60, nothing special happens! Go for it!", canvas.width/2, canvas.height/2 + 60);
ctx.font = "12px serif";
ctx.fillText("(But be proud of " + metaphors[metaphor_num][1] + " too)", canvas.width/2, canvas.height/2 + 90);
}
function draw_frame () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (game_state == "intro") draw_intro();
else if (game_state == "are_you_ready") draw_are_you_ready();
else if (game_state == "play") draw_play();
else if (game_state == "outro") draw_outro();
requestAnimationFrame(draw_frame);
}
function reset_game () {
updater = setInterval(update_logic, min_freq);
score = 0;
speed_multiplier = 25;
height_reached = 0;
next_safe_height = 0;
blocks = clone(buffer_pattern).concat(clone(buffer_pattern)).concat([0, 0, 0, 0, 0]).concat([0, 0, 0, 0, ]);
queued_pattern = clone(buffer_pattern);
update_block_positions();
game_state = "play";
}
function keyDownHandler(e) {
if (e.keyCode == 37 || e.keyCode == 65) player.shiftl();
else if (e.keyCode == 39 || e.keyCode == 68) player.shiftr();
else if (game_state == "intro" || game_state == "outro") {
game_state = "are_you_ready";
metaphor_num = rand_int(0, metaphors.length - 1);
}
else if (game_state == "are_you_ready") reset_game();
}
document.addEventListener("keydown", keyDownHandler, false);
draw_frame()
</script>
</body>
</html>