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");

            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){
                        stepY = -stepY;


                    } else {
                        // alert("Game Over");
                        x = parseInt(radius + Math.random()*100);
                        y = 50;

                    }

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

                        if( pcX < x + radius && x - radius < pcX + pcSizeX ){
                            pcSizeY = -pcSizeY;
                        }

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

            }

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


                canvasId.fillRect(pcX, pcY, pcSizeX, pcSizeY);


                }

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


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

    </body>
</html>