Question

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

因此，当您点击#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();
}

Answer 2

@James Thorpe - 非常感谢我指出了正确的方向。

最后我刚补充说： $（document）.off（＆＃39;点击＆＃39;，＆＃39; #startSnake＆＃39;）; $（document）.off（＆＃39;点击＆＃39;，＆＃39; #playSnakeAgain＆＃39;）;

每次绑定后，它现在按预期工作。希望这有助于其他类似问题。

Canvas显然运行多个线程

2 个答案: