text: var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var ballRadius = 10;
  var x = canvas.width/2;
  var y = canvas.height-30;
  var dx = 4;
  var dy = -4;
  var paddleHeight = 10;
  var paddleWidth = 120;
  var paddleX = (canvas.width-paddleWidth)/2;
  var rightPressed = false;
  var leftPressed = false;
  var brickRowCount = 3;
  var brickColumnCount = 6;//How many bricks are in each column
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = brickRowCount*5;
  var brickOffsetTop = 30;
  var brickOffsetLeft = (canvas.width-brickRowCount*brickWidth-brickPadding*(brickRowCount-1))/2;
  var score = 0;
  var lives = 5;
  var colors = ["#0095DD","#EB4034","#6C0E9E","#E38A17","#17E357"]//blue red purple orange green
  //Normal Larger paddle, Accelerate, Decelerate, Smaller Paddle
  
  var bricks = [];
  for(var c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(var r=0; r<brickRowCount; r++) {
      bricks[c][r] = { x: 0, y: 0, status: Math.floor(Math.random() * (5)) };
    }
  }
  
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  document.addEventListener("mousemove", mouseMoveHandler, false);
  
  function keyDownHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
          rightPressed = true;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
          leftPressed = true;
      }
  }
  
  function keyUpHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
          rightPressed = false;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
          leftPressed = false;
      }
  }
  
  function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
      paddleX = relativeX - paddleWidth/2;
    }
  }
  function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
      for(var r=0; r<brickRowCount; r++) {
        var b = bricks[c][r];
        if(b.status >=0) {
          if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
            dy = -dy;
            if(b.status==1){//Larger paddle
              paddleWidth=paddleWidth*1.25;
            }else if(b.status==2){//Accelerate
              dx=dx*1.25;
              dy=dy*1.25;
            }else if(b.status==3){//Decelerate
              dx=dx*.8;
              dy=dy*.8
            }else if(b.status==4){//Smaller Paddle
              paddleWidth=paddleWidth*.8;
          }
            b.status = -1;
            score++;
            if(score == brickRowCount*brickColumnCount) {
              alert("You win! Click OK to go to level 4");
              window.location.href="level4.html";
            }
          }
        }
      }
    }
  }
  
  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, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }
  function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
      for(var r=0; r<brickRowCount; r++) {
        if(bricks[c][r].status >=0 ) {
          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 = colors[bricks[c][r].status];
          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, canvas.width-65, 20);
  }
  
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();
  
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
      dx = -dx;
    }
    if(y + dy < ballRadius) {
      dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
      if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
      }
      else {
        lives--;
        if(!lives) {
          alert("Game over, Click OK to retry the level");
          document.location.reload();
        }
        else {//Respawns in the middle
          x = canvas.width/2;
          y = canvas.height-30;
          paddleX = (canvas.width-paddleWidth)/2;
        }
      }
    }
  
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
      paddleX += 10;
    }
    else if(leftPressed && paddleX > 0) {
      paddleX -= 10;
    }
  
    x += dx;
    y += dy;
    requestAnimationFrame(draw);
  }
  
  draw();