-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
196 lines (195 loc) · 8 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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="musical.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"
integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-NDTZ6886XS"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-NDTZ6886XS");
</script>
<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="index.css?a=1" />
<title>Squash Byte</title>
</head>
<body>
<div class="container">
<main id="main">
<div id="game-canvas">
<canvas id="canvas" class="canvas"></canvas>
<div class="score-card">
<div class="score-card-item">
<div>Squashes:</div>
<div id="squashed_div"></div>
</div>
<div class="score-card-item">
<div>Fouls:</div>
<div id="fault_div"></div>
</div>
<div class="score-card-item">
<div>Score:</div>
<div id="score"></div>
</div>
</div>
<div id="start-section-wrapper" class="start-section-wrapper">
<div id="start-section" class="start-section">
<button id="settings" class="start-section-item">⚙</button>
<button id="about" class="start-section-item">?</button>
<button id="showlog" class="start-section-item">☷</button>
<button id="start" class="start-section-item">
Play ➤
</button>
</div>
</div>
<div id="info"></div>
<div id="keypad" class="key-pad">
<div class="input-button">
<button class="key-pad-button" value="7" accesskey="7">7</button>
<button class="key-pad-button" value="8" accesskey="8">8</button>
<button class="key-pad-button" value="9" accesskey="9">9</button>
<button class="key-pad-button" value="4" accesskey="4">4</button>
<button class="key-pad-button" value="5" accesskey="5">5</button>
<button class="key-pad-button" value="6" accesskey="6">6</button>
<button class="key-pad-button" value="1" accesskey="1">1</button>
<button class="key-pad-button" value="2" accesskey="2">2</button>
<button class="key-pad-button" value="3" accesskey="3">3</button>
<button class="key-pad-button clear" value="clear" accesskey="c">
←
</button>
<button class="key-pad-button" value="0" accesskey="0">0</button>
<button class="key-pad-button submit" value="submit">
⏎
</button>
</div>
</div>
</div>
<div id="logpanel" style="display: none">
<div class="log-header">
<strong>Stats</strong>
<div id="high"></div>
<button id="back">Back</button>
</div>
<div id="display_log"></div>
</div>
<div id="aboutpanel" style="display: none">
<div class="help-header">
<h2>Squash Byte</h2>
<button id="closeabout">Close</button>
</div>
<p>
Squash Byte is an engaging and stimulating game that tests your math
abilities, reflexes, and hand-eye coordination. The objective of the
game is to squash 8-bit binary numbers, also known as bytes, using
decimal numbers. The game starts with a grid of balls that move
slowly into the canvas from the top, with each row representing a
random byte with a value between 1 and 255. The balls have either a
value of 0 or 1, represented by black or white color respectively.
</p>
<p>
To squash a byte, you must enter the corresponding decimal number
using the numpad on the screen or your computer keyboard. Each
squashed byte earns you points equal to its decimal value. The
larger the byte value, the higher the reward.
</p>
<p>
However, wrong entries are considered fouls and will cost you 5
points. As you score more points, the speed of the grid increases,
making the game more challenging. The game ends when the grid
reaches the bottom of the canvas. Squash Byte is a one-of-a-kind
game that combines math skills with quick reflexes and hand-eye
coordination, providing an exciting and unique gaming experience.
</p>
<p>
If you need a quick refresher on how to convert binary into decimal
then here's an example. Consider the binary number 00011001, which
we'll convert into its decimal equivalent.
</p>
<table class="binarytable">
<tr>
<td><div class="ball">0</div></td>
<td><div class="ball">0</div></td>
<td><div class="ball">0</div></td>
<td><div class="ball one">1</div></td>
<td><div class="ball one">1</div></td>
<td><div class="ball">0</div></td>
<td><div class="ball">0</div></td>
<td><div class="ball one">1</div></td>
</tr>
<tr>
<td>128</td>
<td>64</td>
<td>32</td>
<td>16</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
</table>
<p>
Observe that the values in the bottom row of the binary number
double as you move from right to left. To convert 00011001 into
decimal form, begin from the right and identify all the values in
the bottom row where there is a 1 in the row above them. Add these
values together, which in this case is 1 + 8 + 16 = 25. With some
practice, you can memorize the positions of these values and develop
more efficient methods to perform these calculations.
</p>
<p>
Welcome to Squash Byte! It's time to put your math skills to the
test and have some fun while squashing bytes. Let's get started!
</p>
</div>
<div id="settingspanel" style="display: none">
<div class="help-header">
<h2>Settings</h2>
<button id="closesettings">Close</button>
</div>
<div class="settingsbody">
<div class="setting">
<div class="settinglabel">Sound Effects</div>
<div id="soundtoggle" class="toggleButton">
<div id="toggleSwitchCircle" class="toggleSwitchCircle"></div>
</div>
</div>
<div class="setting">
<div class="settinglabel">Theme</div>
<div>
<select id="themes">
<option value="basic">Basic</option>
<option value="circles">Circles</option>
<option value="grass">Grass</option>
<option value="ocean">Ocean</option>
<option value="homebrew">Homebrew</option>
<option value="redsands">Redsands</option>
</select>
</div>
</div>
</div>
</div>
</main>
<small>
<a href="https://www.SVGBackgrounds.com" target="_blank"
>background credit - SVGBackgrounds.com</a
>
</small>
</div>
<script src="./main.js?v=20233211"></script>
</body>
</html>