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

Question

I am creating a Canvas game of 'Snake'. Using your arrow keys, you can move the snake around.

What I'm working on is clearing an interval when a different arrow key is pressed. I am trying to make use of both setInterval and clearInterval . Here is one of the four such functions I have.

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

The objective is to avoid crashing into the walls, which will result in losing the game, and your score will be reset. I'd like to prevent players from repeatedly tapping on a key to get extra points, so I only increase their score once per direction.

As long as the direction stays the same, I want the interval to keep running. That's why I declared the goUp interval inside this conditional.

If the direction has changed, I clear that interval. However, two intervals are now going on at the same time instead of 1.

Does anyone know where I'm going wrong here?

Answer 1

This is one implementation (out of many) you might consider.

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

I managed to find a solution, but I'm not too thrilled I had to resort to using global variables.

It looks something like this

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

It works and I'm able to change directions. But I don't like using globals.

Here's the updated fiddle

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