index.html

<canvas id='screen' width='500' height="300"></canvas><script type="text/javascript">function n(f){var k=0;return function(){return k<f.length?{done:!1,value:f[k++]}:{done:!0}}}function u(f){var k="undefined"!=typeof Symbol&&Symbol.iterator&&f[Symbol.iterator];return k?k.call(f):{next:n(f)}}(function(){function f(){for(var d in b)Object.assign(b[d],{x:h.l[d],y:h.s,h:0,g:0,type:p});Object.assign(c,{x:h.l[2],y:h.s,j:2,o:1,h:.5<Math.random()?1:-1,g:.5<Math.random()?1:-1,type:c});d=[];var a=d.concat;if(b instanceof Array)var l=b;else{l=u(b);for(var q,r=[];!(q=l.next()).done;)r.push(q.value);l=r}t=a.call(d,l,[c]);g.fillStyle=h.backgroundColor;g.fillRect(0,0,e.width,e.height);g.fillStyle=h.m;for(d=0;d<b.length;d++)g.fillText(b[d].i,h.l[3+d],m.offsetY)}function k(){c.type.j+=.001;for(var d=u(t),a=d.next();!a.done;a=d.next())a=a.value,g.fillStyle=h.backgroundColor,g.fillRect(Math.round(a.x),Math.round(a.y),a.type.width,a.type.height),a.y+=a.type.o*a.g,a.x+=a.type.j*a.h,0>a.y?a.y=0:a.y+a.type.height>e.height&&(a.y=e.height-a.type.height),g.fillStyle=h.m,g.fillRect(Math.round(a.x),Math.round(a.y),a.type.width,a.type.height);if(0>c.x)b[1].i++,f();else if(c.x>e.width-c.type.width)b[0].i++,f();else if(c.x<b[0].x+b[0].type.width&&c.y>b[0].y&&c.y<b[0].y+b[0].type.height&&(c.h=1),c.x+c.type.width>b[1].x&&c.y>b[1].y&&c.y<b[1].y+b[1].type.height&&(c.h=-1),0>=c.y||c.y+c.type.height>=e.height)c.g*=-1;window.requestAnimationFrame(k)}var e=document.getElementById("screen"),g=e.getContext("2d");g.font="bold 48px arial";g.textAlign="center";var p={width:10,height:50,j:0,o:3},c={width:10,height:10},m={offsetX:20,offsetY:48},h={s:.5*e.height,l:[0,e.width-p.width,.5*e.width-.5*c.width,.5*e.width-m.offsetX,.5*e.width+m.offsetX],backgroundColor:"black",m:"white"},b=[{i:0},{i:0}],t;document.addEventListener("keydown",function(d){if(!d.repeat)switch(d.key){case "w":b[0].g=-1;break;case "s":b[0].g=1;break;case "ArrowUp":b[1].g=-1;break;case "ArrowDown":b[1].g=1}});document.addEventListener("keyup",function(d){if(!d.repeat)switch(d.key){case "w":b[0].g=0;break;case "s":b[0].g=0;break;case "ArrowUp":b[1].g=0;break;case "ArrowDown":b[1].g=0}});f();window.requestAnimationFrame(k)})()</script>