javascript - Canvas 显然运行多个线程

我有这段代码，其目的是运行经典的诺基亚蛇。代码本身按预期工作，但是我的问题是当您再次调用main函数（以重新启动游戏）时，画布将在第三个循环中产生2条蛇，在第四个循环中产生4条蛇，在第四个循环中以此类推。仅使用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时，代码的初始位置部分会运行多次，每次重新运行都会多次。那里没有任何种类的循环，不知道为什么它成指数增加了更多的循环？

感谢您的帮助，这几天来一直让我发疯。

最佳答案

每次调用snakeLoad时，都会在文档中添加一个附加的click处理程序：

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

因此，当您单击添加在#startSnake中的loadSnake按钮时，将运行多个事件处理程序，每个事件处理程序都调用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();
}