master

分支 (1)

管理

管理

master

fixed-animation
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=500,height=500 initial-scale=1.0" />
    <title>冬子</title>
    <style>
      :root {
        --offset-x: 0;
        --offset-y: 0;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 50px;
        height: 50px;
        background-color: skyblue;
        position: absolute;
        top: calc(100px + var(--offset-y));
        left: calc(100px + var(--offset-x));
        border-radius: 50%;

        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .arrows {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .arrows-head {
        width: 23px;
        height: 5px;
        background-color: red;
        transform: rotate(-45deg) translateY(0px) translateX(-5px);
      }
      .arrows-head-left {
        width: 20px;
        height: 5px;
        background-color: red;
        transform: rotate(-135deg) translateY(-10px) translateX(-7px);
      }
      .arrows-body {
        width: 100px;
        height: 5px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      哎<br />
      程小右
    </div>
    <div class="arrows">
      <div class="arrows-head"></div>
      <div class="arrows-head-left"></div>
      <div class="arrows-body"></div>
    </div>

    <script>
      const boxDom = document.querySelector(".box");
      let availTop = 0;
      let availLeft = 0;
      // 需要用户点击授权getScreenDetails这个API
      // boxDom.onclick = async () => {
      //   const screenDetails = await window.getScreenDetails();
      //   console.log(screenDetails);
      // };

      (async () => {
        const screenDetails = await window.getScreenDetails();
        availTop = screenDetails.currentScreen.availTop;
        availLeft = screenDetails.currentScreen.availLeft;
        window.requestAnimationFrame(update);
        console.log("运行几次");
        window.resizeTo(500, 500);
        window.resizeBy(500, 500);
      })();

      function update() {
        const screenX = window.screenX;
        const screenY = window.screenY;
        boxDom.style.setProperty("--offset-x", `${availLeft - screenX}px`);
        boxDom.style.setProperty("--offset-y", `${availTop - screenY}px`);
        window.requestAnimationFrame(update);
        updateAngle();
      }

      function updateAngle() {
        // 修改箭头角度
        let arrowsDom = document.querySelector(".arrows");
        // 获取两个dom的位置
        // console.log(boxDom.getBoundingClientRect());
        // console.log(arrowsDom.getBoundingClientRect());

        const rect1 = boxDom.getBoundingClientRect();
        const rect2 = arrowsDom.getBoundingClientRect();

        const centerX1 = rect1.left + rect1.width / 2;
        const centerY1 = rect1.top + rect1.height / 2;
        const centerX2 = rect2.left + rect2.width / 2;
        const centerY2 = rect2.top + rect2.height / 2;

        const angle =
          Math.atan2(centerY2 - centerY1, centerX2 - centerX1) *
          (180 / Math.PI);
        arrowsDom.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;

        if (crash(rect1, rect2)) {
          alert("被你发现了！！！哈哈哈哈");
        }
      }

      function crash(rect1, rect2) {
        if (
          rect1.left > rect2.right ||
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top
        ) {
          return false; // 未碰撞
        } else {
          return true; // 碰撞
        }
      }
    </script>
  </body>
</html>