如何在使用setInterval循环的同时使用HTML画布和javascript来定义局部变量？

Question

我正在使用HTML画布编程一个简单的游戏，并使用JavaScript对其进行编辑。 我有几个在画布上绘制内容的函数，所有这些函数都使用单个setInterval循环。 但是，其中一些功能需要具有包含有关该功能的特定属性的局部变量（准确地说，是一个切换，无论一个功能是否为“ xx”），并且由于会有很多这些功能存储在此变量中全局窗口中的变量非常不切实际。

有没有一种方法可以在此函数中定义变量（或属性），而不必在每次循环时都重置该变量？

所以在代码中我有：

var DoSomething = function(){
var xx = new Boolean
[...]
if (condition) { xx = false}
if (condition) { xx = true}
}

所有操作都在主循环中执行：

var gameLoop = function(){
DoSomething()
OtherFunctions()
}

var startGame = function(){
setInterval(gameLoop,10)
}

startGame()

就像我说的那样，在全局窗口中定义xx是非常不切实际的，因为此xx属性/变量有很多功能。 但是现在，循环会在循环开始时继续重置xx 。 有没有一种在这里定义局部变量的方法，而不必在setInterval的每个循环中都将其重置？

Answer 1

通过将代码包装在一个函数中，该函数中的所有内容都对世界其他地方隐藏了。 因此，现在您可以在函数外部声明变量，它们将保持私有状态，并且只能由程序访问。

(function() {
    var xx = new Boolean,
        loop;

    var DoSomething = function() {
      // xx will now keep it's state
        if (condition) { xx = false; }
    }

    var gameLoop = function() {
        DoSomething();
        OtherFunctions();
    }

    var startGame = function() {
        loop = setInterval(gameLoop, 10);
    }
}());

最后的括号使函数立即调用自身，因此，一旦脚本被加载，函数将运行

e.g function() {<code>}()

我建议阅读有关原型继承的知识，并使用它来创建代表游戏中对象的类。 这是开始使用JavaScript进行OOP的好方法。

https://developer.mozilla.org/zh-CN/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

还请阅读闭包以更好地理解上述示例的工作原理。 JavaScript闭包如何工作？