Javascript 使用纯jQuery的冲突检测没有提供所需的输出

我正在尝试开发一个非常简单的游戏，当用户点击游乐场时，飞船（红色框）将左右移动

有一些移动的墙壁（黑匣子）作为船舶应避免碰撞的障碍物

如果发生任何碰撞，墙壁将停止移动，并在控制台中打印文本

我已经尽我所能成功地做到了这一点但它有时会起作用，但并不总是。您可以在下面的代码中看到它，尝试与墙碰撞。有时它会停止它们并打印文本，有时它会忽略碰撞，就好像什么都没发生一样

我不知道为什么会这样

这是代码

$（'document'）.ready（函数（）{
var$totalHeight=$（'.inner'）.height（）；//墙的高度
var$maxHeight=Math.ceil（Math.ceil（$totalHeight/3）-（Math.ceil（$totalHeight/3）*30）/100）；//总墙高的30%
$（'.wall'）。每个（函数（i，obj）{
$（此）.height（$maxHeight）；
$（'.wall.four'）.css({
“高度”：$wallGap
});
})
var$wallGap=Math.ceil（$totalHeight/3）-$maxHeight；
var$wallOneTop=0；
var$wallTwoTop=$maxHeight+$wallGap；
变量$wallThreeTop=（$maxHeight*2）+（$wallGap*2）；
变量$wallFourTop=-$（'.wall.four'）.height（）-$wallGap；
$（'.wall.one'）.css({
‘顶级’：$wallOneTop
});
$（'.wall.two'）.css({
'top'：$wallTwoTop
});
$（'.wall.three'）.css({
“top”：$wallThreeTop
});
$（'.wall.four'）.css({
“top”：$wallFourTop
});
功能移动墙（wallObj）{
var$currentTop=wallObj.position（）.top；
变量$limitTop=$（'.inner'）.height（）；
如果（$currentTop>=$limitTop）{
var$rand=Math.floor（Math.random（）*（$maxHeight-$wallGap+1）+$wallGap）；
瓦洛布高度（兰特）；
var$top=-（wallObj.height（））；
}否则{
变量$top=（wallObj.position（）.top）+5；
}
var$collide=checkcollion（wallObj）；
wallObj.css({
‘top’：$top
});
返回$collide；
}
var$wallTimer=setInterval（函数（）{
$（'.wall'）。每个（函数（i，obj）{
var$status=moveWall（$（此））；
如果（$status==true）{
clearInterval（$wallTimer）；
}
})
}, 40);
功能检查碰撞（wallObj）{
变量$ship=$（'.ship'）；
var$shipWidth=$ship.width（）；
var$shipHeight=$ship.height（）；
var$shipLeft=$ship.position（）.left；
var$shipRight=$shipLeft+$shipWidth；
var$shipTop=$ship.position（）.top；
变量$SHIPHOTTOM=$shipTop+$shipHeight；
var$wall=wallObj；
var$wallWidth=wallObj.width（）；
var$wallHeight=wallObj.height（）；
var$wallLeft=wallObj.position（）.left；
变量$wallRight=$wallLeft+$wallWidth；
var$wallTop=wallObj.position（）.top；
var$wallBottom=$wallTop+$wallHeight；
如果(
$shipLeft>=$wallRight||
$shipRight=$wallBottom||
$shippottom=$inner.width（））{
$ship.animate({
“左”：“0”
}，500，“线性”）；
}
});
});
.outer{
背景：#fff；
边框：20px实心#efef；
宽度：400px；
高度：600px；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
溢出：隐藏；
}
.外部.内部{
背景：#fff；
身高：100%；
宽度：100%；
保证金：自动；
位置：相对位置；
溢出：隐藏；
}
.外.内.墙{
宽度：5px；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
背景：#000；
}
.外.内.船{
宽度：15px；
高度：15px；
背景：红色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

正如freefomn-m已经说过的那样。
检查船舶动画循环中的碰撞，而不是墙壁

为此，我使用jQuery的
.animate
方法的第二类参数


我使用
“progress”
选项在船舶的每个移动周期中检查碰撞情况


console.clear（）；
$（'document'）.ready（函数（）{
var冲突=错误；
var collidedWith=null；
变量$ship=$（'.ship'）；
var$walls=$（“.wall”）
var$totalHeight=$（'.inner'）.height（）；//墙的高度
var$maxHeight=Math.ceil（Math.ceil（$totalHeight/3）-（Math.ceil（$totalHeight/3）*30）/100）；//总墙高的30%
$（'.wall'）。每个（函数（i，obj）{
$（此）.height（$maxHeight）；
$（'.wall.four'）.css({
“高度”：$wallGap
});
})
var$wallGap=Math.ceil（$totalHeight/3）-$maxHeight；
var$wallOneTop=0；
var$wallTwoTop=$maxHeight+$wallGap；
变量$wallThreeTop=（$maxHeight*2）+（$wallGap*2）；
变量$wallFourTop=-$（'.wall.four'）.height（）-$wallGap；
$（'.wall.one'）.css({
‘顶级’：$wallOneTop
});
$（'.wall.two'）.css({
'top'：$wallTwoTop
});
$（'.wall.three'）.css({
“top”：$wallThreeTop
});
$（'.wall.four'）.css({
“top”：$wallFourTop
});
功能移动墙（wallObj）{
var$currentTop=wallObj.position（）.top；
变量$limitTop=$（'.inner'）.height（）；
如果（$currentTop>=$limitTop）{
var$rand=Math.floor（Math.random（）*（$maxHeight-$wallGap+1）+$wallGap）；
瓦洛布高度（兰特）；
var$top=-（wallObj.height（））；
}否则{
变量$top=（wallObj.position（）.top）+5；
}
//var$collide=checkcollion（wallObj）；
wallObj.css({
‘top’：$top
});
//返回$collide；
}
var$wallTimer=setInterval（函数（）{
$walls.每个（功能（i、obj）{
moveWall（$（本））；
如果（碰撞）{
clearInterval（$wallTimer）；
}
})
}, 40);
函数checkCollision（）{
var$shipWidth=$ship.width（）；
var$shipHeight=$ship.height（）；
var$shipLeft=$ship.position（）.left；
var$shipRight=$shipLeft+$shipWidth；
var$shipTop=$ship.position（）.top；
变量$SHIPHOTTOM=$shipTop+$shipHeight；