畫布顯然運行多個線程

我有這個代碼，其目的是運行經典的諾基亞蛇。代碼本身按預期工作，但我的問題是當你再次調用主函數（重新開始遊戲）時，畫布會產生2個蛇，第三個循環，第四個，第四個，第八個等等。僅使用jQuery和JS，here's a working fiddle。玩一次失敗，重新加載，看到重複。畫布顯然運行多個線程

下面是加載遊戲代碼：

function snakeLoad() { 
      loadSnake(); 
      $(document).on('click', '#startSnake', function() { 
       $(this).remove(); 
       startSnake(); 
      }); 

      function loadSnake() { 
       //start button 
       $('main').append('<div id="snake"><button id="startSnake">Click to start</button><canvas id="snakeCanvas" height="380" width="380">Get a modern browser</canvas><div>'); 
      } 
      ;

這是實際初始化的事情功能：

function startSnake() { 
       //create grid 
       var snakeCanvas = document.getElementById("snakeCanvas"); 
       var ctx = snakeCanvas.getContext("2d"); 

       //Global game vars init 
       var randomSeed = function (min, max) { 
        return Math.floor(Math.random() * (max - min + 1)) + min; 
       }; 
       var snakeLength = 1; 
       var snakePositions = [{x: randomSeed(14, 25) * 10, y: randomSeed(14, 25) * 10}]; 
       var foodPosition = {x: randomSeed(25, 35) * 10, y: randomSeed(25, 35) * 10}; 
       var snakeDirection = ['N', 'S', 'E', 'W'][randomSeed(0, 3)]; 
       var i = 0; 

       console.log(snakePositions, foodPosition, snakeDirection); 

//Draw initial position 
//Snake 
       ctx.fillStyle = "green"; 
       ctx.fillRect(snakePositions[0].x, snakePositions[0].y, 10, 10); 
//Food 
       ctx.fillStyle = "red"; 
       ctx.fillRect(foodPosition.x, foodPosition.y, 10, 10);

然後主要在遊戲中環路與輸條件：

var moveSnake = setInterval(function() { 
//... doing its thing 
//On losing: 
clearInterval(moveSnake); 
return endSnake();

這是結束遊戲腳本和重新啓動按鈕的操作：

function endSnake() { 
$('#snake').remove(); 
$('main').html('<br/><input class="endGamer" id="playSnakeAgain" type="button" value="Play&#x00A;Snake&#x00A;Again" data-app="snake">'); 
      } 
$(document).on('click', '#playSnakeAgain', function (e) { 
$('main').empty(); 
snakeLoad(); 
      });

的問題是，當snakeLoad稱爲第二時間，代碼的部分，其中所述初始位置是運行多次，更多與每一個重新運行。這裏沒有任何循環，任何想法爲什麼它是指數增加更多的循環？

感謝您的幫助，這讓我堅持了幾天。

來源

2015-08-13 Asinus Rex

你打電話snakeLoad每一次，你要添加其他click處理文檔：

$(document).on('click',....

所以，當你點擊在loadSnake添加#startSnake按鈕，有運行多個事件處理程序，每個呼叫startSnake()。取而代之的是，剛剛註冊該事件處理一次，snakeLoad外：

$(document).on('click', '#startSnake', function() { 
    $(this).remove(); 
    startSnake(); 
}); 

function loadSnake() { 
    //start button 
    $('main').append('<div id="snake"><button id="startSnake">Click to start</button><canvas id="snakeCanvas" height="380" width="380">Get a modern browser</canvas><div>'); 
} 

function snakeLoad() { 
    loadSnake(); 
}

來源

2015-08-13 14:28:35

@詹姆斯·索普 - 非常感謝我指出了正確的方向。

最後我剛加入： $（document）.off（'click'，'#startSnake'）; $（document）.off（'click'，'#playSnakeAgain'）;

每次綁定後，它現在按預期工作。希望這可以幫助有類似問題的人。

來源

2015-08-13 15:04:20

畫布顯然運行多個線程

回答

相關問題