Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Brick destructor</title>
    <style type="text/css">
        * { padding: 0; margin: 0; }
        canvas { background: 'black'; display: block; margin: 0 auto; }
    </style>
    <script>
        function myBallDraw() {
          var canvas=document.getElementById("tutorial");
          var ctx = canvas.getContext("2d");
          var ballRadius=10;
          //to move

          var x=canvas.width/2;
          var y=canvas.height-30;
          var dx=2;
          var dy=-2;
          var paddleHeight=10;
          var paddleWidth=75;
          var paddleX=(canvas.width-paddleWidth)/2;
          var rightPressed= false;
          var leftPressed=false;
          var brickRowCount = 3;
          var brickColumnCount = 5;
          var brickWidth = 75;
          var brickHeight = 20;
          var brickPadding = 10;
          var brickOffsetTop = 30;
          var brickOffsetLeft = 30;
          document.addEventListener("keydown",keyDownHandler,false);
          document.addEventListener("keyup",keyUpHandler,false);

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

          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;

            }
          }

          function drawBall(){
          ctx.beginPath();
          ctx.arc(x,y,ballRadius,0,2*Math.PI);
          ctx.fillstyle="#0033FF";
          ctx.fillStroke="#0033FF";
          ctx.Stroke="10"
          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(c=0; c<brickColumnCount; c++) {
                for(r=0; r<brickRowCount; r++) {
                    if(bricks[c][r].status == 1) {
                        var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
                        var brickY = (r*(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 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;
                        }
                    }
                }
            }
          }


          function draw(){
          ctx.clearRect(0,0,canvas.width,canvas.height);
          drawBricks();
          drawBall();
          drawPaddle();
          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) {
               if(y= y-paddleHeight){
                    dy = -dy  ;
               }
                }
                else {
                    alert("GAME OVER");
                    document.location.reload();
                }
            }
          if(rightPressed && paddleX<canvas.width-paddleWidth){

            paddleX+=7;
            }
           else if(leftPressed && paddleX>0 ){
             paddleX-=7;

             }

             x=x+dx;
               y=y+dy;
          }

          setInterval(draw,10);

        }
        myBallDraw();
    </script>

</head>
<body onload="myBallDraw()">

    <canvas id="tutorial" width="800" height="600"></canvas>


</body>
</html>