原生js写一个眼睛会跟着鼠标动的笑脸

    html{overflow-x: hidden;}
    body{width: 100%;height: 100%;background: #613900;}
    .face{width: 500px;height: 500px;background: #ffc400;border-radius: 50%;margin: 50px auto;overflow: hidden;}
     .eye{width: 300px; height: 100px;display: flex;justify-content:space-between;margin: 100px auto;} 
     .eyes{width: 120px;height: 120px;background: white;border-radius: 50%;}  
     .mouth{width: 235px;height: 100px;background: #bc7500;border-radius:0  0 100px 100px;margin: 110px auto;transition: .5s;}
     .eye .eyes::before{content: '';display: block;width: 60px;height: 60px;background: #323231;transform: translate(-50%, -50%);position: relative;top: 35%;border-radius: 50%;left: 55px;}
     /* .ey{width: 70px;height: 70px;background: #323231;border-radius: 50%;position: absolute;left: 20px;top: 8px;} */
     .face:hover .mouth{border-radius:0 ;height: 50px;}

    <div class="face">
        <div class="eye">
            <div class="eyes"></div>
            <div class="eyes"></div>
        </div>
        <div class="mouth"></div>
    </div>

    let eyes = document.querySelectorAll('.eyes')
    document.onmousemove = function(event){
        eyes.forEach((item, index) => {
            var x = item.offsetLeft + item.clientWidth / 2; // 眼睛的x坐标
            var y = item.offsetTop + item.clientHeight / 2; // 眼睛的y坐标
            var rad = Math.atan2(event.pageX - x, event.pageY - y); // 鼠标和眼睛的坐标距离，然后用atan2函数计算出该点与(0, 0)点之间的弧度
            var rot = (rad * (180 / Math.PI) * -1) + 180; // 转换成角度
            item.style.transform = 'rotate(' + rot + 'deg)'
        })
    }