Javascript 动画使元素离开屏幕

我正在制作关于赛马游戏的JavaScript项目，在赛道上有一些障碍，角色应该检测并触发跳跃动画。没有明显的原因，动画以错误的方式触发，角色飞出屏幕，一段时间后返回，同样的事情发生在第二个障碍物上。在视频中，我只是展示了动画应该是什么样子

该逻辑是关于setInterval和element.offsetTop函数的构建。 启动按钮触发触发移动功能的间隔。在该功能中，将检查角色的位置和当前选择的（由i计数器）障碍物。当角色在障碍物前80像素时，if语句通过向元素添加类名触发动画，之后我不知道发生了什么。它应该平滑地执行动画，而不是模仿Daedalus，触发另一个if语句来计算灌木丛数，并删除给定的类名以使另一个跳跃可行

动画的CSS代码

.horse.jump {
animation-iteration-count: 500;
transform: rotate(0deg) scale(1,1);
margin-top: 0;
animation-direction: initial, initial;
background-position:48px -192px;
animation-fill-mode: backwards;
animation: jump 1s;
}

JS代码

var horse = document.getElementsByClassName('horse');
var bush = document.getElementsByClassName('bush');    
var i = 0; //Counter for the next obstacle    

function horseMoving () { 
    //Function connecting Start Button with 
    // moving function by interval
    setInterval(moveDown, 9);
}

function moveDown (){   
    // Cheking character position   
    var positionHorseUp = horse[0].offsetTop;

    //Checking for the current closest obstacle
    var positionBushUp = bush[i].offsetTop;

    horse[0].classList.add('runDown');      
    horse[0].style.top = positionHorseUp + 1 + 'px';

    //When the character gets close to obstacle
    if (positionHorseUp==positionBushUp-80) {

        //Makes horse to jump
        horse[0].classList.add('jump');         
    }   

   //When the character gets away from obstacle
    if (positionHorseUp==positionBushUp+20) {           
        //Takes away the jump class
        horse[0].classList.remove('jump');

        // This statements prevents an array 
        // from getting out of elements 
        // and triggers cheking for next obstacle
        if (i<5) { 
            i++; }  
    }   
}

 // These 2 functions are only for video purpose
function showJump() {
    horse[0].classList.add('jump')}
function showJump2() {
    horse[0].classList.remove('jump')}


function loadFunction() {

    var startButton = document.getElementById('start')
    startButton.addEventListener('click', horseMoving)

    // These 2 lines are only for video purpose
    startButton.addEventListener('click', showJump2)
    horse[0].addEventListener('click', showJump)
}

document.addEventListener('DOMContentLoaded', loadFunction);

var horse=document.getElementsByClassName（'horse'）；
var bush=document.getElementsByClassName（'bush'）；
var i=0//顶住下一个障碍物
函数（）{
//功能连接启动按钮和
//按区间移动函数
设置间隔（向下移动，9）；
}
函数moveDown（）{
//检查字符位置
var positionHorseUp=horse[0]。offsetTop；
//检查当前最近的障碍物
var positionBushUp=bush[i]。偏置；
horse[0]。classList.add（'runDown'）；
horse[0]。style.top=positionHorseUp+1+'px'；
//当角色接近障碍物时
如果（positionHorseUp==positionBushUp-80）{
//使马跳跃
马[0]。类列表。添加（'jump'）；
}   
//当角色离开障碍物时
如果（positionHorseUp==positionBushUp+20）{
//取消了跳跃课程
horse[0]。classList.remove（'jump'）；
//此语句阻止数组
//从元素中解脱出来
//并触发下一个障碍的检查
如果（i由于将动画应用于
jump
类，因此添加该类时，
offsetTop
值实际上会改变。因此，您不应该依赖于
offsetTop
，而应该使用您自己设置的自变量，让
offsetTop
依赖于它。将其设置为的
fsetTop
初始设置，但先增加它，而不是增加
偏移设置，然后将
顶部设置为它。这可能会让人困惑，所以让我发布一些代码

您可以在脚本的开头添加这个

var positionHorseUp;

然后，将其添加到加载事件

positionHorseUp = horse[0].offsetTop;

那你就把这条线移走

var positionHorseUp = horse[0].offsetTop;

…并将设置
顶部
位置的那个替换为这个

horse[0].style.top = ++positionHorseUp + 'px';

这样，就不需要依赖于
offsetTop
值，您可以安全地应用该动画，而不会中断马的存储位置

（另外，使用，而不是
setTimeout
。它更有效，因为它在每个画框上都被调用。还可以添加相应的代码以补偿浏览器环境之间的不确定时间间隔。）
仍然无法解决此问题，我尝试跟踪if语句触发的次数，但我没有解决任何问题。所有编码器中的最佳拖缆和所有拖缆中的最佳编码器。