Razan's BrickGame1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>

<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        var canvas, canvasContext;

        //ball shit
        var ballX = 75;
        var ballY = 75;
        var ballSpeedX = 5;
        var ballSpeedY = 7;

        //brick shit
        const BRICK_H = 100;
        const BRICK_W = 50;
        const BRICK_COUNT = 4;
        var brickGrid = new Array(BRICK_COUNT);


        //paddles shit
        const PADDLE_THICKNESS = 15;
        const PADDLE_HEIGHT = 150;
        const PADDLE_DIST_FROM_EDGE = 60;


        var paddleY = 250;

        //mouse shit
         var mouseX = 0;
         var mouseY = 0;

        function calculateMousePos(evt) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            mouseX = evt.clientX - rect.left - root.scrollLeft;
            mouseY = evt.clientY - rect.top - root.scrollTop;
            return {
                x: mouseX,
                y: mouseY
            };
        }


       function brickReset() {
	     for(var i=0; i<BRICK_COUNT; i++) {
		brickGrid[i] = true;
	}
}

    window.onload = function() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

            var framesPerSecond = 30;
            setInterval(updateAll, 1000 / framesPerSecond);

            canvas.addEventListener('mousemove', function(evt) {
                var mousePos = calculateMousePos(evt);
                paddleY = mousePos.y - (PADDLE_HEIGHT / 2);
            });

            ballReset();
        }

        function updateAll() {
            moveAll();
            drawAll();
        }


        function ballReset() {
            ballSpeedX = -ballSpeedX;
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
        }

        function moveAll() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

            if (ballY < 0) {
                ballSpeedY *= -1;

            }
            if (ballY > canvas.height) {
                ballSpeedY *= -1;
            }

            if (ballX > canvas.width) {
                ballSpeedX *= -1;

            }
            if (ballX < 0) {
                ballReset();

            }

            ///varibales for the paddles so we can do the math and make the ball bounce off of it

            var paddleTopEdgeY = paddleY; //

            var paddleBottomEdgeY = paddleTopEdgeY + PADDLE_HEIGHT;


            var paddleLeftEdgeX = PADDLE_DIST_FROM_EDGE;

            var paddleRightEdgeX = paddleLeftEdgeX + PADDLE_THICKNESS;


            if (ballY > paddleTopEdgeY && // below the top of paddle
                ballY < paddleBottomEdgeY && // above bottom of paddle
                ballX > paddleLeftEdgeX && // right of the left side of paddle
                ballX < paddleRightEdgeX) { // left of the left side of paddle
                 ballSpeedX *= -1;

            ///this maks the ball bouse on an angle off the paddle

              var centerOfPaddleY = paddleY + PADDLE_HEIGHT/2;

		      var ballDistFromPaddleCenterY = ballY - centerOfPaddleY;

                ballSpeedX = ballDistFromPaddleCenterX * 0.25;
            }

        }


    function drawBricks() {
	    for(var i=0;i<BRICK_COUNT;i++) {

		if(brickGrid[i]) {
			colorRect(canvas.width-BRICK_W,0+(BRICK_H*i), BRICK_W,BRICK_H-2, 'blue');
		}
	}
}

        function drawAll() {
            //canvas
            colorRect(0, 0, canvas.width, canvas.height, 'black');

            ///ball
            colorCircle(ballX, ballY, 10, 'white');

            ///this is the paddle
            colorRect(PADDLE_DIST_FROM_EDGE, paddleY, PADDLE_THICKNESS, PADDLE_HEIGHT, 'teal');

            //drawing bricks
            drawBricks();


            //this shows us where the mouse is on the canvas
            colorText(mouseX+","+mouseY,mouseX, mouseY, 'yellow');

        }

        //helps draw squars/rects

        function colorRect(topLeftX, topLeftY, boxWidth, boxHeight, fillColor) {
            canvasContext.fillStyle = fillColor;
            canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
        }
        ///helps draw circles

        function colorCircle(centerX, centerY, radius, fillColor) {
            canvasContext.fillStyle = fillColor;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, 10, 0, Math.PI * 2, true);
            canvasContext.fill();
        }

        ///shows me where the mouse is

        function colorText(showWords, textX, textY, fillColor){
            canvasContext. fillStyle = fillColor;
            canvasContext. fillText(showWords, textX, textY);


        }

    </script>

</body>

</html>