问题描述
我正在用JavaScript创建一个小型游戏,我有一个障碍,该障碍应该每3100毫秒不断产生,并且当“玩家”碰到该障碍时,该障碍应该停止移动或重新产生。但是我编写的代码是这样的:在障碍物的第一次生成期间,该代码运行良好,并且障碍物停止移动或重新生成,但是从第二次生成以来,该代码无法正常工作。
这是我的代码:
//Spawning Obstacle
counter = 0;
function createObstacle() {
counter++;
ctx.clearRect(0,520,320);
ctx.drawImage(background,320);
ctx.drawImage(bomb,obX,obY,20,20);
ctx.fillStyle = "black";
ctx.fillRect(x,y,20);
obY += 10;
if (counter == 31) {
clearInterval(moveObstacle);
console.log(counter);
counter = 0;
console.log(counter);
obX = Math.floor(Math.random() * 10) * 50;
obY = 0;
score++;
ctx.clearRect(0,320);
ctx.drawImage(background,320);
ctx.drawImage(bomb,20);
ctx.fillStyle = "black";
ctx.fillRect(x,20);
}
}
function obstacle() { moveObstacle = setInterval(createObstacle,100); }
obstacle();
var recreateObs = setInterval(obstacle,3100);
//Game Over
function gameOver() {
if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
ctx.clearRect(x,width,height);
drawRect = nope;
lose.play();
clearInterval(moveObstacle);
clearInterval(recreateObs);
clearInterval(runGameOver);
clearInterval(writescore);
return "Game Over";
}
}
var runGameOver = setInterval(gameOver,100);
我尝试使用setTimeOut()和clearTimeOut()来调用和停止调用barrier(),但是似乎没有什么改变。同样,只需两次调用barrier()就足以使障碍由于某种原因而不断产生。
感谢您的回复。修复它。
解决方法
通过更改以下内容解决了此问题:
function obstacle() { moveObstacle = setInterval(createObstacle,100); }
obstacle();
var recreateObs = setInterval(obstacle,3100);
//Game Over
function gameOver() {
if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
ctx.clearRect(x,y,20,20);
ctx.fillStyle = "black";
ctx.fillRect(x,width,height);
drawRect = nope;
lose.play();
clearInterval(moveObstacle);
clearInterval(recreateObs);
clearInterval(runGameOver);
clearInterval(writeScore);
return "Game Over";
}
}
对此:
recreateObs = setInterval(function(){spawnObstacle= createObstacle,100)},3100);
//Game Over
function gameOver() {
if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
ctx.clearRect(x,20);
ctx.fillStyle = "black";
ctx.fillRect(x,height);
drawRect = nope;
lose.play();
clearInterval(recreateObs);
clearInterval(spawnObstacle);
clearInterval(runGameOver);
clearInterval(writeScore);
return "Game Over";
}
}
,
您必须在函数外部并为它分配setInterval ID之前声明moveObstacle变量。
var moveObstacleId;
function obstacle() {
moveObstacleId = setInterval(createObstacle,100);
}
obstacle();
clearInterval(moveObstacleId)
并对其他setInterval函数也执行相同的操作。