Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit daab528

Browse files
author
Aurélio A. Heckert
committedSep 13, 2016
First playable version
0 parents  commit daab528

File tree

1 file changed

+271
-0
lines changed

1 file changed

+271
-0
lines changed
 

‎game.html

+271
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ocular Glitch</title>
6+
<style>
7+
html, body {
8+
margin: 0;
9+
width: 100%;
10+
height: 100%;
11+
background: #444;
12+
color: #FFF;
13+
text-align: center;
14+
}
15+
#c {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
width: 1px;
20+
height: 1px;
21+
cursor: none;
22+
}
23+
.started #c {
24+
width: 100%;
25+
height: 100%;
26+
}
27+
p {
28+
display: inline-block;
29+
text-align: left;
30+
font-size: 30px;
31+
text-shadow: 0 0 14px #FFF, 0 0 14px #FFF;
32+
margin-top: 10%;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<canvas id="c"></canvas>
38+
<p>
39+
You are experiencing an ocular glitch. <br>
40+
Your retina remains excited by light too much time. <br>
41+
Right now when you must escape from falling bombs... <br>
42+
<b>Click to start.</b>
43+
</p>
44+
<audio id="step" src="data:audio/wav;base64,UklGRtgAAABXQVZFZm10IBAAAAABAAEAiBUAAIgVAAABAAgAZGF0YbQAAAAAhISEfnFxcXF9hISEhHN2dnZ4emtra3eDkpKSkZCAgIB9f4ODiI6ZoaF/d3Z2eISEgYGAf4SJiYSDZF1eYmNvb3N9fHp6enp2dXViYmVma3p+hoaHiIiIiHh2ZmVodHmFhYB7fX5+g4R2dXRvcnt7fX97d3h4eX1+foGAfX16dXd4eHp7fHx8fHx+fn+DgX19e3l7e3yAgYCAf3x9f39/f359fXx9f39/gH9+fn9/f39/f38="></audio>
45+
<script>
46+
var explosion = 'data:audio/wav;base64,UklGRksUAABXQVZFZm10IBAAAAABAAEAiBUAAIgVAAABAAgAZGF0YScUAABK/wAA/wAAAAAAAAD//////wAAHv/////4to5DR///////AAAAAAAAAADWAAAhAAAAAMz//wAAAAAAAAAAAP////8kKkn//////////////////wAAAAAAAAAAAAAAAAAAAAAAAF3//////////////////////////4cAAAAAAAD/////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////6UAAAAAAAAAAAAAAAAAAAAAAAAAJKn//////+xYAAAAAAAAAOj//////////74AAAAAAAAAAAAAAAAAAAAAAAAAAJGJiIiIiIeHh2toUElKS0xNTk9QUU4sLw0NDxETFRcZGx0fIf///////wAAAAAAAAAAAAACBAYICw0PERMVFxkbHR8gIiQlJykqLC0vMDIzNTY3OTo7PD5eZGyKioqKiomJiYmJiYiIiIiIiIiHh4eHh4eHhoaGhoaGhoaGhYWFhYWFhYWFhYWEo6Oiwb++vby7urm4t7a1tLSzsrGwr6+uraysq6qpqainp6ampaSko6OioaGgoJ+fbQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABeXV70/////////////////////////////////fv5+Pb08vHv7ezq6efm5OPh4N///////////////////////////////////////////////////////////////////6SlpCEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKvNzMv///////////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL6SioaGh//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8XAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABA///////////////////////////////////////////////////////////////////////////zioqKioqKioqKiomJiYmJiYmJiYmJiYmJiYiIiIiIiIiIiIiIiIiIiP7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIeRkZGRkJCQkP////////////////////////////////////////////////////////////////8qAAAAAAECAwMEBQUGBwcICQkKCwsMDA0ODg8QEBEREhMTFBQVFRYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsf//////////////////////////////////////////////////////////////////////////////0tPT09LS0tHR0NDQz8/Pzs7Nzc3MzMzLy8vKysrJycnIyMjHx7lAQ0NDRERERUVFKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICAwMEBAUFBgYHOkBBQUFCQkJCQ0NDQ0RERERFRUVFRUZGRkZHR0dHR0hISEhJSSoaGhobGxwcHB0dHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9OTk5PT09PT09PUFBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACoKGhoaGhoaGhoKCgoP//////////////////////////////////////////////zldYWFhYWFlZWVlZWVkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtLi4uLi3t7e3t7e3trb//////////////////////////////////////////////////////////////////////////////////////////////////////////////5oNCwsLCwwMDAwNDQ0ODg4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcW9vb29vb29vb29vb29v///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7+/f39/cIPCgoKCwsLCwwMDAwNDQ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMS4uLi8vLy8vLzAwMDAwkv//////////////////////////////////////////+Nvb29ra2tra2dnZ2dnZ2LGWlpaWlpaWlpaWlZWVlZWVlZWVlZWVlZWVlZWVlZWVlbbCwsLCwsLBwcHBwcHBwcDi7e3t7ezs7Ozs6+vr6+vr6urq6urp6enp6ejo6Ojo5+f//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6qjo6Ojo6Ojo6Ojo6OjokoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcWlpaWlpaWlpaWlpaWlq5/////////////////////////////////////////////////////////////////fLx8fHx8fHx8PDw8PDw7+/v7+/v7+7u7u7u7u7t7e3tt6ampqampqampqampqampm9gYGBgYGBgYGBgYGBgYGBgYGBgYGBhYWFhYWFhYWFhYW1tbW1tbW1tbm5ubm5ubm55enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ0ZGRkZGRkZGRkZGR0dHgf//////////////////////////////////////////8t/g39/f39/f39/f3t7e3s68vby8vLy8vLy8vLy8vLy8u7u7u7u7u7u7u7u7u7u6urazs7Ozs7OysrKysrKysrKtqqqqqqqqqqqqqqqqqqqqqqqqqqqqqampqampqampqamhn5+fn5+fn5+fn5+fn5+fl5aWlpWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWV//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+5Y2NjY2NjY2NjY2NjZGRkEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARYmJiIiIiIiIiIiIiIiIiP////////////////////////////////////////////jp6enp6eno6Ojo6Ojo6OeekZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGQkJCQkJCQkJA5OTk5OTk5Ojo6Ojo6Ojo6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOjs7Ozs7Ozw8PDw8PDw8TIuMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMZRYXFxgYGBgYGBgYGRkZGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfICAgICAgISEhISEhISFekJGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZBvX2BgYGBgYGBgYGBgYGBgPjAwMDAwMDExMTExMTExMTEyMjIyMjIyMjIzMzMzMzMzAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuMDAwMDExMTExMTExMTJQra+vr6+vr6+vr6+vr66urq6urq6urq6urq6urq2tra2ALzExMTExMTIyMjIyMjIyBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHWVnZ2dnZ2dnZ2dnZ2dnZ8X//////////////////////////////////////////8CjpKSkpKSko6Ojo6Ojo6NeQ0RERERERERFRUVFRUVFRUVFRUZGRkZGRkZGRkZGRkd/hoaGhoaGhoaGhoaGhoaGv8XFxcTExMTExMTExMPDw8PDw8PDw8PCwsLCwsLCwsLAlJWVlZWVlZWVlZWVlZWVk2hqampqampqampqampqampqampqampqampqampqa2trZFFRUVFRUVFRUVFRUVJSUks5ODg5OTk5OTk5OTk6Ojo6Ojo6Ojo7Ozs7Ozs7Ozs8PGGcm5qampqampqampqamprA+Pf29vb29vX19fX19PT09PTz8/Pz8/Py8vLy8vHx8fGvgYCAgICAgICAgICAgICAPhISEhISEhMTExMTFBQUFBQVFRUVFRUWFhYWFhcXFxcXPElJSUlJSUlJSUlJSkpKSm96enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6ent7e3t7e3t7e3t7e3t7e3t8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH2KiYmJiYmJiYmJiYmJiYmKlpaWlpaWlpWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZSZo6Ojo6OjoqKioqKioqKiprCwsLCvr6+vr6+vr6+vr66urq6urq6urq6tra2tra2tl3p7e3t7e3t7e3t7e3t7e2VJSkpKSkpKS0tLS0tLS0tLTExMTExMTExMTU1NTU1NTT40NDQ0NTU1NTU1NjY2NjYnHh4eHh8fHx8fICAgICAhISEhIiIiIiIjIyMjJCQkJCRSX19fX19gYGBgYGBgYGBgjpmZmZmZmZmZmZmYmJiYmJiYmJiYmJiYmJiYmJeXl5eXjY2NjYyMjIyMjIyMjIyMjIKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoODg4ODg4ODg4ODg4ODg4OEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhHliYmJiYmJjY2NjY2NjY2NZQ0NDQ0REREREREVFRUVFRkZGRkZGR0dHR0dHSEhISEhPV1dYWFhYWFhYWFlZWVlZYGdnZ2hoaGhoaGhoaGhoaGlpaWlpaWlpaWlpaWlqampqeYKCgoKCgoKCgoKCgoKCgpGZmZmZmZmYmJiYmJiYmJiYmJeXl5eXl5eXl5eWlpaWlpSTk5OTk5OTk5OSkpKSkpKQj4+Pj4+Pj4+Pj4+Pjo6Ojo6Ojo6Ojo6Ojo6Ojo2NjY2Xl5eXl5eXlpaWlpaWlpaWn5+enp6enp6enZ2dnZ2dnJycnJycnJubm5ubm5qampqWgYGBgYGBgYGBgYGBgYGBfGpqampqampqa2tra2tra2xsbGxsbGxsbW1tbW1tbW5ubm9vb29vb29vcHBwcHBwcHFxcXFxcnJycnJycnJzc3Nzc3Nzc3N0dHR0dHR0dHR1dXd4eXl5eXl5eXl5eXl5eXp7fX19fX19fX19fX19fX19fX19fX19fX19fn5+fn5+fn5/gICAgICAgICAgICAgICAgYGBgYGBgYGBgYGBgYGBgYCAgICAgICAgICAgICAgICAgA==';
47+
48+
document.body.onclick = function() {
49+
if (document.body.webkitRequestFullscreen) document.body.webkitRequestFullscreen();
50+
if (document.body.mozRequestFullScreen) document.body.mozRequestFullScreen();
51+
if (document.body.requestFullscreen) document.body.requestFullscreen();
52+
document.body.onclick = null;
53+
setTimeout(start, 300);
54+
//setTimeout(gameOver, 3000);
55+
}
56+
57+
var ctx = c.getContext('2d'),
58+
ratio = 2, //window.devicePixelRatio * 2,
59+
w=0, h=0, pi=Math.PI,
60+
alive = false,
61+
usrX = 200,
62+
usrFrame = 0,
63+
bombs = [],
64+
escapedCounter = 0;
65+
66+
function start() {
67+
document.body.className = 'started';
68+
w = c.width = document.body.clientWidth / ratio;
69+
h = c.height = document.body.clientHeight / ratio;
70+
usrX = Math.round(w/2);
71+
alive = true;
72+
// Paint Sky
73+
var grd = ctx.createLinearGradient(0,0,0,h);
74+
grd.addColorStop(0, '#00F');
75+
grd.addColorStop(1, '#0FF');
76+
ctx.fillStyle = grd;
77+
ctx.fillRect(0, 0, w, h);
78+
// Make First Bombs
79+
for (var i=5; i<w-30; i+=100)
80+
bombs.push({x:i+Math.random()*30, y:-150+Math.random()*150, c:'#F0'+Math.floor(Math.random()*15).toString(16)});
81+
tic();
82+
}
83+
84+
function dot(x, y, r, color) {
85+
ctx.fillStyle = color;
86+
ctx.beginPath();
87+
ctx.arc(x,y,r,0,Math.PI*2,true);
88+
ctx.fill();
89+
ctx.closePath();
90+
}
91+
92+
//c.onclick = function(ev) {
93+
// dot(ev.clientX/ratio, ev.clientY/ratio, 10, '#F0'+Math.floor(Math.random()*15).toString(16));
94+
//}
95+
96+
function boneco(dir, x, y, frame1) {
97+
if ( frame1 == 1 || frame1 == 11 ) step.play();
98+
var frame2 = frame1 + 10;
99+
if (frame2>=20) frame2 -= 20;
100+
var waveX1 = frame1;
101+
var waveX2 = frame2;
102+
if ( waveX1 > 10 ) waveX1 = 20 - waveX1;
103+
if ( waveX2 > 10 ) waveX2 = 20 - waveX2;
104+
var waveY1 = Math.sin(2*pi*frame1/20);
105+
if (waveY1 > 0) waveY1 /= 3;
106+
var waveY2 = Math.sin(2*pi*frame2/20);
107+
if (waveY2 > 0) waveY2 /= 3;
108+
109+
ctx.lineWidth = 12;
110+
ctx.lineJoin = 'round';
111+
ctx.lineCap = 'round';
112+
113+
if (frame1 == -1) { // stoped
114+
ctx.strokeStyle = 'rgba(255,160,0,1)';
115+
ctx.beginPath();
116+
ctx.arc(x, y-55, 5, 1.5,pi*2.5, true);
117+
ctx.lineTo(x, y-25);
118+
ctx.moveTo(x - 10, y-23);
119+
ctx.lineTo(x - 5, y-40);
120+
ctx.lineTo(x + 5, y-40);
121+
ctx.lineTo(x + 10, y-23);
122+
ctx.moveTo(x - 10, y-7);
123+
ctx.lineTo(x, y-25);
124+
ctx.lineTo(x + 10, y-7);
125+
ctx.stroke();
126+
ctx.closePath();
127+
} else { // walk
128+
ctx.strokeStyle = 'rgba(255,160,0,.6)';
129+
ctx.beginPath();
130+
ctx.moveTo(x, y-45);
131+
ctx.lineTo(x + (5 - waveX1*2)*dir, y-33);
132+
ctx.lineTo(x + (17 - waveX1*2)*dir, y-38);
133+
ctx.moveTo(x, y-25);
134+
ctx.lineTo(x + (15 - waveX2*2.5)*dir, y-7-waveY2*-7);
135+
ctx.stroke();
136+
ctx.closePath();
137+
138+
ctx.strokeStyle = 'rgba(255,160,0,1)';
139+
ctx.beginPath();
140+
ctx.moveTo(x, y-45);
141+
ctx.lineTo(x + (5 - waveX2*2)*dir, y-33);
142+
ctx.lineTo(x + (17 - waveX2*2)*dir, y-38);
143+
ctx.stroke();
144+
ctx.closePath();
145+
ctx.beginPath();
146+
ctx.arc(x, y-55, 5, 1.5,pi*2.5, true);
147+
ctx.lineTo(x, y-25);
148+
ctx.lineTo(x + (15 - waveX1*2.5)*dir, y-7-waveY1*-7);
149+
ctx.stroke();
150+
ctx.closePath();
151+
}
152+
}
153+
154+
function explode(bomb) {
155+
var i = bombs.indexOf(bomb);
156+
bombs = bombs.slice(0, i).concat(bombs.slice(i+1));
157+
var grd = ctx.createRadialGradient(bomb.x, bomb.y, 0, bomb.x, bomb.y, 60);
158+
grd.addColorStop(1.0, 'rgba(255,0,0,0)');
159+
grd.addColorStop(0.6, bomb.c);
160+
grd.addColorStop(0.5, bomb.c);
161+
grd.addColorStop(0.2, '#F8F');
162+
dot(bomb.x,bomb.y,60,grd);
163+
//<audio id="explosion" src=""></audio>
164+
var a = document.createElement('audio');
165+
a.src = explosion;
166+
a.play();
167+
}
168+
169+
function gameOver() {
170+
alive = false;
171+
usrX = -100;
172+
}
173+
174+
var ticCounter = 0;
175+
function tic() {
176+
ticCounter++;
177+
// Bombs...
178+
if (ticCounter%12==0) bombs.push({x:Math.random()*(w-10)+5, y:-30+Math.random()*20, c:'#F0'+Math.floor(Math.random()*15).toString(16)});
179+
for (var bomb,i=0; bomb=bombs[i]; i++) {
180+
bomb.y+=2;
181+
dot(bomb.x,bomb.y,10,bomb.c);
182+
if ( bomb.y > h-95 && Math.abs(bomb.x-usrX) < 25 ) {
183+
explode(bomb);
184+
gameOver();
185+
}
186+
if ( bomb.y > h-24 ) {
187+
explode(bomb);
188+
if (alive) escapedCounter++;
189+
notifyEscaped();
190+
}
191+
}
192+
// Blur...
193+
var px={}, N,S,W,E, sum, pixels = ctx.getImageData(0,0,w,h);
194+
var data = pixels.data;
195+
for (px.r=0; px.r<data.length; px.r+=4) {
196+
px.g = px.r + 1; px.b = px.r + 2;
197+
for ( var unit,i=0; unit=['r','g','b'][i]; i++ ) {
198+
N = data[px[unit] - w*4] || 0;
199+
S = data[px[unit] + w*4] || 0;
200+
W = data[px[unit] - 4 ] || 0;
201+
E = data[px[unit] + 4 ] || 0;
202+
sum = N + S + W + E;
203+
if ( data[px[unit]]*4 > sum ) {
204+
data[px[unit]] = ( data[px[unit]]*4 + sum ) / 8;
205+
} else {
206+
data[px[unit]] = ( data[px[unit]] + sum*2 ) / 9;
207+
}
208+
if (data[px[unit]] > 200) data[px[unit]] -= 5;
209+
data[px[unit]] += Math.round(Math.random()*5-3);
210+
}
211+
//data[px.r] += Math.round(Math.random()*5-3);
212+
//data[px.g] += Math.round(Math.random()*5-3);
213+
//data[px.b] += Math.round(Math.random()*5-3);
214+
}
215+
ctx.putImageData(pixels, 0, 0);
216+
217+
// Draw elements...
218+
219+
if (alive) {
220+
if (keyRight) { usrX += 3; usrFrame++ }
221+
if (keyLeft) { usrX -= 3; usrFrame++ }
222+
if (!keyRight && !keyLeft) usrFrame=-1;
223+
if (usrFrame == 20) usrFrame = 0;
224+
console.log('usrFrame',usrFrame);
225+
if (usrX < 18) usrX = 18;
226+
if (usrX > w-18) usrX = w-18;
227+
boneco(keyRight?1:-1, usrX, h-20, usrFrame);
228+
}
229+
else {
230+
ctx.fillStyle = 'rgba(255,255,100,0.1)';
231+
ctx.font = 'bold 20px sans-serif';
232+
ctx.textAlign = 'right';
233+
ctx.fillText('Survived '+escapedCounter+' explosions!', w-30, 40);
234+
ctx.font = 'bold 38px sans-serif';
235+
ctx.textAlign = 'center';
236+
ctx.fillText("You died. 😢", w/2, h/3);
237+
}
238+
239+
ctx.fillStyle = '#4A0';
240+
ctx.fillRect(0,h-20,w,20);
241+
242+
for (var x=0; x<w; x+=8) dot(x, h-20, 3, '#4A0');
243+
244+
setTimeout(tic, 33);
245+
}
246+
247+
function notifyEscaped() {
248+
ctx.fillStyle = 'rgba(255,255,100,1)';
249+
ctx.font = 'bold 20px sans-serif';
250+
ctx.textAlign = 'right';
251+
ctx.fillText('Survived '+escapedCounter+' explosions!', w-30, 40);
252+
}
253+
254+
var keyTop=false, keyDown=false, keyLeft=false, keyRight=false;
255+
256+
document.body.onkeydown = function(ev) {
257+
if (ev.keyCode == 38) keyUp = true;
258+
if (ev.keyCode == 40) keyDown = true;
259+
if (ev.keyCode == 37) keyLeft = true;
260+
if (ev.keyCode == 39) keyRight = true;
261+
}
262+
document.body.onkeyup = function(ev) {
263+
if (ev.keyCode == 38) keyUp = false;
264+
if (ev.keyCode == 40) keyDown = false;
265+
if (ev.keyCode == 37) keyLeft = false;
266+
if (ev.keyCode == 39) keyRight = false;
267+
}
268+
269+
</script>
270+
</body>
271+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.