javascript - js设置了根据当css的.top小于0px时执行一个函数，但是当top小于90px的时候就执行了，为什么？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

黄舟 2017-04-11 12:47:34

[JavaScript讨论组]

480

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

预览时，通过键盘的W S A D判断head的移动上下左右，我想要的是我按了W后，HEAD向上移动到head.top < 0px时，执行gameOver();可是预览的时候按了W，HEAD移动到.top =90px 的时候，gameOver（）就执行了。

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(2)

大家讲道理2017-04-11 12:49:34 2楼

你用的字符串比较：

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