krouzek:mys

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Míč</title>
 
    <style>
        body {
            background-color: #e0e0e0;
            display: flex; 
            justify-content: center;
            align-items: center;
            height: 100vh;
                    }
 
        #herni_plocha {
            background-color:#ffaaaa;
            width: 300px;
            height:300px;
        }
 
        #mic {
            background-color: green;
            width: 10px;
            height: 10px;
            border-radius: 25% 50%;
            transform: translate(80px, 50px);
        }
    </style>
 
    <script>
    /* <![CDATA[ */
    /* Sem prijde javascript kod */
 
 
    function mys(event){
        const rect = event.target.getBoundingClientRect();
         // x position within the element.
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
 
        const mic = document.getElementById('mic')
        mic.style.transform = `translate(${x}px, ${y}px)`
    }
 
    setTimeout(
        function(){
            document.getElementById('herni_plocha').addEventListener("mousemove", mys);
        },0
    )
    /* ]]> */
    </script>
</head>
 
<body>
    <div id="herni_plocha">
        <div id="mic"></div>
 
    </div>
 
</body>
</html>