Question

我有一个变量++;在if / else语句中（它在else部分中）。它应该在一个有多少错误猜测的分数中加1。出于某种原因，它永远不会只添加一个，每当我提交'猜测'时，它也会添加3到7之间的数字。你能告诉我，如果我循环错误或其他什么？请尝试详细解释。

编辑：我意识到部分问题。尝试++;实际上是为每个字母[var]选择不匹配或相等而循环一次。例如，如果我输入“a”代表“apple”尝试++;由于其他四个字符，它将循环四次。那么如何让它只循环一次而不是为每个错过的角色添加一个呢？

这是我的代码。

// JavaScript Document
var words = new Array("apple","orange","banana","lime","mango","lemon","avacado","pineapple","kiwi","plum","watermelon","peach");
var randomNum;
var word;
var tries = 0;

$('#guess').prop('disabled', true);

$(function(){
$('#start').click(function(){
    $('#guess').prop('disabled', false);
    word = "";
    randomNum = Math.floor(Math.random() * words.length)
    for (var i =0; i < words[randomNum].length; i++) {
        word += "*";
    }
    console.log(words[randomNum]);
    $('#word').html(word);
});

$('#guess').click(function guess(){
    var choice = $('#letter').val().toLowerCase();
    for (var i =0; i < word.length; i++) {
        if (words[randomNum].charAt(i) == choice) {
            word = word.substr(0, i) + choice + word.substr(i + 1);
        } 
        if (words[randomNum].charAt(i) !== choice) {
            tries++;
        }
    }

    if (tries < 7) {
        $('#tries').html(tries)
    } else if (tries >= 7)
        $('#tries').html("YOU LOSE");

    $('#word').html(word);

    $('#' + choice).css("background-color", "red");
});

});

Answer 1

搞定了！

此问题与tries循环（每个字母）内的for变量有关。为了查看奇怪的行为，在代码中添加console.log(tries);，在循环内部，您将看到。第一次它会在1增加然后值会完全改变（我会在这里建议一些调试，以便更准确地理解发生了什么，因为我真的很快这样做了）。解决方案是将变量从for循环上下文中增加以使其工作（我在底部提供的示例中这样做了）。

顺便说一句，您似乎正在尝试实施“Hangman”游戏，说实话，在实施这些事情时，您需要真正有条理。

我修复了你的问题，改进了很多代码并考虑了其他可能的游戏场景：

再次播放
游戏结束
运
返回

请看一下。要知道，HTML和CSS只是本例的即兴创作，需要进行一些改进，所以只需将它们作为参考。

更新： 您在帖子中添加 EDIT 部分的内容是正确的。

您可以在底部运行此脚本。

// Game variables
var GAME_WORDS = [ // List of words available when playing
        'apple', 
        'orange', 
        'banana', 
        'lime', 
        'mango', 
        'lemon', 
        'avacado', 
        'pineapple', 
        'kiwi', 
        'plum', 
        'watermelon', 
        'peach'
    ], 
    GAME_MASKED_WORD = '', // Stores the masked word to be discovered
    GAME_SELECTED_WORD = '', // Stores the readable word
    GAME_PLAYER_ATTEMPTS = 0, // Stores player attempts when failing
    GAME_RANDOM_NUMBER = 0, // Random number to pick a word
    GAME_MAX_ATTEMPTS = 7, // Max. player attempts before a game over
    GAME_UI_COMPONENTS = { // UI components declaration
        start: $('#start'), 
        reset: $('#reset'), 
        back: $('#back'), 
        guess: $('#guess'), 
        msg: $('#msg'), 
        word: $('#word'), 
        letter: $('#letter')
    }, 
    GAME_UI_SECTIONS = { // UI sections declaration
        menu: $('#menu'), 
        game: $('#game')
    };

$(function() {;
    var ui = GAME_UI_COMPONENTS;
    
    // Initialize game
    init();
    
    // Start button handler
    ui.start.on('click', function(e) {
        start();
    });

    // Guess button handler
    ui.guess.on('click', function(e) {
        guess();
    });
    
    // Play Again button handler
    ui.reset.on('click', function(e) {
        reset();
        start();
    });
    
    // Go Back button handler
    ui.back.on('click', function(e) {
        init();
    });
});

/**
 * Used to initialize the game for first time
 */
function init() {
    var sections = GAME_UI_SECTIONS;
    sections.menu.show();
    sections.game.hide();
    reset();
};

/**
 * Used to start the game
 */
function start() {
    var ui = GAME_UI_COMPONENTS, 
        sections = GAME_UI_SECTIONS, 
        words = GAME_WORDS;
    
    sections.menu.hide();
    sections.game.show();
    
    GAME_RANDOM_NUMBER = Math.floor(Math.random() * words.length);
    
    for (var i = 0; i < words[GAME_RANDOM_NUMBER].length; ++i) {
        GAME_MASKED_WORD += '*';
    }
    
    GAME_SELECTED_WORD = words[GAME_RANDOM_NUMBER];

    ui.word.html(GAME_MASKED_WORD);
    ui.letter.focus();
};

