我的代码一直很好，但无论何时单击重启按钮，主要组件的速度都会随着点击次数的增加而增加。有没有办法解决这个问题（如果你知道我的意思，那么重新加载页面时不会实际重新加载它）？感谢找到正确答案的人，我一定会接受它：）
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Allan' rel='stlesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
button.restart {
position: absolute;
left: 532px;
top: 13px;
padding: 3px 3px 0px 3px;
background-color: #ffffffff;
border-width: 1px;
opacity: 0.4;
}
img.image {
opacity: 0.4;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
var myBlockPadl;
var myBlockPadlI;
var myBlockPadlII;
var myBlockPadr;
var myBlockPadrI;
var myBlockPadu;
var myBlockPaduI;
var myBlockPaduII;
var myBlockPadb;
var myBlockPadbI;
var emptyValue;
var emptyValueI;
var emptyhr;
var emptyhrI;
var emptyhrII;
var emptyhrIII;
var colorfill;
var colorfillI;
var colorfillII;
var colorfillIII;
var colorfillIV;
var colorfillV;
var colorfillVI;
var colorfillVII;
var colorfillVIII;
var colorfillIX;
var transitionBlock;
var blockTransition;
function startGame() {
myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
myObstacle = new component(80, 37, "#cf0000ff", 240, 0);
myBlockPadl = new component(40, 80, "#7e3f00", 0, 120);
myBlockPadlI = new component(40, 120, "#000000ff", 0, 0);
myBlockPadlII = new component(40, 120, "#000000ff", 0, 200);
myBlockPadr = new component(40, 117, "#000000ff", 520, 0);
myBlockPadrI = new component(40, 117, "#000000ff", 520, 203);
myBlockPadu = new component(40, 1, "#ffffffff", 520, 119);
myBlockPaduI = new component(200, 40, "#000000ff", 40, 0);
myBlockPaduII = new component(200, 40, "#000000ff", 320, 0);
myBlockPadb = new component(40, 1, "#ffffffff", 520, 200);
myBlockPadbI = new component(480, 40, "#000000ff", 40, 280);
emptyValue = new component(40, 1, "#ffffffff", 0, 119);
emptyValueI = new component(40, 1, "#ffffffff", 0, 200);
emptyhr = new component(1, 80, "#ffffffff", 39, 40);
emptyhrI = new component(1, 80, "#ffffffff", 39, 200);
emptyhrII = new component(1, 80, "#ffffffff", 520, 200);
emptyhrIII = new component(1, 80, "#ffffffff", 520, 40);
colorfill = new component(78, 2, "#000000ff", 521, 117);
colorfillI = new component(78, 2, "#000000ff", 521, 201);
colorfillII = new component(10, 10, "#000000ff", 248, 5);
colorfillIII = new component(10, 10, "#000000ff", 266, 5);
colorfillIV = new component(10, 10, "#000000ff", 284, 5);
colorfillV = new component(10, 10, "#000000ff", 302, 5);
colorfillVI = new component(10, 10, "#000000ff", 248, 20);
colorfillVII = new component(10, 10, "#000000ff", 266, 20);
colorfillVIII = new component(10, 10, "#000000ff", 284, 20);
colorfillIX = new component(10, 10, "#000000ff", 302, 20);
transitionBlock = new component(10, 80, "#f1f1f1ff", 590, 120);
blockTransition = new component(10, 80, "#f1f1f1ff", -40, 120);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 560;
this.canvas.height = 320;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function () {
clearInterval(this.interval);
ctx.fillStyle = "red";
ctx.font = "80px Georgia";
ctx.fillText("You died", 125, 120);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function (otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
this.crashWithBlockl = function (otherbp) {
var mesleft = this.x;
var mesright = this.x + (this.width);
var mestop = this.y;
var mesbottom = this.y + (this.height);
var othersleft = otherbp.x;
var othersright = otherbp.x + (otherbp.width);
var otherstop = otherbp.y;
var othersbottom = otherbp.y + (otherbp.height);
var crashBlock = true;
if ((mesbottom < otherstop) || (mestop > othersbottom) || (mesright < othersleft) || (mesleft > othersright)) {
crashBlock = false;
}
return crashBlock;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else if (myGamePiece.crashWithBlockl(myBlockPadl) || myGamePiece.crashWithBlockl(myBlockPadlI) || myGamePiece.crashWithBlockl(myBlockPadlII)) {
myGamePiece.x = myGamePiece.x + 0.25;
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadr) || myGamePiece.crashWithBlockl(myBlockPadrI)) {
myGamePiece.x = myGamePiece.x - 0.25;
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadu) || myGamePiece.crashWithBlockl(myBlockPaduI) || myGamePiece.crashWithBlockl(myBlockPaduII)) {
myGamePiece.y = myGamePiece.y + 0.25;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadb) || myGamePiece.crashWithBlockl(myBlockPadbI)) {
myGamePiece.y = myGamePiece.y - 0.25;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(transitionBlock)) {
myGamePiece.x = myGamePiece.x - 560;
myObstacle.x = myObstacle.x - 560;
myBlockPadl.x = myBlockPadl.x - 560;
myBlockPadlI.x = myBlockPadlI.x - 560;
myBlockPadlII.x = myBlockPadlII.x - 560;
myBlockPadr.x = myBlockPadr.x - 560;
myBlockPadrI.x = myBlockPadrI.x - 560;
myBlockPadu.x = myBlockPadu.x - 560;
myBlockPaduI.x = myBlockPaduI.x - 560;
myBlockPaduII.x = myBlockPaduII.x - 560;
myBlockPadb.x = myBlockPadb.x - 560;
myBlockPadbI.x = myBlockPadbI.x - 560
emptyValue.x = emptyValue.x - 560;
emptyValueI.x = emptyValueI.x - 560;
emptyhr.x = emptyhr.x - 560;
emptyhrI.x = emptyhrI.x - 560;
emptyhrII.x = emptyhrII.x - 560;
emptyhrIII.x = emptyhrIII.x - 560;
colorfill.x = colorfill.x - 560;
colorfillI.x = colorfillI.x - 560;
colorfillII.x = colorfillII.x - 560;
colorfillIII.x = colorfillIII.x - 560;
colorfillIV.x = colorfillIV.x - 560;
colorfillV.x = colorfillV.x - 560;
colorfillVI.x = colorfillVI.x - 560;
colorfillVII.x = colorfillVII.x - 560;
colorfillVIII.x = colorfillVIII.x - 560;
colorfillIX.x = colorfillIX.x - 560;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
} else if (myGamePiece.crashWithBlockl(blockTransition)) {
myGamePiece.x = myGamePiece.x + 560;
myObstacle.x = myObstacle.x + 560;
myBlockPadl.x = myBlockPadl.x + 560;
myBlockPadlI.x = myBlockPadlI.x + 560;
myBlockPadlII.x = myBlockPadlII.x + 560;
myBlockPadr.x = myBlockPadr.x + 560;
myBlockPadrI.x = myBlockPadrI.x + 560;
myBlockPadu.x = myBlockPadu.x + 560;
myBlockPaduI.x = myBlockPaduI.x + 560;
myBlockPaduII.x = myBlockPaduII.x + 560;
myBlockPadb.x = myBlockPadb.x + 560;
myBlockPadbI.x = myBlockPadbI.x + 560;
emptyValue.x = emptyValue.x + 560;
emptyValueI.x = emptyValueI.x + 560;
emptyhr.x = emptyhr.x + 560;
emptyhrI.x = emptyhrI.x + 560;
emptyhrII.x = emptyhrII.x + 560;
emptyhrIII.x = emptyhrIII.x + 560;
colorfill.x = colorfill.x + 560;
colorfillI.x = colorfillI.x + 560;
colorfillII.x = colorfillII.x + 560;
colorfillIII.x = colorfillIII.x + 560;
colorfillIV.x = colorfillIV.x + 560;
colorfillV.x = colorfillV.x + 560;
colorfillVI.x = colorfillVI.x + 560;
colorfillVII.x = colorfillVII.x + 560;
colorfillVIII.x = colorfillVIII.x + 560;
colorfillIX.x = colorfillIX.x + 560;
myGamePiece.update();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
} else {
myGamePiece.update();
myGameArea.clear();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
transitionBlock.update();
blockTransition.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
}
//myGamePicec.update();myGamePiecemyGameArea.start();
if (myGameArea.key && myGameArea.key == 37 || myGameArea.key && myGameArea.key == 65) { myGamePiece.speedX = -3; } else if (myGameArea.key && myGameArea.key == 39 || myGameArea.key && myGameArea.key == 68) { myGamePiece.speedX = 3; } else if (myGameArea.key && myGameArea.key == 38 || myGameArea.key && myGameArea.key == 87) { myGamePiece.speedY = -3; } else if (myGameArea.key && myGameArea.key == 40 || myGameArea.key && myGameArea.key == 83) { myGamePiece.speedY = 3; } else { myGamePiece.speedX = 0; myGamePiece.speedY = 0; }
myGamePiece.update();
}
</script>
<button class="restart" onclick='startGame()'><img src="https://image.freepik.com/free-icon/rotate-arrow_318-1445.jpg" style="width: 25px; height: 25px;" class="image"></button>
</body>
</html>
答案 0 :(得分：0)
当我在JS中开始游戏开发时，我遇到了同样的问题。事实证明，setInterval是一种有缺陷的，只是这样做;即，如果在同一执行上下文中设置和清除多个间隔，它们通常最终会比需要更频繁地执行。一位同事多年前向我解释过，我认为这是因为浏览器排队了一大堆迭代，只是忘记了/当你清除间隔时没有取消它们，然后当你再次启动它们时迭代仍然存在，以及新的迭代。或者其他的东西。不要在那个部分引用我。
无论如何，解决方案是使用window.requestAnimationFrame代替。不幸的是，它会对您的代码进行一些修改，但它更可靠：
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
答案 1 :(得分：0)
问题是您要多次添加间隔，而不是清除它们。最简单的解决方案是检查this.interval是否存在，如果存在，请在创建新的之前清除它。
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Allan' rel='stlesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
button.restart {
position: absolute;
left: 532px;
top: 13px;
padding: 3px 3px 0px 3px;
background-color: #ffffffff;
border-width: 1px;
opacity: 0.4;
}
img.image {
opacity: 0.4;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
var myBlockPadl;
var myBlockPadlI;
var myBlockPadlII;
var myBlockPadr;
var myBlockPadrI;
var myBlockPadu;
var myBlockPaduI;
var myBlockPaduII;
var myBlockPadb;
var myBlockPadbI;
var emptyValue;
var emptyValueI;
var emptyhr;
var emptyhrI;
var emptyhrII;
var emptyhrIII;
var colorfill;
var colorfillI;
var colorfillII;
var colorfillIII;
var colorfillIV;
var colorfillV;
var colorfillVI;
var colorfillVII;
var colorfillVIII;
var colorfillIX;
var transitionBlock;
var blockTransition;
function startGame() {
myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
myObstacle = new component(80, 37, "#cf0000ff", 240, 0);
myBlockPadl = new component(40, 80, "#7e3f00", 0, 120);
myBlockPadlI = new component(40, 120, "#000000ff", 0, 0);
myBlockPadlII = new component(40, 120, "#000000ff", 0, 200);
myBlockPadr = new component(40, 117, "#000000ff", 520, 0);
myBlockPadrI = new component(40, 117, "#000000ff", 520, 203);
myBlockPadu = new component(40, 1, "#ffffffff", 520, 119);
myBlockPaduI = new component(200, 40, "#000000ff", 40, 0);
myBlockPaduII = new component(200, 40, "#000000ff", 320, 0);
myBlockPadb = new component(40, 1, "#ffffffff", 520, 200);
myBlockPadbI = new component(480, 40, "#000000ff", 40, 280);
emptyValue = new component(40, 1, "#ffffffff", 0, 119);
emptyValueI = new component(40, 1, "#ffffffff", 0, 200);
emptyhr = new component(1, 80, "#ffffffff", 39, 40);
emptyhrI = new component(1, 80, "#ffffffff", 39, 200);
emptyhrII = new component(1, 80, "#ffffffff", 520, 200);
emptyhrIII = new component(1, 80, "#ffffffff", 520, 40);
colorfill = new component(78, 2, "#000000ff", 521, 117);
colorfillI = new component(78, 2, "#000000ff", 521, 201);
colorfillII = new component(10, 10, "#000000ff", 248, 5);
colorfillIII = new component(10, 10, "#000000ff", 266, 5);
colorfillIV = new component(10, 10, "#000000ff", 284, 5);
colorfillV = new component(10, 10, "#000000ff", 302, 5);
colorfillVI = new component(10, 10, "#000000ff", 248, 20);
colorfillVII = new component(10, 10, "#000000ff", 266, 20);
colorfillVIII = new component(10, 10, "#000000ff", 284, 20);
colorfillIX = new component(10, 10, "#000000ff", 302, 20);
transitionBlock = new component(10, 80, "#f1f1f1ff", 590, 120);
blockTransition = new component(10, 80, "#f1f1f1ff", -40, 120);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 560;
this.canvas.height = 320;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
if (this.interval) clearInterval(this.interval);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function () {
clearInterval(this.interval);
ctx.fillStyle = "red";
ctx.font = "80px Georgia";
ctx.fillText("You died", 125, 120);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function (otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
this.crashWithBlockl = function (otherbp) {
var mesleft = this.x;
var mesright = this.x + (this.width);
var mestop = this.y;
var mesbottom = this.y + (this.height);
var othersleft = otherbp.x;
var othersright = otherbp.x + (otherbp.width);
var otherstop = otherbp.y;
var othersbottom = otherbp.y + (otherbp.height);
var crashBlock = true;
if ((mesbottom < otherstop) || (mestop > othersbottom) || (mesright < othersleft) || (mesleft > othersright)) {
crashBlock = false;
}
return crashBlock;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else if (myGamePiece.crashWithBlockl(myBlockPadl) || myGamePiece.crashWithBlockl(myBlockPadlI) || myGamePiece.crashWithBlockl(myBlockPadlII)) {
myGamePiece.x = myGamePiece.x + 0.25;
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadr) || myGamePiece.crashWithBlockl(myBlockPadrI)) {
myGamePiece.x = myGamePiece.x - 0.25;
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadu) || myGamePiece.crashWithBlockl(myBlockPaduI) || myGamePiece.crashWithBlockl(myBlockPaduII)) {
myGamePiece.y = myGamePiece.y + 0.25;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(myBlockPadb) || myGamePiece.crashWithBlockl(myBlockPadbI)) {
myGamePiece.y = myGamePiece.y - 0.25;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
} else if (myGamePiece.crashWithBlockl(transitionBlock)) {
myGamePiece.x = myGamePiece.x - 560;
myObstacle.x = myObstacle.x - 560;
myBlockPadl.x = myBlockPadl.x - 560;
myBlockPadlI.x = myBlockPadlI.x - 560;
myBlockPadlII.x = myBlockPadlII.x - 560;
myBlockPadr.x = myBlockPadr.x - 560;
myBlockPadrI.x = myBlockPadrI.x - 560;
myBlockPadu.x = myBlockPadu.x - 560;
myBlockPaduI.x = myBlockPaduI.x - 560;
myBlockPaduII.x = myBlockPaduII.x - 560;
myBlockPadb.x = myBlockPadb.x - 560;
myBlockPadbI.x = myBlockPadbI.x - 560
emptyValue.x = emptyValue.x - 560;
emptyValueI.x = emptyValueI.x - 560;
emptyhr.x = emptyhr.x - 560;
emptyhrI.x = emptyhrI.x - 560;
emptyhrII.x = emptyhrII.x - 560;
emptyhrIII.x = emptyhrIII.x - 560;
colorfill.x = colorfill.x - 560;
colorfillI.x = colorfillI.x - 560;
colorfillII.x = colorfillII.x - 560;
colorfillIII.x = colorfillIII.x - 560;
colorfillIV.x = colorfillIV.x - 560;
colorfillV.x = colorfillV.x - 560;
colorfillVI.x = colorfillVI.x - 560;
colorfillVII.x = colorfillVII.x - 560;
colorfillVIII.x = colorfillVIII.x - 560;
colorfillIX.x = colorfillIX.x - 560;
//Always remember that the Y+ and the Y- are switched!!!
myGamePiece.update();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
} else if (myGamePiece.crashWithBlockl(blockTransition)) {
myGamePiece.x = myGamePiece.x + 560;
myObstacle.x = myObstacle.x + 560;
myBlockPadl.x = myBlockPadl.x + 560;
myBlockPadlI.x = myBlockPadlI.x + 560;
myBlockPadlII.x = myBlockPadlII.x + 560;
myBlockPadr.x = myBlockPadr.x + 560;
myBlockPadrI.x = myBlockPadrI.x + 560;
myBlockPadu.x = myBlockPadu.x + 560;
myBlockPaduI.x = myBlockPaduI.x + 560;
myBlockPaduII.x = myBlockPaduII.x + 560;
myBlockPadb.x = myBlockPadb.x + 560;
myBlockPadbI.x = myBlockPadbI.x + 560;
emptyValue.x = emptyValue.x + 560;
emptyValueI.x = emptyValueI.x + 560;
emptyhr.x = emptyhr.x + 560;
emptyhrI.x = emptyhrI.x + 560;
emptyhrII.x = emptyhrII.x + 560;
emptyhrIII.x = emptyhrIII.x + 560;
colorfill.x = colorfill.x + 560;
colorfillI.x = colorfillI.x + 560;
colorfillII.x = colorfillII.x + 560;
colorfillIII.x = colorfillIII.x + 560;
colorfillIV.x = colorfillIV.x + 560;
colorfillV.x = colorfillV.x + 560;
colorfillVI.x = colorfillVI.x + 560;
colorfillVII.x = colorfillVII.x + 560;
colorfillVIII.x = colorfillVIII.x + 560;
colorfillIX.x = colorfillIX.x + 560;
myGamePiece.update();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
} else {
myGamePiece.update();
myGameArea.clear();
myObstacle.update();
myBlockPadl.update();
myBlockPadlI.update();
myBlockPadlII.update();
myBlockPadr.update();
myBlockPadrI.update();
myBlockPadu.update();
myBlockPaduI.update();
myBlockPaduII.update();
myBlockPadb.update();
myBlockPadbI.update();
emptyValue.update();
emptyValueI.update();
emptyhr.update();
emptyhrI.update();
emptyhrII.update();
emptyhrIII.update();
colorfill.update();
colorfillI.update();
colorfillII.update();
colorfillIII.update();
colorfillIV.update();
colorfillV.update();
colorfillVI.update();
colorfillVII.update();
colorfillVIII.update();
colorfillIX.update();
transitionBlock.update();
blockTransition.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
}
//myGamePicec.update();myGamePiecemyGameArea.start();
if (myGameArea.key && myGameArea.key == 37 || myGameArea.key && myGameArea.key == 65) { myGamePiece.speedX = -3; } else if (myGameArea.key && myGameArea.key == 39 || myGameArea.key && myGameArea.key == 68) { myGamePiece.speedX = 3; } else if (myGameArea.key && myGameArea.key == 38 || myGameArea.key && myGameArea.key == 87) { myGamePiece.speedY = -3; } else if (myGameArea.key && myGameArea.key == 40 || myGameArea.key && myGameArea.key == 83) { myGamePiece.speedY = 3; } else { myGamePiece.speedX = 0; myGamePiece.speedY = 0; }
myGamePiece.update();
}
</script>
<button class="restart" onclick='startGame()'><img src="https://image.freepik.com/free-icon/rotate-arrow_318-1445.jpg" style="width: 25px; height: 25px;" class="image"></button>
</body>
</html>
答案 2 :(得分：0)
执行此操作时：
this.interval = setInterval(updateGameArea, 20);
...您只是在调用stop功能时才清除间隔，而不是在重新启动游戏时。因此，对于每次重启，通过越来越多的updateGameArea调用，游戏变得更快。如果已经设置了此间隔，则只设置一次，或者确保在重新启动之前清除间隔。