数组不会在游戏中重置

I have made a quite simple hangman game but I have run into some issues.

我做了一个非常简单的刽子手游戏，但我遇到了一些问题。

If I lose a few games in a row, my array that contains wrong letters will be filled up even though I empty it when I start a new game.

如果我连续输掉几场比赛，即使我在开始新游戏的时候清空了，我的数组也会被填满。

I have been debugging for a long time now and I can not locate the root of the problem.

我已经调试很久了，找不到问题的根源。

JS:

var gameContainer = $('#game');

function newGame() {
    console.log('----- new game -----')
    gameContainer.html('');

    var rightLetters = [];
    var wrongLetters = [];
    var rightLettersContainer;
    var wrongLettersContainer;
    var imageState;
    var imageStateCount = 0;

    function wordSelector() {
        var words = [
            'havestol',
            'tastatur',
            'skærm',
            'teleskop',
            'postkasse',
            'flaske',
            'handske',
            'skoletaske',
            'diskotek',
            'skraldespand',
            'djævel',
            'sjippetov',
            'blæksprutte',
            'baghjul',
            'lommeregner',
            'isvaffel',
            'leopard',
            'underbukser',
            'tørklæde',
            'hævekort'
        ];
        return words[Math.round(Math.random() * words.length - 1)];
    }

    var word = wordSelector();

    (function () {
        rightLettersContainer = $('<div id="right-letters"></div>');
        wrongLettersContainer = $('<div id="wrong-letters"></div>');
        imageState = $('<div id="image-states" class="image-state-0"></div>');
        gameContainer.append(rightLettersContainer);
        gameContainer.append(wrongLettersContainer);
        gameContainer.append(imageState);
        for (var i = 0; i < word.length; i++) {
            rightLettersContainer.append('<span>_</span>\n')
        }
    })();

    function letterValidator(letter) {
        var exists = false;
        for (var i = 0; i < word.length; i++) {
            if (letter == word[i]) {
                exists = true;
                rightLetters[i] = letter;
                rightLettersContainer.find('span').eq(i).text(letter)
            }
        }
        if (!exists) {
            wrongLetters.push(letter);
            wrongLettersContainer.append('<span>' + letter + '</span>')
        }
    }

    function gameState() {
        if (wrongLetters.length < 8) {
            imageStateCount++;
            imageState.removeClass('image-state-' + (imageStateCount - 1));
            imageState.addClass('image-state-' + imageStateCount);
        } else {
            newGame()

        }
        if (rightLetters.join('') == word) {
            newGame()
        }
    }

    $(document).keypress(function (e) {
        var pressedKey = String.fromCharCode(e.which);
        letterValidator(pressedKey);
        gameState();

        console.log(rightLetters)
        console.log(wrongLetters)
    })
}

function loadMenu(state) {
    gameContainer.html('');

    var menu = $('<div id="menu"></div>')
    var winMessage = $('<h1>you won!</h1>');
    var loseMessage = $('<h1>you lost!</h1>');
    var button = $('<a href="#" id="new-game">New Game</a>')

    gameContainer.append(menu);
    if (state == 'won') {
        menu.append(winMessage);
    } else if (state == 'lost') {
        menu.append(loseMessage);
    }
    menu.append(button);

    button.on('click', function () {
        newGame();
        return false;
    })
}
loadMenu();

JSFiddle I have included a jsFiddle of the game, and you can see the array getting filled up in the log.

我已经包含了一个游戏的JSFiddle，你可以看到数组被填入日志中。

If you can find where the problem is it would be much appriciated, thanks in advance.

如果你能找到问题的所在，那将是非常昂贵的。

3 个解决方案

#1

I guess you're binding an event each time to the document, so it runs the function all those times!

我猜你每次都把一个事件绑定到文档上，所以它一直运行这个函数!

Line 83, Unbind the function with:

第83行，解绑定函数为:

$(document).unbind().keypress(function (e) {

$(文档).unbind()。键盘按键(函数(e){

Anyway, I'd develop the structure a little better.

不管怎样，我会把结构设计得好一点。

#2

The problem is that you are repeatedly re-attaching the event. Move your event handler creation outside of the newgame function.

问题是您正在反复地重新附加事件。将事件处理程序创建移动到newgame函数之外。

#3

What Niet said is true, but it is also a problem of scope. You define the variables inside the function (scoping them to the function).

Niet说的是真的，但这也是一个范围的问题。在函数中定义变量(将它们确定为函数的范围)。

    var rightLetters = [];
    var wrongLetters = [];
    function newGame() {
      console.log('----- new game -----')
      gameContainer.html('');
      rightLetters = [];

An adjustment like that gives you the scope you need for how you have designed things. The event handler must also be addressed.

这样的调整可以为你设计东西提供所需的范围。事件处理程序也必须得到处理。

#1