如何在JS中制作刽子手游戏

How to make a Hangman game in JS

本文关键字：刽子手 游戏 JS      更新时间：2023-09-26

我正在尝试用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>

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

-首先，测量随机单词的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并将其显示在屏幕上。

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

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

在不进入良好的 JavaScript（特别是污染全局名称空间）的情况下，只需回答您的直接问题，请查看此 JS 小提琴，以根据数组中的单词显示下划线。

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 中

相关文章：