在進入輸贏方法之前，如何讓我的屏幕更新？

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]
            }">`;
        } 
    }

}

Answer 1

將警報放入 setTimeout，即使是 1MS。 這應該可以解決您的問題。