text: var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  width = canvas.width;
  height = canvas.height;
  
  var x = width / 2;
  var y = height - 30;
  var dx = 3;
  var dy = -3;
  var ballRadius = 10;
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (width - paddleWidth) / 2;
  var rightPressed = false;
  var leftPressed = false;
  
  var brickRowCount = 5;
  var brickColumnCount = 5;
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = 10;
  var brickOffsetTop = 30;
  var brickOffsetLeft = 30;
  
  var score = 0;
  var lives = 3;
  
  var bricks = [];
  for (c = 0; c < brickColumnCount; c++) {
      bricks[c] = [];
      for (r = 0; r < brickRowCount; r++) {
          bricks[c][r] = {x: 0, y: 0, status: 1};
      }
  }
  
  
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  document.addEventListener("mousemove", mouseMoveHandler, false);
  
  function mouseMoveHandler(e) {
      var relativeX = e.clientX - canvas.offsetLeft;
      if(relativeX > 0 && relativeX < width) {
          paddleX = relativeX - paddleWidth/2;
      }
  }
  
  function keyDownHandler(e) {
      if (e.keyCode == 39) {
          rightPressed = true;
      }
      else if (e.keyCode == 37) {
          leftPressed = true;
      }
  }
  
  function keyUpHandler(e) {
      if (e.keyCode == 39) {
          rightPressed = false;
      }
      else if (e.keyCode == 37) {
          leftPressed = false;
      }
  }
  
  
  // ----------- Collision detection between ball and bricks ---------
  function collisionDetection() {
      for (c = 0; c < brickColumnCount; c++) {
          for (r = 0; r < brickRowCount; r++) {
              var b = bricks[c][r];
              if (b.status == 1) {
                  if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                      dy = -dy;
                      b.status = 0;
                      score++;
                      if (score == brickRowCount * brickColumnCount) {
                          alert("YOU WIN, CONGRATULATIONS! \n Your Score: " +score);
                          // setTimeout(function(){
                          //     window.location.reload();
                          // },100);
                          document.location.reload();
                      }
                  }
              }
          }
      }
  }
  
  
  function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
  }
  
  function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = '#0095DD';
      ctx.fill();
      ctx.closePath();
  }
  
  
  function drawBricks() {
      for (c = 0; c < brickColumnCount; c++) {
          for (r = 0; r < brickRowCount; r++) {
              if (bricks[c][r].status == 1) {
                  var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
                  var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
                  bricks[c][r].x = brickX;
                  bricks[c][r].y = brickY;
                  ctx.beginPath();
                  ctx.rect(brickX, brickY, brickWidth, brickHeight);
                  ctx.fillStyle = "#0095DD";
                  ctx.fill();
                  ctx.closePath();
              }
          }
      }
  }
  
  function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: " + score, 8, 20);
  }
  
  function drawLives() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Lives: " +lives, width-65, 20);
  }
  
  
  function draw() {
      ctx.clearRect(0, 0, width, height);
      drawBricks();
      drawBall();
      drawPaddle();
      drawScore();
      drawLives();
      collisionDetection();
  
  
      //------ Bounce the ball off the walls ----------------
      if (x + dx > width - ballRadius || x + dx < ballRadius) {
          dx = -dx;
      }
      if (y + dy < ballRadius) {
          dy = -dy;
      }
      else if (y + dy > height - ballRadius) {
          if (x > paddleX && x < paddleX + paddleWidth) {
              dy = -dy;
          }
          else {
              lives--;
              if(!lives) {
                  alert("GAME OVER \n Your Score: "+score);
                  // setTimeout(function(){
                  //     window.location.reload();
                  // },10);
                  document.location.reload();
              }
              else {
                  x = width/2;
                  y = height-30;
                  dx = 3;
                  dy = -3;
                  paddleX = (width/2);
              }
          }
      }
  
      //
      // // ------- Paddle movement ----------------------------
      // if (rightPressed) {
      //     paddleX += 7;
      // }
      // else if (leftPressed) {
      //     paddleX -= 7;
      // }
      //
      // // ------------- Paddle boundary conditions --------------
      // if (paddleX > width - paddleWidth) {
      //     paddleX -= 7;
      // }
      // else if (paddleX < 0) {
      //     paddleX += 7;
      // }
  
  
  
      // ----------- Paddle movement and boundary in the same statement----
      if (rightPressed && paddleX < width - paddleWidth) {
          paddleX += 7;
      }
      else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
      }
      x += dx;
      y += dy;
      requestAnimationFrame(draw);
  }
  
  
  draw();