Javascript 删除dom动画中的元素

我尝试删除一些动画元素，如果它们超过屏幕高度。为此，将在循环

中检查
数组
。数组具有所创建的
div
的id。理论上，所有y位置高于屏幕高度的div都应该被删除，并且数组中的值应该被删除。但现在它变成了每n个元素被移除。有人知道这个问题吗<代码>框=设置间隔（新框，1000）更改间隔时间时影响行为


var cx=wwidth/100；
var cy=wheight/100；
var maxpos=cx*80；
无功转速；
var盒；
var计数器=0；
var rectids=[]；
var删除；
函数newbox（）{
var allpositions=数组（0，cx*25，cx*50，cx*75）；
var rectpos=allpositions[Math.floor（Math.random（）*allpositions.length）]；
速度=0；
var-box=document.createElement（'div'）；
计数器++；
box.className=“游戏btn”；
box.id='n'+计数器；
box.style.cssText=“顶部：“+speed+”px；左侧：“+rectpos+”px；宽度：“+cx*25+”px；高度：“+cy*10+”px；位置：绝对”；
控制台日志（rectpos）；
文件.正文.附件（框）；
rectids.push（box.id）；
}
函数游戏（）{
框=设置间隔（新框，1000）；
animaterects=setInterval（函数（）{
速度+=cx/300；
$（“.game btn”）.css（“顶端”，“速度+”px”）；
}, 10);
deleting=setInterval（函数（）{
for（var i=0；iwheight）{
$（“#”+rectids[i]）.remove（）；
拼接（rectids[i]）；
}
}
}, 50);
}
游戏（）；

var cx = wwidth / 100;
var cy = wheight / 100;
var maxpos = cx * 80;

var speed;
var box;
var counter = 0;
var rectids = [];
var deleting;

function newbox() {
    var allpositions = Array(0, cx * 25, cx * 50, cx * 75);
    var rectpos = allpositions[Math.floor(Math.random() * allpositions.length)];
    speed = 0;
    var box = document.createElement('div');

    counter++;
    box.className = "game-btn";
    box.id = 'n' + counter;
    box.style.cssText = "top:" + speed + "px;left:" + rectpos + "px;width:" + cx * 25 + "px;height:" + cy * 10 + "px;position:absolute";
    console.log(rectpos);
    document.body.appendChild(box);
    rectids.push(box.id);
}

function game() {
    box = setInterval(newbox, 1000);
    animaterects = setInterval(function () {
        speed += cx / 300;
        $(".game-btn").css("top", "+=" + speed + "px");
    }, 10);

    deleting = setInterval(function () {
        for (var i = 0; i < rectids.length; i++) {
            var x = $("#" + rectids[i]).position();
            if (x.top > wheight) {
                $("#" + rectids[i]).remove();
                rectids.splice(rectids[i]);
            }
        }
    }, 50);
}

game();