本文详解为何为角色添加 duck 动画会导致障碍物位置异常偏移，并通过修正 CSS 定位模型（将容器设为 relative、子元素设为 absolute + bottom: 0）彻底隔离动画影响范围，确保跳跃与蹲伏仅作用于角色自身。
本文详解为何为角色添加 `duck` 动画会导致障碍物位置异常偏移，并通过修正 css 定位模型（将容器设为 `relative`、子元素设为 `absolute` + `bottom: 0`）彻底隔离动画影响范围，确保跳跃与蹲伏仅作用于角色自身。
在开发类似 Chrome 小恐龙（Dino）的横版跑酷游戏时，一个常见却隐蔽的布局陷阱是：多个 position: relative 元素共存于同一容器内，且均依赖 top 属性进行垂直位移动画。你当前的代码正是如此——#sprite 和 #obstacle 均使用 position: relative，并分别通过 top 控制纵向位置。问题在于：当 .duck 动画执行时，它修改的是 #sprite 的 top 值（例如从 150px 变为 175px），但该变化会触发其父容器（即 #container）的重排（reflow）。由于 #obstacle 同样是 relative 定位且初始 top: 125px 是相对于原始文档流计算的，父容器内部的尺寸或位置微调可能间接扰动其渲染位置，尤其在动画帧密集或浏览器渲染优化机制下，极易出现“障碍物反向上跳”的错觉。
根本解法是重构定位体系，实现视觉层的完全解耦：
✅ 关键修改三步走：
- 将 #container 设为 position: relative（作为绝对定位的参考上下文）；
- 将 #sprite 和 #obstacle 均改为 position: absolute；
- 统一使用 bottom: 0 锚定二者于容器底部基准线，再通过 top（或更推荐 transform: translateY()）独立控制垂直偏移。
以下是优化后的核心 CSS 片段（已整合关键修复）：
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
#container {
position: relative; /* ✅ 设为定位上下文 */
margin: 30px auto 0 auto;
height: 200px;
width: 500px;
border: 1px solid #ffffff;
background-color: #0d003c;
overflow-x: hidden; /* ✅ 防止障碍物移出容器时出现水平滚动条 */
}
#sprite {
width: 50px;
height: 50px;
background-color: #2897bf;
position: absolute; /* ✅ 改为绝对定位 */
bottom: 0; /* ✅ 底部对齐基准线 */
left: 0; /* ✅ 水平起始位置 */
}
#obstacle {
width: 25px;
height: 25px;
background-color: #afafc2;
position: absolute; /* ✅ 同样改为绝对定位 */
bottom: 0; /* ✅ 底部对齐同一基准线 */
left: 475px; /* ✅ 初始水平位置 */
animation: move 1s infinite linear;
}⚠️ 重要注意事项：
- 避免混用 top 和 bottom：一旦采用 bottom: 0 作为基准，动画中应只修改 top 或 transform，切勿同时设置 top 和 bottom（会引发冲突）。当前 @keyframes duck 中 top: 175px 是有效的，因其覆盖了 bottom: 0 的约束。
-
性能建议：transform: translateY() 比 top 更高效（不触发重排）。可将 duck 动画升级为：
@keyframes duck { 0% { height: 50px; transform: translateY(0); } 50% { height: 25px; transform: translateY(25px); } /* 下移25px使脚部保持贴地 */ 100% { height: 50px; transform: translateY(0); } } - JavaScript 逻辑无需改动：你的 jump() 和 duck() 函数本身完全正确，问题纯属 CSS 布局层面，因此事件监听与类名切换逻辑可保留原样。
通过以上调整，#sprite 的 duck 动画将严格作用于自身坐标系，#obstacle 因拥有独立的绝对定位上下文而彻底免疫干扰——从此，蹲伏只关乎角色姿态，障碍物永远忠实地沿地面滑行。
