刚学JS没多久，大概看了一遍书，想写一个贪吃蛇练练手，写了一个判断，当head.top < 0px 时，显示游戏结束，但是预览的时候.top到了90px就显示游戏结束了。查了代码不知道为什么，请大神解答一下。 {代码...} ...

你知道用console.log输出信息，你就应该在gameOver的函数写一个输出信息试试。 if (head.style.top > 570 + "px") { 你用字符串比较大小明显有问题

javascript - js设置了根据当css的.top小于0px时执行一个函数，但是当top小于90px的时候就执行了，为什么？-Fragen und Antworten zum chinesischen PHP-Netzwerk

刚学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（）就执行了。

<!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 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 ( 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>