samedi 9 septembre 2017

Score Counters and Reset Functions in Vanilla JavaScript Hangman

I've already had one questions regarding this game answered, but I keep getting stuck up on keeping track of my "wins" and "losses" and then reseting my random word after a win or a loss. Here is what I have so far:

<!DOCTYPE html>
<html>
<head>
    <title>Hangman</title>
</head>
<body>
    <h1>Hangman!</h1>

    <p>
        <font size="+3"><span id="answer"></span></font>
    </p>
    <p id="counter"></p>
    <p id="wrongGuesses"></p>
    <p>Wins: <span id="wins"></span></p>
    <p>Losses: <span id="losses"></span></p>


    <script type="text/javascript">


var guess;      //user guess
var letters = [];       //correctly guessed letters
var wrongLetters = [];      //incorrectly guessed letters
var counter = 7;        //counts correct letters
var losses = 0;
var wins = 0;

document.getElementById("counter").innerHTML = counter;
document.getElementById("losses").innerHTML = losses;
document.getElementById("wins").innerHTML = wins;

var wordList = ["cat", "dog", "wolf", "laser", "apple"];        //FILL LIST LATER!!

//randomly chooses a word from wordList
var word = wordList[Math.floor(Math.random() * wordList.length)];

//choosen word is replaced with
function start() {
    for (i = 0; i < word.length; i++) {
        letters[i] = "__";
    }

    document.getElementById("answer").innerHTML = letters.join(" ");
    console.log(word);
}


//checks if letter is in the word or not
function checkLetter() {
    document.onkeyup = function(event) {
        guess = event.key.toLowerCase();
        var found = false;
        for (i = 0; i < word.length; i++) {
            if (guess === word[i]) {
                letters[i] = guess;
                document.getElementById("answer").innerHTML = letters.join(" ");
                found = true;
            } 
        }
        //wrong letters go into the wrongLetters array and are displayed
        if (found) return;
        if (wrongLetters.indexOf(guess) < 0) {
            wrongLetters.push(guess);
            document.getElementById("wrongGuesses").innerHTML = wrongLetters.join(" ");
            counter--;
            console.log(counter);
            //+1 to the losses if 7 words are missed
            if (counter === 0) {
                document.getElementById("losses").innerHTML = losses + 1;
                console.log(losses);
                confirm("play again?"); {
                    counter = 7;
                    letters = [];
                    wrongLetters = [];
                    start();
                }
            }
        }
    }
}

//need the counter to subtract 1 with every wrong guess
//when counter hits zero losses = losses + 1
//make a wins var that adds 1 when word is guessed
//reset if either are 


start();
checkLetter();

</script>
</body>
</html>

The counter is ALMOST working! It seems to be counting down from 7 and adding 1 to the losses when it reaches zero as it should; however, the count displayed is off (even though the count logged to the console seems right).

Another issue is that this "losses" count won't continue to add past 1 even if the counter resets and hits 0 again.

Also, when I try to grab a new random word after the player fails to answer the first, the game chooses the same word as it did before.

I feel like most of these issues have to deal with the scope of my variables, but none of the reworking I try seems to have any affect (if it doesn't make things worse). I know I'm asking a lot here, but if anyone could even point me in the right direction it would be greatly appreciated!




Aucun commentaire:

Enregistrer un commentaire