javascript - js设置了根据当css的.top小于0px时执行一个函数，但是当top小于90px的时候就执行了，为什么？
刚学JS没多久，大概看了一遍书，想写一个贪吃蛇练练手，写了一个判断，当head.top < 0px 时，显示游戏结束，但是预览的时候.top到了90px就显示游戏结束了。查了代码不知道为什么，请大神解答一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {margin: 0;padding: 0;list-style: none;}
img {border: none;}
a {text-decoration: none;color: #666;}
#warp {width: 600px;height: 600px;border: 1px solid black;position: absolute;}
#head {width: 30px;height: 30px;background-color: black;position: absolute;left: 0px;top: 0px;}
.body {width: 30px;height: 30px;background-color: black;position: absolute;}
#food {width: 30px;height: 30px;background-color: black;position: absolute;display: none;}
#gameOver {position: absolute;color: black;font-family: "microsoft yahei";font-size: 30px;top: 250px;left: 215px;display: none;}
#Replay {border: 1px solid black;width: 100px;height: 40px;line-height: 40px;text-align: center;color: black;font-family: "microsoft yahei";font-size: 20px;border-radius: 10px;position: absolute;left: 245px;top: 310px;display: none;}
</style>
<body>
<p id="warp">
<p id="head"></p>
<!--<p class="body"></p>-->
<p id="food"></p>
<p id="gameOver">GameOver</p>
<p id="Replay">Replay</p>
</p>
<script type="text/javascript">
window.onload = function(){
var up;
var down;
var left;
var right;
var head = document.getElementById("head")
var warp = document.getElementById("warp")
function moveUp(){
head.style.top = head.offsetTop - 30 + "px";
gameOver();
}
//向上移动
function moveDown(){
head.style.top = head.offsetTop + 30 + "px";
gameOver();
}
//向下移动
function moveLeft(){
head.style.left = head.offsetLeft - 30 + "px";
gameOver();
}
//向左移动
function moveRight(){
head.style.left = head.offsetLeft + 30 + "px";
gameOver();
}
//向右移动
function ClearAllMoves(){
clearInterval(up);
clearInterval(down);
clearInterval(left);
clearInterval(right);
}
//停止所有移动
function FoodPosition(){
var randomX = Math.round(Math.random() * 19) * 30;//创建横坐标随机位置
var randomY = Math.round(Math.random() * 19) * 30;//创建纵坐标随机位置
document.getElementById("food").style.left = randomX + "px";//设置横坐标值
document.getElementById("food").style.top = randomY + "px";//设置纵坐标值
document.getElementById("food").style.display = "block";//设置food元素在产生随机位置值后显示，默认是不显示的，因为css里将其属性display设置为了none
// console.log(randomX);
// console.log(randomY);
// console.log(Math.random(20));
}
FoodPosition();
//食物随机位置生成
function BodyPosition(){
var randomX = Math.round(Math.random() * 19) * 30;//创建横坐标随机位置
var randomY = Math.round(Math.random() * 19) * 30;//创建纵坐标随机位置
document.getElementById("head").style.left = randomX + "px";//设置横坐标值
document.getElementById("head").style.top = randomY + "px";//设置纵坐标值
document.getElementById("head").style.display = "block";//设置food元素在产生随机位置值后显示，默认是不显示的，因为css里将其属性display设置为了none
}
BodyPosition();
//身体随机位置生成
function gameOver(){
if (head.style.top > 570 + "px") {
document.getElementById("gameOver").style.display = "block";
document.getElementById("head").style.display = "none";
document.getElementById("food").style.display = "none";
document.getElementById("Replay").style.display = "block";
ClearAllMoves();
}
}
//判断超过边缘游戏结束
document.onkeypress = function(e){
ClearAllMoves();//清除所有运动，确保运动轨迹不重合
if (e.keyCode == 119) {
up = setInterval(moveUp,500);
}//调用moveUp函数，使body可以向上移动
else if(e.keyCode == 115 ){
down = setInterval(moveDown,500);
}//调用moveDown函数,使body可以向下移动
else if (e.keyCode == 97) {
left = setInterval(moveLeft,500);
}//调用moveLeft函数,使body可以向左移动
else if (e.keyCode == 100) {
right = setInterval(moveRight,500);
}//调用moveRight函数,使body可以向右移动
//思路：清除运动的函数在最前面调用，每次按方向键都会清除当前运动，再进行新运动。
}
//检测键盘点击，创建运动
}
</script>
</body>
</html>
预览时，通过键盘的W S A D判断head的移动上下左右，我想要的是我按了W后，HEAD向上移动到head.top < 0px时，执行gameOver();可是预览的时候按了W，HEAD移动到.top =90px 的时候，gameOver（）就执行了。
