Question

我目前正在构建基于this code的Tron画布游戏。它的效果还不错，但是如果我重新启动游戏，则会通过e.which传递两个值。

尝试显示主要代码：

function loadGame() {
    var e;
    document.onkeydown=function(event){e=event};

    function intervall() {
        function check() { 
           //Function for drawing Tron
        }
        var key = e.which;
        if(key == 87) { //W and so one
            check();
        }
    }
    var timer = setInterval(intervall,900)
}

如果我输了，再次调用loadGame（），效果很好。如果我在游戏仍在运行时调用loadGame（），则不会。

我在这里上传了一个现场演示： http://wernersbacher.de/tron.html

感谢您的帮助！

Answer 1

您获得两个值，因为当您重新启动游戏时，旧的间隔循环在您开始新游戏时仍在运行。

我看到你试图在这里停止旧循环：

if(hard) {
    clearInterval(timer);
}

然而，因为变量＆＃39;计时器＆＃39;在loadGame函数的另一个调用中声明，这个新调用的loadGame函数无法访问它。

您可以通过从新的loadGame调用将变量记录到控制台来查看此操作：

function loadGame(hard) {
    if(hard) {
        console.log(timer);
    }

您会看到它返回undefined。

如果这些内容让您感到困惑，可能需要了解有关Function scope的更多信息。

解决方案是宣布＆＃39;时间＆＃39; loadGame函数之外的变量，在全局范围内：

var time;
function loadGame(hard) {
    /* the rest of your code */
    timer = setInterval(intervall,9)
}

这样，当你按下“加载游戏”时，会调用loadGame函数的新实例。按钮可以访问旧计时器，并可以在开始新计时之前将其停止。

顺便说一句，完全重新加载所有内容，包括创建一个新的canvas元素并销毁旧的canvas元素，似乎有点不必要。为什么不简单地清除（）画布并将玩家位置重置到起始位置？您甚至不需要使用该方法重启计时器。

Javascript e事件重置为Canvas游戏

1 个答案: