Untitled

body {margin: 0; padding: 0; overflow: hidden}

canvas {width: 100%; height: 100%};

// rAF

window.requestAnimationFrame = function() {

  return window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    window.mozRequestAnimationFrame ||

    window.msRequestAnimationFrame ||

    window.oRequestAnimationFrame ||

    function(f) {

      window.setTimeout(f,1e3/60);

    }

}();

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d'),

    window_width = window.innerWidth,

    window_height = window.innerHeight,

    gravity = 0.2;

canvas.width = window_width;

canvas.height = window_height;

var platform = {

  x: null,

  y: null,

  width: null,

  height: null,

  color: null,

  init: function() {

    platform.width = 200;

    platform.height = 5;

    platform.color = 'red';

    platform.x = (window_width / 2) - (platform.width / 2);

    platform.y = (window_height - 50);

  },

  draw: function() {

    ctx.fillStyle = platform.color;

    ctx.fillRect(platform.x, platform.y, platform.width, platform.height);

  }

}

var ball = {

  x: null,

  y: null,

  radius: null,

  color: null,

  vy: null,

  init: function() {

    ball.radius = 10;

    ball.color = 'blue';

    ball.x = (window_width / 2);

    ball.y = 50;

    ball.vy = 20;

  },

  draw: function() {

    ctx.beginPath();

    ctx.fillStyle = ball.color;

    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false);

    ctx.fill();

    ctx.closePath();

  }

}

function paintCanvas() {

  ctx.clearRect(0, 0, window_width, window_height);

}

function init() {

  platform.init();

  ball.init();

}

var delta, 

    now, 

    then = new Date().getTime(),

    fps = 30,

    interval = 1000/fps;

function f2T(Delta, Speed) {

    return (Speed * Delta) * (60 / 1000); 

}

function update() {

  fps = 30 + Math.random() * 30;

  interval = 1000/fps;

  now = new Date().getTime();

  delta = now - then; 

  if(delta > interval) {

    then = now;

    paintCanvas();

    // Draw the platform

    platform.draw();

    // Move the ball

    ball.y += f2T(delta, ball.vy);

    ball.vy += f2T(delta, gravity);

    ball.draw();

    var speed = ball.vy + gravity, 

      distance = platform.y - (ball.y + ball.radius),

        time = distance / speed;

    if(time > 0 && time < f2T(delta, 1)) {

      ball.y = platform.y - ball.radius;

      if (ball.vy > 0)

        ball.vy *= - 0.4;

    }

  }

}

function animloop() {

  requestAnimationFrame(animloop);

  update();

}

init();

animloop();