模拟重力（物体下落）

刺骨的言语ヽ痛彻心扉 2023-06-28 09:00 9阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>温故而知新</title>
      <style>
        div {
          position: absolute;
          left: 0px;
          top: 0px;
          background: #ff0000;
          width: 100px;
          height: 100px;
        }
      </style>
    </head>
    
    <body>
      <div id='demo'></div>
    </body>
    
    <script>
      const oDiv = document.getElementById("demo");
      oDiv.onclick = function () {
        startMove(this)
      }
    
      function startMove(dom) {
        clearInterval(dom.timer);
        let iSpeedX = 6, iSpeedY = 8;
        let newTop = null, newLeft = null;
        let g = 3;
    
        dom.timer = setInterval(function () {
          iSpeedY += g;
          newTop = dom.offsetTop + iSpeedY;
          newLeft = dom.offsetLeft + iSpeedX;
    
          if (newTop >= document.documentElement.clientHeight - dom.clientHeight) {
            iSpeedY *= -1;
            iSpeedY *= 0.8;
            iSpeedX *= 0.8;
            newTop = document.documentElement.clientHeight - dom.clientHeight;
          }
          if (newTop <= 0) {
            iSpeedY *= -1;
            iSpeedY *= 0.8;
            iSpeedX *= 0.8;
            newTop = 0;
          }
          if (newLeft >= document.documentElement.clientWidth - dom.clientWidth) {
            iSpeedX *= -1;
            iSpeedY *= 0.8;
            iSpeedX *= 0.8;
            newLeft = document.documentElement.clientWidth - dom.clientWidth;
          }
          if (newLeft <= 0) {
            iSpeedX *= -1;
            newLeft = 0;
            iSpeedY *= 0.8;
            iSpeedX *= 0.8;
          }
          if (Math.abs(iSpeedX) < 1) {
            iSpeedX = 0
          }
          if (Math.abs(iSpeedY) < 1) {
            iSpeedY = 0
          }
    
          if (iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight) {
            console.log("完成")
            clearInterval(dom.timer)
          } else {
            dom.style.top = newTop + "px";
            dom.style.left = newLeft + "px";
          }
        }, 20)
      }
    </script>
    
    </html>