Javascript 我想用变量替换setInterval_Javascript

Javascript 我想用变量替换setInterval

javascript

Javascript 我想用变量替换setInterval,javascript,Javascript,我正在做一个蛇形游戏，但是出现了一些问题几乎一切正常，但问题是在执行另一个时，我必须停止一个setInterval。我认为我应该使用clearInterval 我希望按下向右箭头键时红色矩形开始移动，但要将setInterval用作var，以便我可以用clearInterval替换var 我该怎么办 <html> <body> <canvas id="gamecanvas" width="1330" height="625"></canvas&

我正在做一个蛇形游戏，但是出现了一些问题

几乎一切正常，但问题是在执行另一个时，我必须停止一个

setInterval

。我认为我应该使用

clearInterval

我希望按下向右箭头键时红色矩形开始移动，但要将

setInterval

用作

var

，以便我可以用

clearInterval

替换

var

我该怎么办

<html>
<body>
    <canvas id="gamecanvas" width="1330" height="625"></canvas>
    <script>
        var canvas;
        var canvasContext;

        window.onload = function () {
            canvas = document.getElementById("gamecanvas");
            canvasContext = canvas.getContext("2d");
        }

        function both() {
            moveSnake();
            drawEvery();
        };

        function moveSnake() {
            snakeX = snakeX + snakeSpeedX;

            if (snakeX + 10 >= 500 + 400) {
                snakeX = 450;
            }
        }

        window.addEventListener('keydown', this.changedir, false);


        function changedir(event) {
            var code = event.keyCode;
            //right arrow key
            if (code == 39) {
                //this set interval needs to be replaced by a var.
                setInterval(both, 1000 / 30)
            };
        }

        function drawEvery() {
            canvasContext.fillStyle = "yellow";
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);

            canvasContext.fillStyle = "black";
            canvasContext.fillRect(canvasX, canvasY, 500, 500);

            canvasContext.fillStyle = "red";
            canvasContext.fillRect(snakeX, snakeY, 20, 20);

            canvasContext.fillStyle = "green";
            canvasContext.fillRect(500, 200, 20, 20);

        }
    </script>
</body>
</html>


var帆布；
var canvasContext；
window.onload=函数（）{
canvas=document.getElementById（“gamecanvas”）；
canvasContext=canvas.getContext（“2d”）；
}
函数二（）{
moveSnake（）；
抽屉很（）；
};
函数moveSnake（）{
蛇X=蛇X+蛇皮X；
如果（蛇+10>=500+400）{
蛇X=450；
}
}
window.addEventListener（'keydown'，this.changedir，false）；
函数changedir（事件）{
var代码=event.keyCode；
//右箭头键
如果（代码==39）{
//此设置间隔需要替换为变量。
设置间隔（两者，1000/30）
};
}
函数（）{
canvasContext.fillStyle=“黄色”；
canvasContext.fillRect（0,0，canvas.width，canvas.height）；
canvasContext.fillStyle=“黑色”；
canvasContext.fillRect（canvasX，canvasY，500500）；
canvasContext.fillStyle=“红色”；
canvasContext.fillRect（snakeX，snakeY，20,20）；
canvasContext.fillStyle=“绿色”；
canvasContext.fillRect（500,200,20,20）；
}

返回一个

有效期

，您可以使用它在以后清除间隔

    //this set interval needs to be replaced by a var.
    var interval = setInterval(both, 1000/30);

以后你可以用

clearInterval(interval)

这里需要注意的一点是，变量必须在使用clearInterval的同一范围内声明