如何修复JavaScript方块跳跃机制：实现空格键触发的非瞬移弹跳效果

实现受重力作用下落至特定y值的黑色方块动画，同时通过空格键触发方块跳跃（非瞬移，通过速度反转实现弹跳，到达最高点后由重力拉回地面）。当前代码存在问题：方块卡在初始位置，按下空格键后仅瞬移回原位置，且重力值不断增大。

原尝试代码：

var square = document.createElement("div");
square.style.width = "50px";
square.style.height = "50px";
square.style.position = "absolute";
square.style.left = (window.innerWidth / 2 - square.offsetWidth / 2)/2 + "px";
square.style.top = (window.innerHeight / 2 - square.offsetHeight / 2)/2 + "px";
square.style.backgroundColor = "black";
document.body.appendChild(square);

var gravity = 10;
var velocity = 0;

document.addEventListener("keydown", function(event) {
  if (event.key === " " || event.key === "Spacebar") {
    velocity = -30;
    var intervalId = setInterval(function() {
      velocity += gravity;
      gravity += .25;
      square.style.top = (window.innerHeight / 2 - square.offsetHeight / 2)/2 + velocity + "px";
  
      if (square.offsetTop + square.offsetHeight > window.innerHeight-100) {
        clearInterval(intervalId);
        velocity = 0;
      }
    }, 1000 / 120);
  }
});

• 每次按空格键都会新建一个setInterval，多个定时器同时修改方块位置，导致逻辑冲突混乱。
• 设置top时直接用初始固定值加速度，没有基于方块当前位置累加位移，导致方块无法正确移动。
• 每次定时器执行都让gravity += .25，重力会无限制递增，最终运动完全失控。
• 一旦触发落地就清除定时器，后续再按空格无法重新启动动画循环。

// 创建方块元素
var square = document.createElement("div");
square.style.width = "50px";
square.style.height = "50px";
square.style.position = "absolute";
// 水平居中
square.style.left = `${window.innerWidth / 2 - square.offsetWidth / 2}px`;
// 初始化y坐标（用变量存储，避免频繁读取DOM样式）
let currentY = 50;
square.style.top = `${currentY}px`;
square.style.backgroundColor = "black";
document.body.appendChild(square);

// 物理参数
const gravity = 1.2; // 固定重力值，不要动态递增
let velocity = 0;
const jumpForce = -30;
// 地面y坐标（方块底部接触地面的位置）
const groundY = window.innerHeight - square.offsetHeight - 100;

// 全局动画循环，只启动一次
function animate() {
  // 更新速度（重力累加）
  velocity += gravity;
  // 更新当前y坐标
  currentY += velocity;

  // 地面碰撞检测：如果方块底部超过地面，重置位置和速度
  if (currentY > groundY) {
    currentY = groundY;
    velocity = 0;
  }

  // 应用位置到DOM
  square.style.top = `${currentY}px`;

  // 持续循环动画
  requestAnimationFrame(animate);
}

// 启动动画
animate();

// 空格键跳跃事件
document.addEventListener("keydown", function(event) {
  // 只有当方块在地面上时才能跳跃
  if ((event.key === " " || event.key === "Spacebar") && currentY === groundY) {
    velocity = jumpForce;
  }
});

• 用requestAnimationFrame做全局动画循环，比setInterval更流畅，而且只启动一次，不会有多个定时器冲突的问题。
• 用变量currentY存储方块当前位置，避免频繁读取DOM样式导致的性能损耗。
• 把重力设为固定常量，保证运动规律稳定，不会越变越大。
• 限制只有方块接触地面时才能跳跃，避免空中无限连跳（需要连跳的话删掉currentY === groundY的判断就行）。
• 落地时直接把方块位置重置到地面高度，同时把速度清零，防止方块穿透地面。

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