Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        document.addEventListener("DOMContentLoaded", function(event){
            var canvas = document.getElementById("canvasId");
            var canvasId = canvas.getContext("2d");
            reset();

            function mouse_player1(evt){
                var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
                var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
                var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
                return {
                    cursor_x: mouseX,
                    cursor_y: mouseY,
                } // фунцкията връша два параметъра, cursor_x и cursor_y
            }

            canvas.addEventListener("mousemove", function(evt){
                var mouse = mouse_player1(evt);
                userX = mouse.cursor_x - sizeX/2;
                // draw()

            });

            var fps = 30;
            setInterval(execute, 1000/fps);

            function execute(){
                move();
                draw();
            }

            function move(){

                x += stepX;
                y += stepY;
                if(x>= cW - radius){
                    stepX = -stepX;
                }
                if(y>= cH - radius - sizeY){
                    if(userX < x + radius && x - radius < userX + sizeX){
                        change_dir();
                        change_speed();
                        stepY = -stepY;
                    } else {
                        // alert("Game Over");
                        reset();
                        x = parseInt(radius + Math.random()*100);
                        y = 50;

                    }

                }
                if(y<= 0 + radius){
                    if(y<= 0 + radius + pcSizeY){

                        destroyBlock();

                    }
                    stepY = -stepY;
                }
                if(x<= 0 + radius){
                    stepX = -stepX;
                }
                oldUserX = userX;
            }

            function draw(){
                canvasId.fillStyle = "black";
                canvasId.fillRect(0, 0, canvas.width, canvas.height);
                canvasId.fillStyle = "green";
                canvasId.beginPath();
                canvasId.arc(x, y, radius, 0, Math.PI*2);
                canvasId.fill();

                canvasId.fillStyle = "white";
                canvasId.fillRect(userX, userY, sizeX, sizeY);

                drawBlocks();

            }
            function reset(){
                pcSizeY = 20;
                stepY = 12;
                pcCoords = [];
                drawBlocks();
                pcColors = [];
                for (var i = 0; i < 9; i++) {
                    var rnd = Math.floor(Math.random()*10);
                    pcColors.push(colorsR[rnd]);
                }

            }
            function drawBlocks(){
                for (var i = 0; i < 9; i++) {
                    canvasId.fillStyle = pcColors[i];
                    pcCoords.push(i*110 + 10);// x1 = 10, x2 = 120, x3 = 230
                    canvasId.fillRect(pcCoords[i], pcY, pcSizeX, pcSizeY);
                }
            }
            function destroyBlock(){
                for (var i = 0; i < pcCoords.length; i++) {
                    if( pcCoords[i] < x + radius && x - radius < pcCoords[i] + pcSizeX ){
                        pcCoords[i] = -200;
                    }
                }
            }

            function change_dir(){
                if(oldUserX < userX){
                    if(stepX < 0){
                        stepX = -stepX;
                    }
                } else {
                    if(stepX > 0){
                        stepX = -stepX;
                    }
                }
            }
            function change_speed(){
                if(stepY > 0){
                    if(userX <= x && x <= userX + radius*1.1){
                        stepY = stepY + 1.45;
                        if(x<0){ stepX = stepX - 1.1 ;} else { stepX = stepX + 1.1; }
                    } else if(userX + sizeX - radius*1.1 <= x && x<= userX + sizeX){
                        stepY = stepY + 1.45;
                    } else {
                        stepY = stepY - 1.5;
                        console.log("speed decreased")
                    }
                }
                if(stepY < 0){
                    if(userX <= x && x <= userX + radius*1.1){
                        stepY = stepY - 1.45;
                        if(x<0){ stepX = stepX - 1.1 ;} else { stepX = stepX + 1.1; }
                    } else if(userX + sizeX - radius*1.1 <= x && x<= userX + sizeX){
                        stepY = stepY - 1.45;
                    } else {
                        stepY = stepY + 1.5;
                        console.log("speed decreased")
                    }
                }


            }

        });
        var x = 50;
        var y = 50;
        var cW = 1000;
        var cH = 500;
        var radius = 20;
        var stepX = 10;
        var stepY = 12;
        var sizeX = 100;
        var sizeY = 20;
        var userX = cW/2 - sizeX/2;
        var userY = cH - sizeY;
        var pcSizeX = 100, pcSizeY = 20;
        var pcX = cW - pcSizeX - 200, pcY = 0;
        var pcCoords = [];
        var pcSizeArr = [];
        var oldUserX = userX;
        var pcColors = [];
        var colorsR = ["pink", "red", "white", "blue", "green", "magenta", "yellow", "purple", "orange", "beige"];

    </script>
    <style type="text/css">
    #canvasId{
        background: black;
    }
    </style>
</head>
<canvas id="canvasId" width="1000" height="500"></canvas>
    <body>

    </body>
</html>