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

canvas.setAttribute("width", "256");

canvas.setAttribute("height", "256");

canvas.style.border = "1px dashed black";

document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");

​

//Create output text to display the frame rate

var output = document.createElement("p");

document.body.appendChild(output);

​

//An array for the random colors

var colors = ["#FFABAB", "#FFDAAB", "#DDFFAB", "#ABE4FF", "#D9ABFF"];

​

//An array to store all the game sprites

var sprites = [];

​

//A function that returns a rectangle sprite

var rectangle = function(width, height, fillStyle, strokeStyle, lineWidth) {

  var o = {};

  o.x = 0;

  o.y = 0;

  o.renderX = 0;

  o.renderY = 0;

  o.oldX = 0;

  o.oldY = 0;

  o.vx = 0;

  o.vy = 0;

  o.width = width;

  o.height = height;

  o.fillStyle = fillStyle;

  o.strokeStyle = strokeStyle;

  o.lineWidth = lineWidth;

  o.render = function(ctx, lagOffset) {

    //Use the `lagOffset` and the sprite's previous x/y positions to

    //calculate the render positions

    o.renderX = (o.x - o.oldX) * lagOffset + o.oldX;

    o.renderY = (o.y - o.oldY) * lagOffset + o.oldY;

    //Render the sprite

    ctx.strokeStyle = o.strokeStyle;

    ctx.lineWidth = o.lineWidth;

    ctx.fillStyle = o.fillStyle;

    ctx.translate(

      o.renderX + (o.width / 2),

      o.renderY + (o.height / 2)

     );

    ctx.beginPath();

    ctx.rect(-o.width / 2, -o.height / 2, o.width, o.height);

    ctx.stroke();

    ctx.fill();

    //Capture the sprite's current positions to use as 

    //the previous position on the next frame

    o.oldX = o.x;

    o.oldY = o.y;

  };

  sprites.push(o);

  return o;

};

​

//Make some rectangles

var box;

for (var i = 0; i < 100; i++) {

  box = rectangle(32, 32, colors[random(0, 4)], "black", 1);

  box.x = random(0, canvas.width - box.width);

  box.y = random(0, canvas.width - box.height);

  box.vx = random(-1, 1);

  box.vy = random(-1, 1);

}

​

    //Set the frame rate

var fps = 60,

    //Get the start time

    start = Date.now(),

    //Set the frame duration in milliseconds

    frameDuration = 1000 / fps,

    //Initialize the lag offset

    lag = 0;

​

//Start the game loop

gameLoop();

​

function gameLoop() {

  requestAnimationFrame(gameLoop, canvas);

  //Calcuate the time that has elapsed since the last frame

  var current = Date.now(),

      elapsed = current - start;

  start = current;

  //Add the elapsed time to the lag counter

  lag += elapsed;

  //Update the frame if the lag counter is greater than or

  //equal to the frame duration

  while (lag >= frameDuration){  

    //Update the logic

    update();

    //Reduce the lag counter by the frame duration

    lag -= frameDuration;

  }

  //Calculate the lag offset and use it to render the sprites

  var lagOffset = lag / frameDuration;

  render(lagOffset);

  //Frame data output:

  actualFps = Math.floor(1000 / elapsed);

  output.innerHTML = "ms: " + elapsed + " fps: " + actualFps;

  output.innerHTML += " lag: " + Math.floor(lag);

  output.innerHTML += " offset: " + lagOffset;

}

​

​

//Simpler fixed time step used for testing

/*

function gameLoop() {

  requestAnimationFrame(gameLoop, canvas);

  //Calcuate the time that has elapsed since the last frame

  var current = Date.now(),

      elapsed = current - start;

  //Update the frame if the elapsed time is greater than or

  //equal to the frame duration

  if (elapsed >= frameDuration){  

    //Update the logic and render

    update();

    render(0);

    start = current;

    //Frames-per-second:

    actualFps = Math.floor(1000 / elapsed);

    output.innerHTML = "ms: " + elapsed + " fps: " + actualFps;

  }

}

*/

​

//The game logic

function update() {

  sprites.forEach(function(sprite){

    sprite.x += sprite.vx;

    sprite.y += sprite.vy;

    //Screen boundaries

    //Left

    if (sprite.x < 0) {

      sprite.x = 0;

      sprite.vx = -sprite.vx;

    }

    //Right

    if (sprite.x + sprite.width > canvas.width) {

      sprite.x = canvas.width - sprite.width;

      sprite.vx = -sprite.vx;

    }

    //Top

    if (sprite.y < 0) {

      sprite.y = 0;

      sprite.vy = -sprite.vy;

    }

    //Bottom

    if (sprite.y + sprite.width > canvas.height) {

      //Position the sprite inside the canvas

      sprite.y = canvas.height - sprite.width;

      //Reverse its velocity to make it bounce

      sprite.vy = -sprite.vy;

    }

  });

}

​

//The renderer

function render(lagOffset) {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  sprites.forEach(function(sprite){

    ctx.save();

    //Call the sprite's `render` method and feed it the

    //canvas context and lagOffset

    sprite.render(ctx, lagOffset);

    ctx.restore();

  });

}

​

//A `randome` helper function

function random(min, max) {

  return Math.floor(Math.random() * (max - min + 1)) + min;

}

​

​