-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (128 loc) · 9.69 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Marian Meres <marian@meres.sk>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules/bootstrap/dist/css/bootstrap-reboot.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
<title>Snake bites two! Classic snake-like game for 1 or 2 players</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-24912372-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-24912372-2');
</script>
<link rel="stylesheet" href="app-v5/app.css">
</head>
<body>
<script data-name="icon_check_circle" type="application/x-ejs">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</script>
<script data-name="snake_eyes" type="application/x-ejs">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle stroke="black" stroke-width="2" cx="33" cy="50" r="10" fill="white"/>
<circle stroke="black" stroke-width="2" cx="66" cy="50" r="10" fill="white"/>
</svg>
</script>
<script data-name="apple" type="application/x-ejs">
<svg width="100%" height="100%" viewBox="0, 0, 1000, 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M509.982,393.658 C491.73,262.813 601.264,68.46 662.277,104.058 C723.291,139.657 741.881,241.265 510.016,393.874 L509.982,393.658 z" fill="#009210"/>
<path stroke="rgba(0, 0, 0, .3)" stroke-width="30" stroke-linecap="round" d="M818.404,381.27 C735.009,248.399 595.188,381.774 526.289,365.446 C457.39,349.118 312.134,226.334 210.98,346.235 C109.82,466.139 144.561,587.96 213.251,686.264 C281.946,784.568 415.657,819.61 476.57,744.127 C513.493,814.191 651.599,825.669 733.365,737.939 C815.135,650.208 901.795,514.143 818.404,381.27" fill="#E91B1B"/>
</svg>
</script>
<script data-name="lollipop" type="application/x-ejs">
<svg width="100%" height="100%" viewBox="0, 0, 1000, 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M880.16,833.517 L602.933,562.091 C599.093,558.331 583.781,567.683 568.903,582.879 C554.025,598.076 544.996,613.584 548.836,617.344 L826.063,888.77 C829.906,892.532 845.219,883.177 860.097,867.98 C874.975,852.784 884.002,837.279 880.16,833.517" fill="#999"/>
<path d="M232.438,233.03 C332.362,133.837 493.779,134.428 592.972,234.352 C692.165,334.277 691.572,495.695 591.647,594.888 C491.723,694.081 330.306,693.486 231.113,593.562 C131.92,493.637 132.513,332.223 232.438,233.03" fill="#FFDC00"/>
<path d="M601.202,429.951 C627.329,368.813 626.033,304.331 602.82,249.506 C579.023,193.315 532.364,147.244 468.488,124.621 C404.611,102.003 336.019,107.255 276.769,134.033 C218.955,160.16 170.129,206.897 144.002,268.031 C110.156,347.232 111.791,430.667 141.797,501.528 C172.382,573.752 232.281,632.942 314.235,661.967 C396.194,690.992 495.372,672.434 552.721,643.742 C613.177,613.496 665.98,512.36 665.98,431.646 C665.98,481.618 588.499,568.428 527.962,595.787 C468.861,622.5 400.962,627.917 338.277,605.715 C275.587,583.517 229.564,537.745 205.833,481.706 C181.522,424.296 180.435,356.128 208.346,290.817 C228.537,243.578 265.617,207.761 309.249,188.039 C351.44,168.971 399.843,165.074 444.446,180.873 C489.054,196.669 521.841,229.318 538.784,269.329 C556.307,310.706 557.045,359.921 536.858,407.164 C524.391,436.341 501.625,458.406 474.899,470.483 C449.618,481.909 420.71,484.279 394.185,474.886 C367.659,465.492 348.117,445.963 337.966,421.989 C327.231,396.644 326.828,366.378 339.3,337.202 C344.049,326.084 352.5,317.783 362.312,313.344 C370.688,309.559 380.095,308.711 388.538,311.702 C396.986,314.694 403.288,321.103 406.651,329.046 C410.589,338.354 410.657,349.67 405.908,360.784 L470.251,383.574 C480.941,358.562 480.32,331.983 470.687,309.223 C460.469,285.1 440.291,265.268 412.575,255.45 C384.863,245.637 355.268,247.839 329.828,259.337 C305.834,270.185 285.642,289.399 274.953,314.407 C256.545,357.482 257.5,403.019 273.93,441.811 C290.936,481.966 324.35,514.918 370.148,531.134 C415.947,547.354 465.038,543.629 507.383,524.485 C548.287,506.003 582.794,473.026 601.202,429.951" fill="#FF5900"/>
</svg>
</script>
<script data-name="poo" type="application/x-ejs">
<svg width="100%" height="100%" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg">
<path stroke="white" stroke-width="5" stroke-linecap="round" d="M408.667,344.667 C387.925,367.046 353.769,355.335 310.667,360 C267.564,364.665 275.906,399.59 188.085,404.255 C154.863,406.019 112.856,400.86 90.487,390.059 C68.119,379.257 48.538,350.456 52.04,324.994 C55.542,299.532 84.572,296.602 99.951,298.377 C115.33,300.151 163.09,310.08 185.719,301.334 C161.474,300.459 114.739,284.772 114.739,284.772 C114.739,284.772 89.074,270.287 85.164,250.465 C81.254,230.644 90.355,209.285 118.518,196.16 C146.68,183.034 153.444,187.022 191.467,182.071 C229.49,177.119 212.802,113.185 225.815,103.583 C238.828,93.981 261.239,106.36 285.882,130.797 C310.525,155.234 320.58,204.92 291.218,224.215 C328.27,226.214 371.173,239.591 394,255.333 C413.333,268.667 434,317.333 408.667,344.667 z" fill="#754823"/>
</svg>
</script>
<script data-name="icon_sound_on" type="application/x-ejs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-volume-up" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
<path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z"/>
</svg>
</script>
<script data-name="icon_sound_off" type="application/x-ejs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-volume-mute" viewBox="0 0 16 16">
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"/>
</svg>
</script>
<noscript>This app requires javascript!</noscript>
<div id="top">
<h1>Snake bites two</h1>
<p>Eat apples and lollipops. Avoid poo-poo. Cross borders. Enjoy!</p>
</div>
<div id="game-wrap">
<div id="scores"></div>
<section id="game">
<div class="board"><div style="padding: 2rem; text-align: center">Loading, please wait...</div></div>
<div class="modal" hidden></div>
</section>
</div>
<div id="bottom">
<p>
Use <kbd>←</kbd> <kbd>↑</kbd> <kbd>↓</kbd> <kbd>→</kbd> for <b>player1</b>
and <kbd>A</kbd> <kbd>W</kbd> <kbd>S</kbd> <kbd>D</kbd> for <b>player2</b>.
</p>
<p class='cpr'>
<small>
Copyright 2021 <a href="mailto:marian@meres.sk">Marian & Lukáš Mereš</a>,
source on <a href="https://github.com/marianmeres/snake-bites-two">GitHub</a>.
</small>
</p>
</div>
<audio id='soundApple' preload><source src="app-v5/apple.mp3" type="audio/mpeg" /></audio>
<audio id='soundBonus' preload><source src="app-v5/bonus.mp3" type="audio/mpeg" /></audio>
<audio id='soundCrash' preload><source src="app-v5/crash.mp3" type="audio/mpeg" /></audio>
<script type="module">
import template from "./node_modules/lodash-es/template.js";
import debounce from "./node_modules/lodash-es/debounce.js";
import { $each, $on, qs, qsa } from "./dist/utils/dom.js";
import { EJS } from "./app-v5/ejs.js";
import { boardHTML, scores, speed, twoPlayerSwitch } from "./app-v5/stores.js";
import { cmpScores } from "./app-v5/components/scores.js";
import { cmpBoard } from "./app-v5/components/board.js";
import { cmpModal } from "./app-v5/components/modal.js";
import { initialize } from "./app-v5/game.js";
// compile this landing page ejs templates (if any)
$each(qsa('script[type="application/x-ejs"]'), (v) => {
if (v.dataset.name) {
EJS[v.dataset.name] = template(v.innerText, { variable: 'data' });
}
});
// this page components
cmpScores(scores, { el: qs('#scores') });
cmpBoard(boardHTML, { el: qs('#game .board') });
cmpModal({}, { el: qs('#game .modal') });
// set size + watch resize
const $gameWrap = qs('#game-wrap');
const setCellSize = () => {
const box = $gameWrap.getBoundingClientRect();
const w = Math.floor((box.width + 10) / 23); // todo: refactor reading config
const h = Math.floor((box.height + 10) / 13); // todo: refactor reading config
const size = Math.min(48, Math.min(w, h));
document.documentElement.style.setProperty('--cell-size', `${size}px`);
}
setCellSize();
$on(window, 'resize', debounce(setCellSize, 100));
// game stuff
twoPlayerSwitch.subscribe(initialize);
speed.subscribe(initialize);
// kick off now
initialize();
</script>
</body>
</html>