极客观点
项目管理
HarmonyOS
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!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行才可以避免报错，望指点其中原因。
html5
问题在于下面代码的这一段：
clearInterval(this.timer);this在这里指向的是window，所以这个clearInterval在这里并没有起作用，所以你把它挪到kill中就没有问题。虽然改为clearInterval(This.timer)也行，但是建议挪到kill里面。