/**
 * Guess button handler
 */
function guess() {
    var ui = GAME_UI_COMPONENTS, 
        words = GAME_WORDS, 
        matches = false, 
        choice;

    // Clean messages each time player do a guess
    showMsg('');
    
    if (ui.letter && ui.letter.val()) {
        choice = $.trim(ui.letter.val().toLowerCase());
    }
    
    if (choice) {
        for (var i = 0; i < GAME_MASKED_WORD.length; ++i) {
            if (words[GAME_RANDOM_NUMBER].charAt(i) === choice) {
                GAME_MASKED_WORD = GAME_MASKED_WORD.substr(0, i) + choice + 
                    GAME_MASKED_WORD.substr(i + 1);
                matches = true;
            }
        }
        
        if (!matches) {
            ++GAME_PLAYER_ATTEMPTS;
        }
    } else {
        showMsg('Please type a letter.');
    }
    
    // Show attempts left if more than zero
    if (GAME_PLAYER_ATTEMPTS > 0) {
        showMsg('You have ' + 
                (GAME_MAX_ATTEMPTS - GAME_PLAYER_ATTEMPTS) + 
                ' attempt(s) left.');
    }
    
    // Check game status each time doing a guess
    if (isGameOver()) {
        lose();
    } else if (isGameWin()) {
        win();
    } else {
        ui.word.html(GAME_MASKED_WORD);
    }
    
    ui.letter.focus();
};

/**
 * Used to set all game variables from the scratch
 */
function reset() {
    var ui = GAME_UI_COMPONENTS;
    GAME_MASKED_WORD = '';
    GAME_PLAYER_ATTEMPTS = 0; 
    GAME_RANDOM_NUMBER = 0;
    showMsg('');
    ui.guess.show();
    ui.letter.val('');
    ui.word.html('');
};

/**
 * Handler when player lose the game
 */
function lose() {
    var ui = GAME_UI_COMPONENTS;
    showMsg('You Lose!');
    ui.word.html(GAME_SELECTED_WORD);
    ui.guess.hide();
};

/**
 * Handler when player win the game
 */
function win() {
    var ui = GAME_UI_COMPONENTS;
    showMsg('You Win!');
    ui.word.html(GAME_SELECTED_WORD);
    ui.guess.hide();
};

/**
 * Use to print UI messages for the player
 */
function showMsg(msg) {
    var ui = GAME_UI_COMPONENTS;
    ui.msg.html(msg);
};

/**
 * Check game status, if player is going to lose the game
 * @returns Boolean
 */
function isGameOver() {
    return (GAME_PLAYER_ATTEMPTS >= GAME_MAX_ATTEMPTS);
};

/**
 * Check game status, if player is going to win the game
 * @returns Boolean
 */
function isGameWin() {
    return (GAME_MASKED_WORD === GAME_SELECTED_WORD);
};

.btn {
    cursor: pointer;
}

span#msg {
    color: red;
    font-weight: bold;
}

.text {
    font-size: 3em;
}

input#letter {
    width: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
    <div id="menu">
        <span class="text">Hangman!</span>
        <br><br>
        <img src="http://img3.wikia.nocookie.net/__cb20130207191137/scribblenauts/images/0/01/Hangman.png" height="200" width="120"/>
        <br><br>
        <input type="button" class="btn" id="start" value="Start Game"/>
    </div>
    <div id="game">
        <span id="msg"></span>
        <br><br>
        Letter: <input type="text" id="letter" value="" maxlength="1"/>
        <br><br>
        <input type="button" class="btn" id="guess" value="Guess"/>
        <input type="button" class="btn" id="reset" value="Play Again"/>
        <input type="button" class="btn" id="back" value="Go Back"/>
        <br><br>
        Word: <div id="word" class="text"></div>
    </div>
</div>

希望这会有所帮助。

Answer 2

试试这个：

修改guess点击处理程序，如下所示：

$('#guess').click(function guess(){
    var choice = $('#letter').val().toLowerCase(),
     found = false;
    for (var i =0; i < word.length; i++) {
        if (words[randomNum].charAt(i) == choice) {
            word = word.substr(0, i) + choice + word.substr(i + 1);
            found = true
        }           
    }
    if(!found){
        tries++;
    }

    if (tries < 7) {
        $('#tries').html(tries)
    } else if (tries >= 7){
        $('#tries').html("YOU LOSE");
    }

    $('#word').html(word);

    $('#' + choice).css("background-color", "red");
});

同时在start重置tries：

$('#start').click(function(){
    $('#guess').prop('disabled', false);
    word = ""; tries = 0;

无法正确添加变量

2 个答案:

搞定了！