小球真实弹跳模拟程序特定输入下卡顿不弹跳问题求助

我开发了一个具备真实弹跳行为的小球模拟程序，支持输入**velocity（速度）和angle（角度）**参数。程序通过变量*cor（恢复系数）*设置小球每次弹跳能量减少20%。输入63 45、60 45、59 45这类参数时，小球表现正常；但输入42至112之间末位为2或7的velocity值时，小球不会弹跳，直接卡在地面。

程序代码 #

JavaScript代码

document.getElementById("ball").style.top = document.getElementById("container").offsetHeight - 50 + "px"; //make ball be at correct position from start

let gravity = -9.8; // gravitational acceleration (m/s^2)
let velocity = 0; // initial velocity (m/s)
let angle = 0; // angle of projection (degrees)

// get input from user
let velocityInput = document.querySelector('#velocity-input');
let angleInput = document.querySelector('#angle-input');


// function to calculate the aerodynamic trajectory of the ball
function calculateTrajectory() {
  // get velocity and angle from user input
  velocity = parseFloat(velocityInput.value);
  angle = parseFloat(angleInput.value);

  // convert angle from degrees to radians
  let angleRad = angle * (Math.PI / -180);

  // calculate initial x and y components of velocity
  let vx = velocity * Math.cos(angleRad);
  let vy = velocity * Math.sin(angleRad);

  // get container dimensions
  let container = document.querySelector('#container');
  let containerHeight = container.offsetHeight;

  // set initial position of ball at bottom of container
  let x = 0;
  let y = containerHeight - 51; // 50 is the height of the ball element
  let t = 0;

  // set time interval (dt) and iteration limit (real speed of ball)
  let dt = 0.08;
  let limit = 1000;

  // set coefficient of restitution (COR)
  let cor = 0.8;

  function animate() {
    // update position and time
    x = x + vx * dt;
    y = y + vy * dt;
    t = t + dt;

    // update y-velocity due to gravity
    vy = vy - gravity * dt;

    // reverse y-velocity and reduce velocity if ball hits the ground
    if (y >= containerHeight - 50) {
      vy = -vy * cor;
    }

    if (x >= container.offsetWidth - 50 || x <= 0) {
      vx = -vx;
    }

    if (Math.abs(vy) < 0.2) {
      vx = vx * 0.96;
    }

    if (Math.abs(vx) < 1.75) {
      return;
    }

    // update ball's position on page
    let ball = document.querySelector('#ball');
    ball.style.left = `${x}px`;
    ball.style.top = `${y}px`;

    // request next frame of animation
    requestAnimationFrame(animate);
  }

  // start animation
  requestAnimationFrame(animate);
}

// get button and add event listener
let button = document.querySelector('#calculate-button');
button.addEventListener('click', calculateTrajectory);

CSS代码

#container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: lightgray;
}

#ball {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}

HTML代码

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>

<body>
  <div id="container">
    <div id="ball"></div>
  </div>
  <br>
  <label for="velocity-input">Velocity:</label>
  <input type="number" id="velocity-input" value="50">
  <label for="angle-input">Angle:</label>
  <input type="number" id="angle-input" value="45">
  <button id="calculate-button">Calculate Trajectory</button> <br><br>
  <div>
    Good values: 63 45; 60 45; 59 45 <br> Bad values: every velocity-value ending with 2 or 7 between 42 and 112
  </div>

</body>

</html>

内容的提问来源于stack exchange，提问作者Arvid Westberg