Javascript 如何使元件停止下落？

下面这段文字是我的代码-我正在尝试创建chrome恐龙游戏，到目前为止一切都进行得很顺利，但我有一个问题-红色方块跳跃后，恐龙没有停止下落-而它应该。我不明白我的问题在哪里，因为我昨天写了同样的代码，一切都很好。重力函数可以在JavaScript中的

//gravity

下找到

注意它的代码与跳转函数非常相似，但它的工作方式不如跳转函数好。任何帮助都将不胜感激

//HTML元素+其他变量
const floor1=document.getElementById（“floor1”）；
const floor2=document.getElementById（“floor2”）；
const floor3=document.getElementById（“floor3”）；
const floor4=document.getElementById（“floor4”）；
const floor5=document.getElementById（“floor5”）；
const floor6=document.getElementById（“floor6”）；
const floor7=document.getElementById（“floor7”）；
const dino=document.getElementById（“dino”）；
const highBird=document.getElementById（“highBird”）；
const lowBird=document.getElementById（“lowBird”）；
const wideCactus=document.getElementById（“wideCactus”）；
const thinCactus=document.getElementById（“thinCactus”）；
让跳跃=0；
//楼层功能
setTimeout（函数（）{
floor1.classList.add（“floor1动画”）；
}, 0);
setTimeout（函数（）{
floor2.classList.add（“floor2动画”）；
}, 1000);
setTimeout（函数（）{
floor3.classList.add（“floor3动画”）；
}, 2000);
setTimeout（函数（）{
floor4.classList.add（“floor4Animation”）；
}, 3000);
setTimeout（函数（）{
floor5.classList.add（“floor5动画”）；
}, 4000);
setTimeout（函数（）{
floor6.classList.add（“floor6动画”）；
}, 5000);
setTimeout（函数（）{
floor7.classList.add（“floor7Animation”）；
}, 6000);
//跳跃
document.onkeydown=函数（事件）{
让key=event.key；
如果（键==“箭头向上”）{
让jumpCount=0；
if（dino.offsetTop==95）{
设jumpInterval=setInterval（函数（）{
dino.style.top=（dino.offsetTop-5）+“px”；
跳跃计数+=1；
跳跃=真；
如果（跳线计数==20）{
清除间隔（跳跃间隔）；
跳跃=假；
跳数=0；
}
}, 10);
}
}
}
//重力
setInterval（函数（）{
如果（跳转==false）{
让jumpGravity=setInterval（函数（）{
dino.style.top=（dino.offsetTop+5）+“px”；
}, 10);
if（dino.offsetTop==95）{
净空间隔（跳跃重力）；
}
}
}, 10);
正文{
保证金：0；
填充：0；
证明内容：中心；
对齐项目：居中；
显示器：flex；
宽度：100vw；
高度：100vh；
}
#游戏板{
宽度：1000px；
高度：150像素；
边框：2件纯黑；
溢出：隐藏；
保证金：自动；
位置：相对位置；
背景色：白色；
}
#恐龙{
宽度：30px；
高度：50px；
背景色：红色；
左：10px；
顶部：95px；
位置：绝对位置；
}
.地板背景{
位置：相对位置；
高度：10px；
宽度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.地板{
位置：绝对位置；
顶部：140px；
高度：10px；
宽度：200px；
}
#地板{
右：-200px；
背景色：红色；
}
.地板动画{
动画：平面化6s无限线性；
}
#地板2{
右：-200px；
背景颜色：蓝色；
}
.地板动画{
动画：平面化6s无限线性；
}
#地板3{
右：-200px；
背景颜色：绿色；
}
.地板动画{
动画：平面化6s无限线性；
}
#楼层4{
右：-200px；
背景颜色：紫色；
}
.Floor4动画{
动画：平面化6s无限线性；
}
#地板5{
右：-200px；
背景颜色：棕色；
}
.地板动画{
动画：平面化6s无限线性；
}
#楼层6{
右：-200px；
背景颜色：橙色；
}
.地板6{
动画：平面化6s无限线性；
}
#楼层7{
右：-200px；
背景颜色：黄色；
}
.地板7动画{
动画：平面化6s无限线性；
}
@关键帧平面化{
从{
右：-200px；
}
到{
右：1000px；
}
}
@关键帧跳跃{
}

恐龙游戏
您应该尝试简化代码，这可能会使问题更容易找到，甚至可能会将其完全删除

我建议使用一个速度系统，每一帧你用恐龙的流速调整恐龙的偏移量，然后从恐龙的流速中减去重力量

这会导致速度以恒定速率降低，但恐龙的偏移位置会以指数速度降低，模拟真实重力

然后，为了使碰撞有效，只需在减去重力之前测试恐龙是否处于或高于正确的“偏移”值。如果你发现恐龙在地面以下，只需将偏移设置为地面水平并清除速度

我还建议您将游戏转移到，因为这样您只需要处理对象的属性，而不是DOM元素样式的属性

带画布的Velocity示例：


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var x=10；
变量y=10；
var VelocityX=