画布显然运行多个线程

我有这个代码，其目的是运行经典的诺基亚蛇。代码本身按预期工作，但我的问题是当你再次调用主函数（重新开始游戏）时，画布会产生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

画布显然运行多个线程

回答

相关问题