Question

我正在创建一个'Snake'的Canvas游戏。使用箭头键，你可以移动蛇。

我正在处理的是在按下不同的箭头键时清除间隔。我正在尝试使用setInterval和clearInterval。这是我拥有的四个这样的功能之一。

function moveUp() {
    if (direction != "up") {
        incrementScore();
    }
    direction = "up";
    if (direction == "up") {
        var goUp = setInterval(function() {
            ctx.lineTo(headX, headY - 10);
            ctx.stroke();
            headY -= 10;
        }, 1000);
    }
    else {
        clearInterval(goUp);
    }
}

目标是避免撞到墙壁，这将导致游戏失败，你的分数将被重置。我想阻止玩家反复敲击一把钥匙以获得额外的积分，所以我只会在每个方向上增加一次得分。

只要方向保持不变，我希望间隔保持运行。这就是为什么我在这个条件内宣布goUp区间。

如果方向发生了变化，我会清除该间隔。但是，现在两个间隔同时进行而不是1。

有谁知道我在哪里出错？

Answer 1

这是您可能会考虑的一个实现（在众多中）。

var currentInput = {
    left: false,
    up: false,
    right: false,
    down: false
};

function getKey(keyCode) {
    if (keyCode === 37) {
        return 'left';
    } else if (keyCode === 38) {
        return 'up';
    } else if (keyCode === 39) {
        return 'right';
    } else if (keyCode === 40) {
        return 'down';
    }
}

function onKeyDown(event) {
    var key = getKey(event.keyCode);
    currentInput[key] = true;
}

function onKeyUp(event) {
    var key = getKey(event.keyCode);
    currentInput[key] = false;
}

document.addEventListener('keydown', onKeyDown, false)
document.addEventListener('keyup', onKeyUp, false)

function update() {
    requestAnimationFrame(update);

    if (currentInput.left) {
        // move snake left
    } else if (currentInput.right) {
        // etc.
    }
}

// Kick off the event loop
requestAnimationFrame(update);

Answer 2

我设法找到了解决方案，但我不太兴奋，我不得不求助于使用全局变量。

它看起来像这样

function moveUp() {
    if (direction != "up") {
        incrementScore();
    }
    direction = "up";
    clearInterval(goRight);
    upArrow();

}

function upArrow() {
    if (direction == "up") {
        goUp = setInterval(function() {
            ctx.lineTo(headX, headY - 10);
            ctx.stroke();
            headY -= 10;
        }, 1000);
    }
}

它有效，我可以改变方向。但我不喜欢使用全局变量。

这是更新的小提琴

https://jsfiddle.net/2q1svfod/6/

JavaScript - 在HTML5 Canvas游戏中清除多个间隔

2 个答案: