简体   繁体   English

制作一个javascript hangman游戏,我无法将我的函数应用于重复的字母

[英]Making a javascript hangman game and I can't get my function to apply to repeated letters

Everything about the script works great right now unless there's a repeated letter in the word. 除非单词中没有重复的字母,否则有关脚本的所有内容现在都可以正常运行。 If so, then it will only display the first of the letters. 如果是这样,那么它将仅显示第一个字母。 For example, if the random word is "look" it would display like this "lo k". 例如,如果随机词是“ look”,它将显示为“ lo k”。

Unfortunately the only other related javascript hangman question here was for a script that didn't actually have issues on repeated letters. 不幸的是,这里唯一其他相关的javascript hangman问题是脚本实际上在重复的字母上没有问题。 For reference: how to deal with repeated letters in a javascript hangman game . 供参考: 在javascript hangman游戏中如何处理重复的字母 Can anyone help me get through the repeated letter issue? 谁能帮助我解决重复的信件问题? Thanks! 谢谢!

My HTML: 我的HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery-1.11.2.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <title>Hang a Blue Devil</title>
  </head>
  <body>
    <div class="wrapper">

        <h1 class="title">Hangman</h1>
        <h2 class="attempt-title">You have this many attempts left: </h2>

      <ul class="hangman-word">
        <li class="tester"></li>
        <li class="tester"></li>
        <li class="tester"></li>
        <li class="tester"></li>
        <li class="tester"></li>
        <li class="tester"></li>
      </ul>

        <h3 class="hangman-letters"></h3>

      <input class="text-value" type="text" maxlength="1" onchange="setGuess(this.value)">
      <button class="text-button" onclick="checkGuess()"></button>

        <p class="letters-guessed"></p>

    </div>
  </body>
  <script src="js/hangman.js"></script>
</html>

My JS: 我的JS:

var hangmanWords = [
  "the","of","and","a","to","in","is","you","that","it","he",
  "was","for","on","are","as","with","his","they","I","at","be",
  "this","have","from","or","one","had","by","word","but","not",
  "what","all","were","we","when","your","can","said","there",
  "use","an","each","which","she","do","how","their","if","will",
  "up","other","about","out","many","then","them","these","so",
  "some","her","would","make","like","him","into","time","has",
  "look","two","more","write","go","see","number","no","way",
  "could","people","my","than","first","water","been","call",
  "who","oil","its","now","find","long","down","day","did","get",
  "come","made","may","part"
];

// declared variables

var randomNumber = Math.floor(Math.random() * 100);
var randomWord = hangmanWords[randomNumber];
var underscoreCount = randomWord.length;
var underscoreArr = [];
var counter = randomWord.length +3;
var numberTest = 0;
var lettersGuessedArr = [];


var lettersGuessedClass = document.querySelector('.letters-guessed');
var li = document.getElementsByClassName('tester');
var textValue = document.querySelector('.text-value');
var attemptTitle = document.querySelector('.attempt-title');
var hangmanWordClass = document.querySelector('.hangman-word');
var hangmanLettersClass = document.querySelector('.hangman-letters');

// actions

attemptTitle.innerHTML = "You have this many attempts left: " + counter;
console.log(randomWord);

function setGuess(guess) {
  personGuess = guess;
}

for (i=0;i<underscoreCount;i+=1) {
  underscoreArr.push("_ ");
  underscoreArr.join(" ");
  var underscoreArrString = underscoreArr.toString();
  var underscoreArrEdited = underscoreArrString.replace(/,/g," ");
  hangmanLettersClass.innerHTML = underscoreArrEdited;
}

function pushGuess () {
      lettersGuessedArr.push(personGuess);
      var lettersGuessedArrString = lettersGuessedArr.toString();
      var lettersGuessedArrEdited = lettersGuessedArrString.replace(/,/g," ");
      lettersGuessedClass.innerHTML = lettersGuessedArrEdited;
}

function checkGuess() {
  for (var i=0;i<randomWord.length;i+=1) {
    if (personGuess === randomWord[i]) {
        console.log(personGuess);
        numberTest = i;
        li[i].textContent = randomWord[i];
        i += 20;
        textValue.value= "";
    } else if ((randomWord.length - 1) > i ) {
        console.log("works");
    } else {
        pushGuess();
        counter -= 1;
        attemptTitle.innerHTML = "You have made this many attempts: " + counter;
        textValue.value= "";
    }
  }
};

My bin: http://jsbin.com/dawewiyipe/4/edit 我的垃圾桶: http : //jsbin.com/dawewiyipe/4/edit

You had a stray bit of code that didn't belong: 您有一些不属于您的代码:

i += 20;

I took it out, and the problem went away (the loop was intended to check each character, the +=20 broke the process of checking each character) 我将其取出,问题就消失了(循环旨在检查每个字符, +=20中断了检查每个字符的过程)

 function checkGuess() { for (var i=0;i<randomWord.length;i+=1) { if (personGuess === randomWord[i]) { console.log(personGuess); numberTest = i; li[i].textContent = randomWord[i]; textValue.value= ""; } else if ((randomWord.length - 1) > i ) { console.log("works"); } else { pushGuess(); counter -= 1; attemptTitle.innerHTML = "You have made this many attempts: " + counter; textValue.value= ""; } } } 

http://jsbin.com/noxiqefaji/1/edit http://jsbin.com/noxiqefaji/1/edit

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM