x e y en javascript

<!-- This simple code was written by ProgramerRimon within 10 minutes on 2022-03-20 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>paly...with x and y....</title>
    <style>
        .x,
        .y {pointer-events: none;width: 2px;height: 100%;position: fixed;border-left:1px dotted red;  }
        .y { width: 100%;height: 2px;border-top:1px dotted red;  }
        .c {pointer-events: none;width: 200px;height: 200px;border-radius: 50%;position: fixed;border: 1px dotted rgb(0, 225, 255);;display: flex;align-items: center;justify-content: center;}
        .showX,
        .showY {pointer-events: none;padding: 5px; color: white;background: rgb(0, 225, 255);
        }
    </style>
</head>

<body>
    <div class="x"></div>
    <div class="c">
        <div class="showX"></div>
        <div class="showY"></div>
    </div>
    <div class="y"></div>

</body>
<script>
    var x = document.querySelector('.x');
    var y = document.querySelector('.y');
    var c = document.querySelector('.c');
    var X = document.querySelector('.showX');
    var Y = document.querySelector('.showY');
    window.onmousemove = function (e) {
        var cx = e.offsetX;
        var cy = e.offsetY;
        X.innerText = cx + 'x';
        Y.innerText = cy + 'y';
        x.style.left = cx + 'px';
        y.style.top = cy + 'px';
        c.style.left = cx - 100 + 'px';
        c.style.top = cy - 100 + 'px';

    }
</script>

</html>
Homely Hamerkop