在javascript中的蛇 - 無法訪問方法中的屬性？

Question

我試圖在js/jquery中實現一個基本的蛇遊戲。這裏是我到目前爲止有：

$('document').ready(function() { 

    Game = { 
     Snake: function(startingLength) { 
      this.snakeComponents = [], this.direction = 'right', this.length = startingLength; 

      growSnake = function() { 
       this.length += 1; 
      } 
     }, 

     gameSnake: {}, 

     gameSpeed: 0, 

     init: function(startingSnakeLength, gameSpeedParam) { 


      $.extend(this.gameSnake, new Game.Snake(startingSnakeLength)); 
      this.gameSpeed = gameSpeedParam; 

      for (var i = 0; i < startingSnakeLength; i++) { 
       this.gameSnake.snakeComponents.push({ 
        x: i, 
        y: 0 
       }); 
      } 
      setInterval(Game.update, this.gameSpeed); 
     }, 

     update: function() { 
      dx = { 
       right: 1, 
       left: -1, 
       up: 0, 
       down: 0 
      }; 
      dy = { 
       right: 0, 
       left: 0, 
       up: 1, 
       down: -1 
      }; 

      var snakeLength = this.gameSnake.snakeComponents.length; 
      var newSnakeHeadX = this.gameSnake.snakeComponents[snakeLength - 1].x + dx[this.gameSnake.direction]; 
      var newSnakeHeadY = this.gameSnake.snakeComponents[snakeLength - 1].y + dy[this.gameSnake.direction]; 

      //update snake components 
      this.gameSnake.snakeComponents[snakeLength - 1].x = newSnakeHeadX; 
      this.gameSnake.snakeComponents[snakeLength - 1].y = newSnakeHeadY; 

      for (var i = 0; i < snakeLength - 1; i++) { 
       this.gameSnake.snakeComponents[i].x = this.gameSnake.snakeComponents[i + 1].x; 
       this.gameSnake.snakeComponents[i].y = this.gameSnake.snakeComponents[i + 1].y; 
      } 

      Game.render(); 
     }, 

     render: function() { 
      for (var i = 0; i < this.gameSnake.length; i++) { 
       console.log('Snake position: (' + this.gameSnake.snakeComponents[0].x + ',' + this.gameSnake.snakeComponents[0].y + '), ' + '(' + gameSnake.snakeComponents[1].x + ',' + gameSnake.snakeComponents[1].y + '), (' + gameSnake.snakeComponents[1].x + ',' + gameSnake.snakeComponents[1].y + ')') 
      }; 
     } 

    }; 


    Game.init(3, 1000); 


}); 

現在，我可以在init方法訪問蛇實例（this.gameSnake），但是當代碼是關於更新方法就變得不確定。我錯過了什麼/做錯了什麼？

Answer 1

使用setInterval時，您正面臨着不正確的執行上下文的陳舊問題。更改代碼在render到：

render: function() { 
     for (var i = 0; i < Game.gameSnake.length; i++) { 
      console.log('Snake position: (' + Game.gameSnake.snakeComponents[0].x + ',' + Game.gameSnake.snakeComponents[0].y + '), ' + '(' + Game.gameSnake.snakeComponents[1].x + ',' + Game.gameSnake.snakeComponents[1].y + '), (' + Game.gameSnake.snakeComponents[1].x + ',' + Game.gameSnake.snakeComponents[1].y + ')') 
     }; 
    } 

原因this不起作用的是，你不叫這樣的功能：Game.update();。

你所代替做的是傳遞函數作爲參數傳遞給setInterval，其執行它在全球範圍內（指當update運行，this是window對象）。由於this不再涉及Game，我們決定明確引用Game。

有很多很好的JS範圍教程，你可能想看看他們。祝你好運！