HTML小游戏开发问题：圆形元素无法跳跃求助

核心问题分析 #

你的代码中存在两个关键问题导致小球无法跳跃：

1. 碰撞后停止了动画循环：当小球碰到pad时，你调用了clearInterval(interval)，直接终止了所有位置更新逻辑，后续修改dy也无法让小球移动。
2. 缺少重力模拟：没有持续更新垂直速度，小球无法自然下落，跳跃后没有回落效果。

修复后的完整代码 #

JavaScript 代码

let dy = 2; // 垂直速度
let interval;
let y; // 在事件监听函数外声明y
let collision = false;

function startGame() {
  let circle = document.querySelector('.circle');
  y = parseInt(circle.style.top) || 10; // 初始顶部位置
  let pad = document.querySelector('.pad');
  let padTop = window.innerHeight - pad.offsetHeight; // 获取pad的顶部位置

  console.log("Pad height:", pad.offsetHeight);
  console.log("Pad top position:", padTop);

  // 清除已有定时器，避免重复启动多个循环
  if (interval) clearInterval(interval);

  interval = setInterval(function() {
    // 应用重力：持续增加向下的速度
    dy += 0.2;

    // 更新垂直位置
    y += dy;

    // 处理与pad的碰撞
    if (y + circle.offsetHeight >= padTop) {
      // 将小球定位到pad顶部
      y = padTop - circle.offsetHeight;
      dy = 0; // 停止下落
      collision = true;
      console.log("touchè");
    } else {
      collision = false;
    }

    // 防止小球超出屏幕顶部
    if (y < 0) {
      y = 0;
      dy = Math.abs(dy); // 反弹下落
    }

    // 更新小球在页面上的位置
    circle.style.top = y + 'px';
  }, 10); // 每10毫秒更新一次位置
}

// 监听空格键按下事件
document.addEventListener('keydown', function(event) {
  if (event.code === 'Space') {
    event.preventDefault(); // 阻止页面滚动
    if (collision) { // 仅允许在pad上时跳跃
      dy = -10; // 设置向上跳跃的速度
      collision = false; // 禁止二次跳跃，直到再次落地
    } else {
      console.log("Nuh uh, jump when on pad. this ain't your double jump type shi...");
    }
  }
});

CSS 代码（需放入HTML的<style>标签中）

body {
  background-color: royalblue;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans';
  margin: 0;
  padding: 0;
  cursor: default;
  position: relative;
  height: 100vh;
}

.button {
  background-color: rgb(0, 153, 255);
  border-radius: 10px;
  font-family: 'Ubuntu', sans-serif;
  position: absolute;
  height: 100px;
  width: 100px;
  text-decoration: solid;
  top: 20px;
  right: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.circle {
  background-color: dodgerblue;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.pad {
  background-color: rgb(0, 25, 105);
  border-radius: 40px;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  border: 2px solid black;
  z-index: 10;
  text-align: center;
  line-height: 50px;
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Idle Game!</title>
  <style>
    <!-- 此处放入上述CSS代码 -->
  </style>
</head>
<body>
  <div class="pad">Pad</div>
  <div class="circle"></div>
  <div class="button" onclick="startGame()">Start the game!</div>
</body>
</html>

关键修复点说明 #

• 保留动画循环：移除了clearInterval(interval)，让定时器持续运行，确保小球位置能不断更新。
• 添加重力效果：每次循环增加dy的值，模拟重力，让小球跳跃后自然下落。
• 优化碰撞逻辑：碰撞时仅重置位置和速度，不终止循环，同时标记collision为true，允许触发跳跃。
• 禁止二次跳跃：跳跃后立即将collision设为false，直到小球再次落地才能跳跃。
• 阻止页面滚动：添加event.preventDefault()，避免空格键触发页面滚动影响游戏体验。

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