Question

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

如果连续丢失几个游戏，即使我在开始新游戏时将其清空，我的数组也会被填满。

我已经调试了很长时间了，我无法找到问题的根源。

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 我已经包含了游戏的jsFiddle，你可以看到数组在日志中被填满了。

如果你能找到问题的所在，那么会提前感谢。

Answer 1

我猜你每次都会将一个事件绑定到文档，所以它会一直运行该函数！

第83行，将函数解除绑定：

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

无论如何，我将结构发展得更好。

Answer 2

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

Answer 3

Niet说的是真的，但这也是一个范围问题。您可以在函数内定义变量（将它们作用于函数）。

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

这样的调整为您提供了设计事物所需的范围。还必须解决事件处理程序。

数组未在我的游戏中重置

3 个答案: