你用的字符串比较：
'90px' > '570px' == true
帮你修改了一下，用 parseInt 把 [dom].style.top 转换成了数字。
只修改了一行（99行）：
原来：
if (head.style.top > 570 + "px") {
修改后：
if ( parseInt(head.style.top) > 570 || parseInt(head.style.top) < 0) {
<!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>
<div id="warp">
<div id="head"></div>
<!--<div class="body"></div>-->
<div id="food"></div>
<div id="gameOver">GameOver</div>
<div id="Replay">Replay</div>
</div>
<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 ( parseInt(head.style.top) > 570 || parseInt(head.style.top) < 0) {
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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
