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

Question

我正在创建一个“贪吃蛇”的 Canvas 游戏。使用箭头键，您可以移动蛇。

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

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

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);