Question

我正在JS / jQuery中创建一个Hangman游戏（有一个扭曲）。我已经弄清楚如何根据用户输入（当他们猜一个字母时）识别被猜测的单词数组的索引。但是，我无法弄清楚如何获取该索引并将空白（underscoreArray）替换为同一索引处的用户输入值。

我尝试使用条件（在JS代码的末尾）执行此操作，但我不确定如何使其工作。

在正确猜测后，此条件应该更改html（例如，如果单词是＆＃34;拖动＆＃34;并且用户猜测＆＃34; d＆＃34;）＆＃34; _ _ _ _＆＃34;到＆＃34; d _ _ _＆＃34;。

这是fiddle，这是JS：

$(document).ready(function() {
  var words = ["shade", "she mail", "queen"];
  var usedLetters = [];
  var wrongLetters = [];

  $('.play').click(function() {
    var word = words[Math.floor(Math.random() * words.length)];
    var wordLength = word.length;
    var underscores = "";
    for (i = 0; i < wordLength; i++) {
      underscores = underscores + "_ ";
    }

    $('.btn-default').on('click', function() {
      var guess = $(this).text();
      if (jQuery.inArray(guess, usedLetters) === -1) {
        usedLetters.push(guess);
        $('.used').html('<p class="used">Letters used:</p><span>' + usedLetters + '</span>');
      } else {
        alert("You already guessed \"" + guess + "\"!");
      }
      /*Find out if guess = an index of word, and if it does replce the underscore index with the guess*/
      var find = word.indexOf(guess);
      var wordArray = [word];

      //loop through wordArray and where wordArray === find replace same index of underscores with guess.
      for (i = 0; i < wordArray.length; i++) {
        var underscoresArray = [underscores];
        var index = wordArray.indexOf(guess);
        if (index !== -1) {
          underscoresArray[index] = guess;
          $('#words').after(underscoresArray).toString();
        };
      }
    });
  });
});

Answer 1

有一些问题：

作为@Glubus pointed out，[word]不会生成字符数组。使用word.split('')。
您将underscores字符串设置为包含空格，使其长度为word的两倍，因此index需要乘以2来补偿
您没有捕捉到猜测字母的每个实例，因为indexOf只返回第一个

这应该更接近：

var wordArray = word.split('');
var underscoresArray = underscores.split('');
for (var i = 0; i < wordArray.length; i++) {
  // Catch every letter, eg. the "p"s in "popcorn"
  if (wordArray[i] == guess) {
    // Underscored indices are twice the word indices
    // "popcorn" -> "p _ p _ _ _ _"
    underscoresArray[i * 2] = guess;
  };    
}
// Only need to do this once after all changes are made
underscores = underscoresArray.join(''); // Collapse back to string
$('#words').after(underscores);
console.log(underscores);

Answer 2

同意@Glubus和@Kristjan，

他的解决方案很好，除了你还应该使用join将数组添加回字符串，然后再将其添加到#words元素中。

编辑：Kristjan通过加入更新了他的解决方案。

供参考，见：

Split
Join

循环遍历数组以查找用户输入的索引，然后替换另一个数组的相同索引处的值

2 个答案: