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

    //interpolate the sprite's position

    if (o.previousX) {

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

    } else {

      o.renderX = o.x;

    }

    if (o.previousY) {

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

    } else {

      o.renderY = o.y;

    }

    //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();

  };

  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 = 30,

    //Get the start time

    previous = 0,

    //Set the frame duration in milliseconds

    frameDuration = 1000 / fps,

    //Initialize the lag offset

    lag = 0;

​

//Start the game loop

gameLoop();

​

function gameLoop(timestamp) {

  requestAnimationFrame(gameLoop);

​

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

  if (!timestamp) timestamp = 0;

  var elapsed = timestamp - previous;

​

  //Optionally correct any unexpected huge gaps in the elapsed time

  if (elapsed > 1000) elapsed = frameDuration;

​

  //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) {  

​

    //Capture the sprites' previous positions

    capturePreviousPositions(sprites);

​

    //Update the logic

    update();

​

    //Reduce the lag counter by the frame duration

    lag -= frameDuration;

  }

​

  //Calculate the lag offset. This tells us how far

  //we are into the next frame

  var lagOffset = lag / frameDuration;

​

  //Render the sprites using the `lagOffset` to

  //extrapolate the sprites' positions

  render(lagOffset);

​

  //Capture the current time to be used as the previous

  //time in the next frame

  previous = timestamp;

}

​

function capturePreviousPositions(sprites) {

  //Loop through all the children of the stage

  sprites.forEach(function(sprite) {

    sprite.previousX = sprite.x;

    sprite.previousY = sprite.y;

  });

}

​

​

​

//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;

}

​

​