setTimeout(function() {
  
  //Canvas
  var canvas = $('canvas');
  var ctx;
  var WIDTH = window.innerWidth;
  var HEIGHT = window.innerHeight;
  var canvasMinX = 0;
  var canvasMaxX = 0;
  var intervalId = 0;
  
  //Ball
  var x = WIDTH / 2;
  var y = HEIGHT / 2;
  var dx = 1.5;
  var dy = -4;
  var balls;                        
  var NBALLS = 1;
  var cballs = NBALLS;
  var ballr = 10;
  
  //Paddle
  var paddleW = WIDTH / 5;
  var paddleH = HEIGHT / 50;
  var paddleX = (WIDTH / 2) - (paddleW / 2);
  
  //Keypress
  var rightDown = false;
  var leftDown = false;            
  
  //Bricks
  var bricks;
  var NROWS = 5;
  var NCOLS = 5;
  var cbricks = NROWS * NCOLS;
  var BRICKWIDTH = (WIDTH / NCOLS) - 1;
  var BRICKHEIGHT = Math.floor((HEIGHT / 3) / NCOLS);
  
  //Style            
  var randAlpha;
  var paddleColor = "#EA80B0";
  var ballColor = "#FFFFFF";
  var backColor = "#000000";
  
  $(canvas).attr('width', WIDTH).attr('height', HEIGHT);
  
  function init() {
    ctx = $(canvas)[0].getContext("2d");                                
    canvasMinX = $(canvas).offset().left;
    canvasMaxX = canvasMinX + WIDTH;
    
    //bricks array
    bricks = new Array(NROWS);
    for (i = 0; i < NROWS; i++) {
      bricks[i] = new Array(NCOLS);
      for (j = 0; j < NCOLS; j++) {
        bricks[i][j] = { active: 1, color: Math.floor(Math.random() * 5) + 5 };                        
      }
    }
    
    //ball array
    balls = new Array(NBALLS);
    for (i = 0; i < NBALLS; i++) {
      balls[i] = { x: x, y: y, dx: dx, dy: dy, active: 1 };
    }
    
    //frame rate draw
    intervalId = setInterval(draw, 10);
  }
  
  function circle(x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }
  
  function rect(x, y, w, h) {
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.fill();
  }
  
  function clear() {
    
    //clear canvas
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    
    //insert bkg
    rect(0, 0, WIDTH, HEIGHT);
  }
  
  function write(message){
    var cmessage = message.length;
    ctx.fillStyle = paddleColor;
    ctx.font = 'bold 16px Arial';
    ctx.fillText(message, (WIDTH / 2) - (cmessage * 3.6), HEIGHT / 2);
  }
  
  function onKeyDown(evt) {
    
    //if left or right keys are pressed
    if (evt.keyCode == 39) rightDown = true;
    else if (evt.keyCode == 37) leftDown = true;
  }
  
  function onKeyUp(evt) {
    
    //if left or right keys are released
    if (evt.keyCode == 39) rightDown = false;
    else if (evt.keyCode == 37) leftDown = false;
  }
  
  $(document).keydown(onKeyDown);
  $(document).keyup(onKeyUp);
  
  function onMouseMove(evt) {
    
    //if mouse movement inside canvas
    if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
      paddleX = Math.max(evt.pageX - canvasMinX - (paddleW / 2), 0);
      paddleX = Math.min(WIDTH - paddleW, paddleX);
    }
  }
  
  $(document).mousemove(onMouseMove);
  
  function drawbricks() {
    for (i = 0; i < NROWS; i++) {                    
      for (j = 0; j < NCOLS; j++) {
        
        //if active draw
        if (bricks[i][j].active == 1) {                            
          ctx.fillStyle = 'rgba(234, 128, 176, 0.' + bricks[i][j].color + ')';
          rect(j * BRICKWIDTH, i * BRICKHEIGHT, BRICKWIDTH, BRICKHEIGHT);
        }
      }
    }
  }            
  
  function draw() {                
    
    //set bkg color
    ctx.fillStyle = backColor;                
    
    clear();                
    
    //if no balls end game
    if (cballs == 0) {                                 
      write("Don't give up, keep fighting!");
      clearInterval(intervalId);
    }
    
    //if no bricks end game
    if (cbricks == 0) {                  
      write("Thank you for playing, keep fighting!");
      clearInterval(intervalId);
    }
    
    //set insert paddle
    ctx.fillStyle = paddleColor;
    rect(paddleX, HEIGHT - paddleH, paddleW, paddleH);
    
    //if keydown move paddle
    if (rightDown) paddleX += 10;
    else if (leftDown) paddleX -= 10;
    
    drawbricks();                
    
    //balls
    for (i = 0; i < NBALLS; i++) {
      if (balls[i].active == 1) {                        
        
        //set and insert ball
        ctx.fillStyle = ballColor;
        circle(balls[i].x, balls[i].y, ballr);
        
        //ball position in grid canvas
        row = Math.floor(balls[i].y / BRICKHEIGHT);
        col = Math.floor(balls[i].x / BRICKWIDTH);
        
        //if ball hit active brick
        if (balls[i].y < NROWS * BRICKHEIGHT && row >= 0 && col >= 0 && bricks[row][col].active == 1) {
          
          //reverse y direction
          balls[i].dy = -balls[i].dy;
          
          //add another ball
          NBALLS++;
          cballs++;
          balls.push({ 'x': balls[i].x, 'y': balls[i].y, 'dx': -balls[i].dx, 'dy': balls[i].dy, 'active': 1 });
          
          //deactivate brick
          bricks[row][col].active = 0;
          cbricks--;
        }                        
        
        //if ball outside width of canvas
        if (balls[i].x + balls[i].dx + ballr > WIDTH || balls[i].x + balls[i].dx - ballr < 0)
          
          //reverse x direction
          balls[i].dx = -balls[i].dx;
        
        //if ball above canvas
        if (balls[i].y + balls[i].dy - ballr < 0) {
          
          //reverse y direction
          balls[i].dy = -balls[i].dy;
          
          //if ball below paddle height
        } else if (balls[i].y + balls[i].dy + ballr > HEIGHT - paddleH) {
          
          //if ball between paddle x
          if (balls[i].x > paddleX && balls[i].x < paddleX + paddleW) {
            
            //change x direction based on paddle contact position
            balls[i].dx = 8 * ((balls[i].x - (paddleX + paddleW / 2)) / paddleW);
            
            //reverse y direction
            balls[i].dy = -balls[i].dy;
            
            //if ball below canvas
          } else if (balls[i].y + balls[i].dy + ballr > HEIGHT) {
            
            balls[i].active = 0;
            cballs--;
          }
        }                        
        
        //move ball
        balls[i].x += balls[i].dx;
        balls[i].y += balls[i].dy;
      }                    
    }                        
  }
  
  init();            
},20 );