javascript - Canvas 显然运行多个线程

Question

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

感谢您的帮助，这几天来我都快疯了。

Answer 1

每次调用 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();
}