Question

我正在尝试用JS制作一个刽子手游戏。我有以下功能。计算机显示我的阵列中的随机单词。我打印按下屏幕的按键，并在用户松开之前给用户10次按键。我遇到的问题是让数组显示在var possibleWord部分中，因此它显示为空格或短划线。感谢您的帮助。

//Computer picks random word to guess
function getItem() {
  //Possible words to guess
  var words = ['jason', 'kaitlyn', 'lora', 'matthew'];
  document.getElementById("wordGuess").innerHTML = words[Math.floor(Math.random() * words.length)];

  //Displays possible words blank spaces
  var possibleWord = "J A S O N";
  var blankSpaces = "";
  var wordLength = possibleWord.length;

  for (i = 0; i < wordLength; i++) {
    var x = possibleWord.charAt(i);

    if (x === " " || x === "/'") {
      blankSpaces += x;
    } else {
      blankSpaces += "_";
    }
  }
  document.getElementById("blankSpaces").innerHTML = blankSpaces;
}

//This code captures the keypress and prints it out on the screen
var guessesLeft = 9;

document.onkeypress = function(keyPressed) {
  var keyPressed = keyPressed || window.event,
    charCode = keyPressed.keyCode || keyPressed.which,
    lettersGuessed = String.fromCharCode(charCode);

  // var userGuess = prompt("What word do you guess?");
  // var userGuess = words.split('');
  // var userGuess
  // if (words.indexOf(userGuess) > -1) {
  // 	alert("Your guess is correct.")
  // }else {
  // 	alert("Your guess is wrong.")
  // }

  document.getElementById("lettersGuessed").innerHTML += lettersGuessed;
  document.getElementById("guessesLeft").innerHTML = guessesLeft;

  guessesLeft--;

  if (guessesLeft === -1) {
    alert("You Loose!");
  }
}

<body onload="getItem()">
  <div class="wrapper">
    <div class="container">
      Press any key to get started!
      <br>
      <br>Wins: # of times user guessed the word correctly
      <br>
      <br>Display random word from Array: <strong><u><span id="wordGuess"></span></u></strong>
      <br>
      <br>as the user guesses the correct letter, make the word display like this: <span id="blankSpaces"></span>
      <br>
      <br>Number of Guesses Remaining: <span id="guessesLeft">10</span>
      <br>
      <br>Letters Already Guessed: <span id="lettersGuessed"></span>
      <br>
      <br>
    </div>
  </div>
</body>

Answer 1

这是实现这一目标的众多方法之一。

- 首先，您衡量随机字的length。

- 然后创建显示玩家进度的数组，包含length个破折号或空格，如下所示：

var progressWord = []
for (var i = 0; i < wordLength; i ++)
  progressWord.push('-');

- 输入，检查是否可以使用chosenWord在indexOf()内找到密钥字符串（从密钥代码转换后）。如果存在，请替换出现次数：

if (chosenWord.indexOf(keyString) != -1){ // if the character is found
  for (var i = 0; i < wordLength; i ++){ // loop on all characters
     if (chosenWord[i] == keyString) // if this is an occurance
       progressWord[i] = chosenWord[i];
  }
}else{
  // wrong choice
}

- 检查玩家是赢还是输。

if (progressWord.indexOf('-') == -1 ){ // if there are no dashes left
  //win!
}else if (guessesLeft <= 0){
  //player has lost
}

-Join progressArray使用'join（）`方法并将其显示在屏幕上。

progressWord.join(" "); // will form a string from the array, with a space as as delimeter

您可以随时在浏览器的控制台上进行测试。祝你好运！

Answer 2

如果没有进入良好的JavaScript（特别是污染全局名称空间）并回答您的直接问题，请查看此JS fiddle以显示基于数组中单词的下划线。

var possibleWord = words[Math.floor(Math.random() * words.length)];
document.getElementById("wordGuess").innerHTML = possibleWord;
//Space out possibleWord
var originalLength = possibleWord.length;
for (i = 0; i < originalLength; i++) {
    possibleWord = [possibleWord.slice(0, i*2+1), ' ', possibleWord.slice(i*2+1)].join('');
}

至少我已将其包裹在IIFE

中

如何在JS中制作一个Hangman游戏

2 个答案: