Question

我有一个switch语句，它将根据歌曲显示获奖图像。该功能可以正常工作，仅在重置下一个单词的屏幕后才显示图像。当您输入正确的单词时以及在屏幕重置之前，我希望它显示出来。

我尝试将其以不同的顺序放在代码中，与警报放在相同的setTimeout（）函数中，也将其放入自己的setTimeout（）中。对于研究这个问题，我无能为力了。

//Global Variables===========================================================
// Used to check if the letters were already used
let lettersAlpha;
let songArr = ["caliente"];
// let songArr = ["caliente", "imposible", "bloqueo", "amanece", "desconocidos"];
let wins = 0;
let losses = 0;
let blanksAndSuccesses = [];
let userGuess;
let guessesLeft = 12;
let lettersUsed = [];
let randSong;

//Reset========================================================================
const reset = () => {
  lettersAlpha = ['a', 'b', 'c',
    'd', 'e', 'f',
    'g', 'h', 'i',
    'j', 'k', 'l',
    'm', 'n', 'o',
    'p', 'q', 'r',
    's', 't', 'u',
    'v', 'w', 'x',
    'y', 'z'
  ];

  //Erase word from last game
  blanksAndSuccesses.splice(0);
  //Clear the letters used last game
  lettersUsed.splice(0);
  //Get random song
  randSong = songArr[Math.floor(Math.random() * songArr.length)];
  console.log(randSong);

  //Create underscores based on number of letters
  for (let i = 0; i < randSong.length; i++) {
    blanksAndSuccesses.push("_");
  }
  //Reset Game Area
  $("#wordToGuess").html(blanksAndSuccesses.join(" "));
  //Reset Letters Guessed
  guessesLeft = 12;
  $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
  $("#lettersGuessed").html("Letters Guessed: ");
};

//Check guess right/wrong
let guessChecker = userGuess => {
  //True means letter is NOT used
  if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) != -1
  ) {
    //Check against word
    for (let i = 0; i < randSong.length; i++) {
      if (userGuess === randSong[i]) {
        blanksAndSuccesses[i] = userGuess;
      }
    }
    //Remove the letter from the unused letters array
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update board
    $("#wordToGuess").html(blanksAndSuccesses.join(" ").toUpperCase());
    //Update guesses left (numGuesses)
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  } else if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) == -1
  ) {
    //Remove from usable letters
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update numGuesses
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  }
};

//Display Album Art
let winImage = function(song) {
  switch (song) {
    case "caliente":
      console.log("Here");
      $("#albumIMG").html('<img src="assets/images/caliente_album_art.jpg" />');
      break;

    case "imposible":
      $("#albumIMG").prepend(
        '<img src="assets/images/imposible_album_art.png" />'
      );
      break;

    case "bloqueo":
      $("#albumIMG").prepend(
        '<img src="assets/images/bloqueo_album_art.jpg" />'
      );
      break;

    case "desconocido":
      $("#albumIMG").prepend(
        '<img src="assets/images/desconocidos_album_art.jpg" />'
      );
      break;

    case "#amanence":
      $("albumIMG").prepend(
        '<img src="assets/images/amenece_album_art.jpg" />'
      );
  }
};

//Check win condition
let winCondtion = function() {
  if (blanksAndSuccesses.join("") === randSong) {
    //Update wins
    wins++;
    $("#numWins").html(`Wins: ${wins}`);
    setTimeout(function() {
      winImage(randSong)
    }, 1);
    setTimeout(function() {
      alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
      reset();
    }, 0);
    // alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`)
  } else if (guessesLeft == 0) {
    //Update losses
    losses++;
    $("#numLosses").html(`Losses: ${losses}`);
    setTimeout(function() {
      alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
      reset();
    }, 0);
    // alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`)
    //Reset game board
  }
};

//Keypress function/Play Game
$(document).keyup(e => {
  userGuess = e.key;
  guessChecker(userGuess);
  winCondtion();
});

reset();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordToGuess"></div>
<div id="numGuesses"></div>
<div id="lettersGuessed"></div>
<div id="albumIMG"></div>

Answer 1

在winCondtion内的第一个if块内，从setTimeout回调中删除winImage(randsong) amd警报，并将reset()函数放在setTimeout回调中。这将允许您的图片显示-重置将在延迟后运行，在此示例中为1000ms。

let winCondtion = function() {
if (blanksAndSuccesses.join("") === randSong) {
    //Update wins
    wins++;
    $("#numWins").html(`Wins: ${wins}`);
    alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
    winImage(randSong)
    setTimeout(() => {
        reset();
    }, 1000);
} else if (guessesLeft == 0) {
    //Update losses
    losses++;
    $("#numLosses").html(`Losses: ${losses}`);
    alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
  }
};

有关setTimeout的更多信息：https://javascript.info/settimeout-setinterval

在《 Hangman Game》中重置屏幕后，显示我的获奖图像

1 个答案: