javascript - 在进入输赢方法之前，如何让我的屏幕更新？

Question

我正在尝试为网络开发课程构建一个刽子手游戏。我大部分时间都在工作，但是当您输入最后一个字母时，它会显示在控制台上，但不会显示在屏幕上，并会提示您赢了。同样，如果您用完猜测，它永远不会显示剩余的 0 个猜测。它只是进入您丢失的警报，仍然显示 1 个猜测。

github：https ://github.com/PSpraggins/patricia-spraggins-prework/tree/master/Module-2_Assessment

这是我的游戏对象（这里没有显示一些全局变量和一个事件监听器）：

//game object
const hangman = {
    //artist names to be guessed
    words: [
        "BLAKE SHELTON",
        "JASON ALDEAN",
        "TIM MCGRAW",
        "MIRANDA LAMBERT",
        "CARRIE UNDERWOOD",
        "KEITH URBAN",
        "GARTH BROOKS",
        "DOLLY PARTON",
        "WILLIE NELSON",
        "GEORGE STRAIT"
    ],
    //songs to play after winning guess
    songs: [
        "GOD GAVE ME YOU BY BLAKE SHELTON",
        "DIRT ROAD ANTHEM BY JASON ALDEAN",
        "HUMBLE AND KIND BY TIM MCGRAW",
        "THE HOUSE THAT BUILT ME BY MIRANDA LAMBERT",
        "SOMETHING IN THE WATER BY CARRIE UNDERWOOD",
        "COP CAR BY KEITH URBAN",
        "FRIENDS IN LOW PLACES BY GARTH BROOKS",
        "JOLENE BY DOLLY PARTON",
        "ALWAYS ON MY MIND BY WILLIE NELSON",
        "LOVE WITHOUT END, AMEN BY GEORGE STRAIT"
    ],
    wins: 0,
    guessesRemaining: 12,
    //method to return the current word
    //checks to see if it is the last word to display it
    currentWord: function () {
        if(num > this.words.length - 1){
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
            songTitle.innerText = this.songs[this.words.length - 1];
            audio.src = `assets/songs/${songTitle.innerText}.mp3`;
            num = 0;
            this.guessesRemaining = 12;
            displayFirst = [];
            displayLast = [];
        }
        return this.words[num];
    },
    //start method to set up first word with hangman image
    start: function () {
        imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/HANGMAN.jpg" alt= "image of hangman game">`;
        guessesRemainingId.innerText = this.guessesRemaining;
        this.wordDisplay(this.currentWord());

    },
    //wordDisplay method displays the spaces for each word
    wordDisplay: function (currentWord) {
        displaySpaces = ' ';
        wordSpaces.innerText = '';
        word = currentWord.split(" ");
        firstName = word[0];
        lastName = word[1];
        for (let i = 0; i < firstName.length; i++) {
            displayFirst.push(' _ ');
        }
        for (let i = 0; i < lastName.length; i++) {
            displayLast.push(' _ ');
        }
        displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
        wordSpaces.innerText = displaySpaces;
    },
    //updateWordDisplay method puts letters where they belong after each letter guess
    updateWordDisplay: function (letter) {
        for(let i = 0; i < firstName.length; i++){
            if (firstName[i] === letter) {
                displayFirst[i] = letter;
            }
        }
        for(let i = 0; i < lastName.length; i++){
            if(lastName[i] === letter){
                displayLast[i] = letter;
            }
        }
        displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
        wordSpaces.innerText = displaySpaces;   
        console.log(wordSpaces.innerText);   
        this.winnerOrLoser(); 
    },
    //guess method makes the letter pressed uppercase and checks to see if it is in the 
    //word and then determines if you have completed the word and won
    guess: function (event) {
        let letter = event.key.toUpperCase();
        this.lettersArr(letter);
    },
    //checks to see if there is a win or loss
    //****should decide after it updates on the screen, but it still goes into win and lose
    //****before the last letter pops up or it shows 0 guesses. 
    winnerOrLoser: function(){
        if(!displaySpaces.includes('_')){
            this.win();
        } else if (this.guessesRemaining < 1) {
            this.lose();
        } 
    },
    //lettersArr method updates the letters guessed area on the screen to show
    //player which letters they have guessed
    //also prevents guessing a letter more than once
    lettersArr: function (letter) {
        // console.log("lettersArr: " + letter);
        if (! lettersGuessed.innerText.includes(letter)) {
            lettersGuessed.innerText += letter;
            this.guessesRemaining = this.guessesRemaining - 1;
            guessesRemainingId.innerText = this.guessesRemaining;
            this.updateWordDisplay(letter);
            console.log("lettersArr: " + letter);
            console.log(guessesRemainingId.innerText + " guesses left");
        }

    },
    //win method alerts player they won and resets the board with the next word
    win: function () {
        console.log("win");
        alert(`Winner! ${firstName} ${lastName} was correct!`);
        this.wins += 1;
        winsTotal.innerText = this.wins;
        num++;
        displayFirst = [];
        displayLast = [];
        this.currentWord();
        this.guessesRemaining = 12;
        guessesRemainingId.innerText = this.guessesRemaining;
        this.lettersGuessed = [];
        lettersGuessed.innerText = '';
        this.wordDisplay(this.currentWord());
        if (num === 0){
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
            songTitle.innerText = this.songs[this.words.length - 1];
        } else {
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[num - 1]
            }.jpg" alt= "image of ${
                this.words[num - 1]
            }">`;
            songTitle.innerText = this.songs[num - 1];
        } 
        audio.src = `assets/songs/${songTitle.innerText}.mp3`;

    },
    //lose method alerts player if they lose and resets the board for the current word
    lose: function(){
        alert(`Sorry, You lost that one. ${firstName} ${lastName} was the correct answer.`);
        num++;
        displayFirst = [];
        displayLast = [];
        this.currentWord();
        this.guessesRemaining = 12;
        guessesRemainingId.innerText = this.guessesRemaining;
        this.lettersGuessed = [];
        lettersGuessed.innerText = '';
        this.wordDisplay(this.currentWord());
        if(num === 0) {
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[this.words.length - 1]
            }.jpg" alt= "image of ${
                this.words[this.words.length - 1]
            }">`;
        } else {
            imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
                this.words[num - 1]
            }.jpg" alt= "image of ${
                this.words[num - 1]
            }">`;
        } 
    }

}

标签： javascriptobjectmethodscallbackconsole.log

Answer 1

将警报放入 setTimeout，即使是 1MS。这应该可以解决您的问题。