请大家帮我看看这段JS代码为什么会报错?

叶钦
  • 21

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打气球2</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            position: relative;
            background: url(images/bg.jpg);
            background-size: cover;
        }

        div {
            position: absolute;

        }

        #scores,
        #time {
            color: white;
            font-size: 20px;
            line-height: 150%;
            font-style: normal;
        }
    </style>
</head>

<body>

    <h1 id="scores">您的得分:0</h1>
    <p id="time">剩余时间:</p>


    <script type="text/javascript">
        //获得分数元素
        var scores = document.getElementById("scores");
        //获得时间元素
        var time = document.getElementById("time");
        //有效性
        var useful = true;
        //分数
        var scoress = 0;
        //计时时间
        var times = 30000;




        //构造函数 ballon
        function Ballon(score, color) {

            this.score = score + 1;

            //元素的初始样式
            this.left = parseInt(Math.random() * 1900);
            this.top = 700;
            this.width = 100;
            this.height = 100;
            this.color = color;



            //创建元素
            this.dom = document.createElement("div");
            document.body.appendChild(this.dom);

            //渲染元素
            // this.render(color);
            //气球飞行
            this.fly();

            //绑定气球点击
            var This = this;
            this.dom.onmousedown = function () {
                This.kill();
                // console.log(This.score,scoress);
                scoress += This.score;
                scores.innerHTML = "您的得分:" + scoress;
            };


        }

        Ballon.prototype.render = function () {
            this.dom.style.left = this.left + "px";
            this.dom.style.top = this.top + "px";
            this.dom.style.width = this.width + "px";
            this.dom.style.height = this.height + "px";
            this.dom.style.backgroundColor = this.color;
        }

        Ballon.prototype.fly = function () {
            var s = this.score * 1;
            var This = this;
            nn = 0;
            this.timer = setInterval(function () {
                This.top -= s;
                if (This.top < -500 || useful == false) {
                    clearInterval(This.timer);
                    This.kill();
                }
                This.render();
                
            }, 10);
            
            
        }
        Ballon.prototype.kill = function () {
            document.body.removeChild(this.dom);
        }

        //游戏自动开始
        var game = setInterval(function () {
            //随机数
            var rd = parseInt(Math.random() * 10);
            //颜色
            var clArr = ["red", "black", "green", "blue", "skyblue", "pink", "grennyellow", "orange", "gray",
                "fuchsia"
            ];
            var cl = clArr[rd];

            new Ballon(rd, cl);

        }, 500);

        //游戏计时

        var count = setInterval(function () {
            time.innerHTML = "剩余时间:" + times / 1000;

            if (times / 1000 <= 0) {
                clearInterval(game);
                clearInterval(count);
                useful = false;
                alert('您的得分为' + scoress + "!");
            }
            times -= 1000;
        }, 1000)
    </script>
</body>

</html>

实际看到的错误信息又是什么?

循环累积出现
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

问题描述

这是一个鼠标点移动方块的小游戏,程序随机生成不同速度的方块向上移动,点击击破方块得分。功能实现没问题,但现在资源损耗厉害,而且还报错,找了很久找不出原因,希望哪位高手指点迷津 万分感谢。

问题出现的环境背景及自己尝试过哪些方法

我把第108行的clearInterval(This.timer);移动到118行 ,貌似可以不报错,但我找不到合理的解释,为什么clearInterval会失效呢,望高手指点迷津,万分感谢!

感谢
Xeira和realwugang指出错误,不过改正后试玩游戏仍然会报错,目前看起来只有把clearInterval(This.timer) 移动到118行才可以避免报错,望指点其中原因。

回复
阅读 656
2 个回答
✓ 已被采纳

问题在于下面代码的这一段:clearInterval(this.timer);

        Ballon.prototype.fly = function () {
            var s = this.score * 1;
            var This = this;
            nn = 0;
            this.timer = setInterval(function () {
                This.top -= s;
                if (This.top < -500 || useful == false) {
                    clearInterval(this.timer);
                    This.kill();
                }else{
                This.render();
                }
                
            }, 100);
        }

this在这里指向的是window,所以这个clearInterval在这里并没有起作用,所以你把它挪到kill中就没有问题。虽然改为clearInterval(This.timer)也行,但是建议挪到kill里面。

Ballon.prototype.fly = function () {
    var s = this.score * 1;
    var This = this;
    nn = 0;
    this.timer = setInterval(function () {
        This.top -= s;
        if (This.top < -500 || useful == false) {
            clearInterval(This.timer);
            this.dom && This.kill();
        } else {
            This.render();
        }
    }, 10);
}
你知道吗?

宣传栏