如何在使用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閉包如何工作？