首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Hangman Game中屏幕重置后显示我的中奖图像

在Hangman Game中屏幕重置后显示我的中奖图像
EN

Stack Overflow用户
提问于 2019-03-22 03:35:59
回答 1查看 146关注 0票数 1

我有一个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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-22 04:16:45

在winCondtion中的第一个if块中,从setTimeout回调中删除winImage(randsong)和警报,并将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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55288092

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档