JavaScript/jQuery 刽子手问题

标签 javascript jquery html loops

我正在制作刽子手游戏，但我似乎无法正确设置游戏循环。我试图让它贯穿整个单词，如果它是正确答案，则替换字母。相反，它是:

  • 遍历单词
  • 如果猜到的字母位于单词中的任意位置
  • 它返回 index[0]

我尝试拆分单词，并使用单独的索引，但如果我可以这样做，我宁愿学习如何做。此外，我仍在尝试弄清楚如何循环提示!感谢您的宝贵时间!

$(document).ready(function() {

  var words = ["RUGRATS", "DOUG", "DARIA", "POKEMON", "RECESS", "ANAMANIACS", "CARMEN/SAN/DIEGO", "REN AND STIMPY", "THE SIMPSONS", "POWER RANGERS", "BEAVIS AND BUTTHEAD", "ROCKOS MODERN LIFE", "NINJA TURTLES", "MATILDA"]
  var chosenWord = words[Math.floor(Math.random() * words.length)]
  // var space = ''
  var underScores = [] //underscores
  var wrongGuesses = [] //store wrong guesses
  var guesses = 10 //guess max
  //replace 
  var wins = 0;
  $(".wins").html("WINS : " + wins)
  var hints = ["Gang of Babies", "Quail man's identity", "90's femenist", "Gotta Catch 'em all!", "playtime during school, not lunch", "They live in the WB tower", "Where in the world is...", "'It's log, log...", "Longest running cartoon.", "Morphin' time!", "'I need teepee for my bunghole'", "Friendly walabe", "Pizza lovin' turtles", "Girl Genius"]
  var hintLength = hints.length
  var getHint = $("#hintBtn")
  $(".hintBtn").on("click", function() {
    if (words[0] === chosenWord) {
      $("#hint").text(hints[0])
    } else if (words[1] === chosenWord) {
      $("#hint").text(hints[1])
    } else if (words[2] === chosenWord) {
      $("#hint").text(hints[2])
    } else if (words[3] === chosenWord) {
      $("#hint").text(hints[3])
    } else if (words[4] === chosenWord) {
      $("#hint").text(hints[4])
    } else if (words[5] === chosenWord) {
      $("#hint").text(hints[5])
    } else if (words[6] === chosenWord) {
      $("#hint").text(hints[6])
    } else if (words[7] === chosenWord) {
      $("#hint").text(hints[7])
    } else if (words[8] === chosenWord) {
      $("#hint").text(hints[8])
    } else if (words[9] === chosenWord) {
      $("#hint").text(hints[9])
    } else if (words[10] === chosenWord) {
      $("#hint").text(hints[10])
    } else if (words[11] === chosenWord) {
      $("#hint").text(hints[11])
    } else if (words[12] === chosenWord) {
      $("#hint").text(hints[12])
    } else if (words[13] === chosenWord) {
      $("#hint").text(hints[12])
    }
  })

  $("#newGame").on("click", function() {
    chosenWord = words[Math.floor(Math.random() * words.length)]
    underScores = []
    for (var i = 0; i < chosenWord.length; i++) {
      underScores.push("_ ")
    }
    guesses = 10
    $(".guessesLeft").html("You have " + guesses + " guesses left!")
    $(".display").html(underScores)
    $("#hint").html("Press the button to get a hint!")
    console.log("your random word is " + chosenWord)
  })

  if (guesses > 0) {
    $(document).on("keyup", function(event) {
      guess = String.fromCharCode(event.keyCode).toUpperCase()
      // console.log(guess)
      if (chosenWord.indexOf(guess) > -1) {
        for (i = 0; i < chosenWord.length; i++) {
          if (chosenWord[i] = guess) {
            underScores[i] = chosenWord[i]
            console.log(underScores)
            underScores.join(" ")
            return
          }
        }
      } else {
        for (i = 0; i < chosenWord.length; i++) {
          if (chosenWord[i] != guess) {
            guesses--
            var wrongGuesses = guess
            $(".wrongGuesses").append(wrongGuesses)
            console.log(wrongGuesses)
            return
          }

        }
      }
    })
  }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet'>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <!-- main content -->
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
        <div class="jumbotron">
          <h1>Hangman : 90's Cartoons & Movies!</h1>
          <h2>Press any key to get started!</h2>
          <!-- button for new word -->
          <button id="newGame">NEW GAME</button>
          <div class="wins"></div>
          <div class="losses"></div>

          <div class="display"></div>
          <div class="wrongGuesses"></div>
          <div class="guessesLeft"></div>
          <div id="buttons"></div>
          <button class="hintBtn">HINT!</button>
          <p id="hint"></p>
        </div>
      </div>
      <div class="col-sm-2"></div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

    <script src="assets/javascript/game2.js"></script>
</body>

</html>

最佳答案

您非常接近 - 只有两件事需要更改。

您的 if 语句是赋值而不是比较。改变这个:

if (chosenWord[i] = guess) {

为此:

if (chosenWord[i] == guess) {

此外，您需要刷新 HTML 以在猜出正确字母时显示它们。在正确猜测后返回之前添加此行:

$(".display").html(underScores)

需要注意一件事:您的函数在第一次出现正确字母后返回。我删除了 return 语句，这样它就可以完成对单词的循环，因此它将填充正确字母的任何实例的下划线。

这是一个工作示例:

$(document).ready(function() {

  var words = ["RUGRATS", "DOUG", "DARIA", "POKEMON", "RECESS", "ANAMANIACS", "CARMEN/SAN/DIEGO", "REN AND STIMPY", "THE SIMPSONS", "POWER RANGERS", "BEAVIS AND BUTTHEAD", "ROCKOS MODERN LIFE", "NINJA TURTLES", "MATILDA"]
  var chosenWord = words[Math.floor(Math.random() * words.length)]
  // var space = ''
  var underScores = [] //underscores
  var wrongGuesses = [] //store wrong guesses
  var guesses = 10 //guess max
  //replace 
  var wins = 0;
  $(".wins").html("WINS : " + wins)
  var hints = ["Gang of Babies", "Quail man's identity", "90's femenist", "Gotta Catch 'em all!", "playtime during school, not lunch", "They live in the WB tower", "Where in the world is...", "'It's log, log...", "Longest running cartoon.", "Morphin' time!", "'I need teepee for my bunghole'", "Friendly walabe", "Pizza lovin' turtles", "Girl Genius"]
  var hintLength = hints.length
  var getHint = $("#hintBtn")
  $(".hintBtn").on("click", function() {
    if (words[0] === chosenWord) {
      $("#hint").text(hints[0])
    } else if (words[1] === chosenWord) {
      $("#hint").text(hints[1])
    } else if (words[2] === chosenWord) {
      $("#hint").text(hints[2])
    } else if (words[3] === chosenWord) {
      $("#hint").text(hints[3])
    } else if (words[4] === chosenWord) {
      $("#hint").text(hints[4])
    } else if (words[5] === chosenWord) {
      $("#hint").text(hints[5])
    } else if (words[6] === chosenWord) {
      $("#hint").text(hints[6])
    } else if (words[7] === chosenWord) {
      $("#hint").text(hints[7])
    } else if (words[8] === chosenWord) {
      $("#hint").text(hints[8])
    } else if (words[9] === chosenWord) {
      $("#hint").text(hints[9])
    } else if (words[10] === chosenWord) {
      $("#hint").text(hints[10])
    } else if (words[11] === chosenWord) {
      $("#hint").text(hints[11])
    } else if (words[12] === chosenWord) {
      $("#hint").text(hints[12])
    } else if (words[13] === chosenWord) {
      $("#hint").text(hints[12])
    }
  })

  $("#newGame").on("click", function() {
    chosenWord = words[Math.floor(Math.random() * words.length)]
    underScores = []
    for (var i = 0; i < chosenWord.length; i++) {
      underScores.push("_ ")
    }
    guesses = 10
    $(".guessesLeft").html("You have " + guesses + " guesses left!")
    $(".display").html(underScores)
    $("#hint").html("Press the button to get a hint!")
    console.log("your random word is " + chosenWord)
  })

  if (guesses > 0) {
    $(document).on("keyup", function(event) {
      guess = String.fromCharCode(event.keyCode).toUpperCase()
      // console.log(guess)
      if (chosenWord.indexOf(guess) > -1) {
        for (i = 0; i < chosenWord.length; i++) {
          if (chosenWord[i] == guess) {
            underScores[i] = chosenWord[i]
            console.log(underScores)
            underScores.join(" ")
            $(".display").html(underScores)
          }
        }
      } else {
        for (i = 0; i < chosenWord.length; i++) {
          if (chosenWord[i] != guess) {
            guesses--
            var wrongGuesses = guess
            $(".wrongGuesses").append(wrongGuesses)
            console.log(wrongGuesses)
            return
          }

        }
      }
    })
  }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet'>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <!-- main content -->
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
        <div class="jumbotron">
          <h1>Hangman : 90's Cartoons & Movies!</h1>
          <h2>Press any key to get started!</h2>
          <!-- button for new word -->
          <button id="newGame">NEW GAME</button>
          <div class="wins"></div>
          <div class="losses"></div>

          <div class="display"></div>
          <div class="wrongGuesses"></div>
          <div class="guessesLeft"></div>
          <div id="buttons"></div>
          <button class="hintBtn">HINT!</button>
          <p id="hint"></p>
        </div>
      </div>
      <div class="col-sm-2"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

    <script src="assets/javascript/game2.js"></script>
</body>

</html>

关于JavaScript/jQuery 刽子手问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48672630/

上一篇：javascript - 运行 js discord bot 时出错

下一篇：javascript - Screeps autospawner 不工作 'totally'

相关文章：

html - 为什么跨度会影响兄弟跨度的垂直定位

javascript - 单击一次目标复选框后检查 ="Checked"不工作

javascript - Recaptcha V3 不适用于具有多种表单的页面

javascript - 随机图像函数(javaScript)在提示时不显示本地镜像

javascript - 如何将 div 附加到用户在 jQuery 中单击页面的位置

html - 溢出导致整个页面滚动

javascript - 如何检索用户浏览器中当前网页的高度和宽度？

php - 如何将sql查询结果传递给javascript函数？

jQuery 更改输入文本值

javascript - 多次打开弹出窗口无法关闭

©2024 IT工具网  联系我们