javascript - Hangman 游戏仅匹配第一个角色，而不是全部

Question

我正在使用 jQuery 创建一个 Hangman 游戏。我在使用 indexOf 时似乎无法重复字母。当我选择正确的字母时，它只会填充第一个插槽，而不会填充第二个插槽，即使您单击同一个字母两次也是如此。

示例:

姓名:“鲍勃”
输入的字符:“b”
结果:“b__”
预期结果:“b_b”

我尝试将其转换为使用循环，但它变成了无限循环。

// Band Names array
var bandNames = ["AJJ", "Bob Dylan", "The Front Bottoms", "The Hotelier"];

var correctLetters = [];
var placeHolder = [];

// creates a random number between 1 and the length of the band array.
var randomNumber = Math.floor(Math.random() * bandNames.length);

// picks a random band based of the length of the randomband array
var selectedBand = bandNames[randomNumber];

// add place holder based on length of band name
for (i = 0; i < selectedBand.length; i++) {
    placeHolder.push("<li></li>");
}

$(document).keypress(function(e) {
  var letterClicked = String.fromCharCode(e.which);

  if (selectedBand.indexOf(letterClicked) > -1) {
    // adds correct letter to the array
    correctLetters.push(letterClicked);

    placeHolder[selectedBand.indexOf(letterClicked)] = letterClicked;
    //  combines the array
    var joinArray = placeHolder.join("");

    // appand 
    $('#current-container').html("").append(joinArray);

    if (joinArray == selectedBand) {
      alert("you win");
      location.reload();
    }
  }
});

如何找到所有字符？

Answer 1

indexOf 将仅返回找到的第一个索引。您可以做的是使用 map 将 placeHolder 值map 到 selectedBand 并替换所有值匹配按下的键。

这是一个工作示例。

var bandNames = ["AJJ", "Bob Dylan", "The Front Bottoms", "The Hotelier"];
var randomNumber = Math.floor(Math.random() * bandNames.length);
var selectedBand = bandNames[randomNumber];

var correctLetters = [];
var placeHolder = [];

for (i = 0; i < selectedBand.length; i++) {
  selectedBand[i] === " " ? placeHolder.push(" ") : placeHolder.push("_");
}

$('#current-container').html(placeHolder);

$(document).keypress(function(e) {
  var letterClicked = String.fromCharCode(e.which);

  selectedBand.split("").map((letter, index) => {
    if (letter.toLowerCase() === letterClicked) {
      placeHolder[index] = selectedBand[index];
    }
  });

  $('#current-container').html(placeHolder);

  if (placeHolder.join("") == selectedBand) {
    setTimeout(() => {
      alert("you win");
    });
    location.reload();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="current-container">
</div>

注意:我使用了setTimeout来显示警报，因为否则警报会在赢得游戏之前单击的最后一个字母显示在屏幕上之前显示。