Fire JS Bin - Falldown

C=document.body.children[0];

// Reset the page layout
C.innerHTML='<style>*{margin:0; width:100%; height:100%; overflow:hidden; background:#000}</style>';

w = C.width = (holeSize = 40) * (nbSlots = 10);
h = C.height = w * innerHeight / innerWidth | 0;

white = "#fff";
black = "#000";

ballRadius = 15;
interval = 1.5 * holeSize;

left = -w/2; right = 3*w;

g = C.getContext("2d");

with (g) {

// "lighter" alpha blend mode, which adds overlapping colors up to #FFFFFF white
// The 'glow' effect is achieved by rendering blurred shadows over black rectangles
globalCompositeOperation = "lighter";
shadowBlur = 7;
font = "99pt S";
fillStyle = "#000";

holes = [];

// Holes are stored in an array. There are two holes per line,
// holes[i] is the left edge of the first hole, holes[i+1] its right edge
// and holes[i+2] and holes[i+3] hold the second hole.
//
// The second hole is always to the right of the first hole,
// to avoid tests during the drawing phase.
for (i=0; i<2E4; i+=4) {
  holes[i+1] = (holes[i] = Math.floor(Math.random()*nbSlots) * holeSize) + holeSize;
  holes[i+3] = (holes[i+2] = holes[i] + (Math.floor(Math.random()*8) + 2) * holeSize) + holeSize;
}

yBall = yView = - h/2; xBall = w/2; ballSpeed=0; keys=[]; viewSpeed = 2.8;

yRow =0; i=4;

setInterval(function () {
  
  // Clear the screen
  clearRect(0,0,w,h);
        
  i=4;
  
  do {
    yRow = i*interval/4 - yView;
    shadowColor = "hsl("+ i +",100%,50%)";
    fillRect(left, yRow, holes[i] - left, 7);
    fillRect(holes[i+1], yRow, holes[i+2] - holes[i+1], 7);
    fillRect(holes[i+3], yRow, right - holes[i+3], 7);
    i+=4;
  } while (yRow < h)
  
  
  // Ease out the speed of the ball when it stops, to give it a more natural movement
  xBall += ballSpeed = keys[37] ? - 11 : keys[39] ? 11 : ballSpeed * .85;
  
  // Check if the ball is within the canvas limits
  xBall = xBall < ballRadius ? ballRadius : xBall > w - ballRadius ? w - ballRadius : xBall;
  yBall - yView  > h ? yBall = yView + h : 0;
  
  // Draw the ball using a 2*PI arc. No fillCircle unfortunately...
  beginPath();
  arc(xBall,yBall-yView, ballRadius, 0, 2*Math.PI,1);
  closePath();
  fillStyle = white;
  fill();
  fillStyle = black;
  
  yView += viewSpeed;
  ballVerticalSpeed = (viewSpeed += viewSpeed < 6 ? 1E-3 : 0) + 8;
  
  // Test whether the ball has hit a line
  if ((yBall+ballRadius) % interval >= interval - ballVerticalSpeed) {
    lineBelowBall = (Math.floor(yBall / interval) + 1) * 4;
    yBall = lineBelowBall / 4 * interval - ballRadius - 1;
    yBall += xBall < holes[lineBelowBall] + 7 ||  xBall > holes[lineBelowBall+1] - 7 && xBall < holes[lineBelowBall+2] + 7 ||  xBall > holes[lineBelowBall+3] - 7 ? 0 : ballVerticalSpeed
  } else { yBall += ballVerticalSpeed }
  
  if (yBall+ballRadius < yView) {fillStyle = white; fillText(yBall, 35, h/2); fillStyle = black;}
  
}, 33);

}

// Maintain a lookup array with the status of all the keys, to improve responsiveness
onkeydown = onkeyup = function (e) {
  keys[e.keyCode] = e.type[5] ? 1 : 0;
}