如果使用 js 的刽子手游戏中索引 > 1，则不显示隐藏字母

Question

我正在制作一款单人游戏。我使用一个数组创建了一个randomWord和一个审查的Word，这是randomWord但它的所有字母都用"隐藏_"除了第一个和最后一个
我还有一个lettersToGuess变量，用于知道所有要猜测的字母(我通过简单地剪切randomWord的第一个和最后一个字母来创建它(，每次我猜测一个字母时，特定的字母都会被一个"quot；在lettersToGuess变量中。

现在一切都奏效了，但问题是，当我猜一封信时，它只会给我看第一封被审查的信。例如，如果randomWord是"；鱼"；，被审查的单词将是"；f_ h"；，如果我点击"；i〃；在键盘上，单词将变为"；fi_h"；，但是如果我点击"；s"；而不是"；i〃；，它不会变为"；f_sh"；。

这是我的代码：

// Generating a random word
var wordsArray = ["cat", "rock", "sheep", "fish", "house"];
var randomWord = wordsArray[Math.floor(Math.random() * wordsArray.length)]; // Random word from wordsArray
var censoredWord = randomWord[0] + "_".repeat(randomWord.length - 2) + randomWord[randomWord.length - 1]; // Censored word created by using "_"
var lettersToGuess = randomWord.slice(1).slice(0, -1); // removing first and last letter
// Writing the word to web page
var randomWordOutput = document.getElementById("randomWord");
randomWordOutput.innerHTML = censoredWord;

// Function used to replace a letter of a string in a specific position
String.prototype.replaceAt = function (index, replacement) {
return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}
// Function used to set the guessed letter to visible
function setCharVisible(censored, notCensored, index) {
for (i=1; i<censored.length-1; i++) {
if (index == i) {
console.log("guessed: " + notCensored[i]);
censored = censored.replaceAt(i, notCensored[i]);
}
}
return censored;
}
// Function used to know if the clicked letter is right
function checkForLetter(clickedId) {
var clickedLetter = document.getElementById(clickedId).textContent;
var clickedLetterButton = document.getElementById(clickedId);
console.log(lettersToGuess);
for (i in lettersToGuess) {
if (lettersToGuess[i] == clickedLetter) {
// Updating letters to guess variable
lettersToGuess = lettersToGuess.replace(clickedLetter, " ");
// Updating censored word removing "_" at the guessed letter position
censoredWord = setCharVisible(censoredWord, randomWord, i+1);
console.log(censoredWord);
// Set the clicked letter button to disabled
clickedLetterButton.classList.remove("keyboard-button");
clickedLetterButton.classList.add("guessed-disabled-button");

// Updating displayed censored word
randomWordOutput.innerHTML = censoredWord;
checkForWin(lettersToGuess);
}
}
}
// Checking for win function
function checkForWin(letters) {
guessedLettersSpaces = " ".repeat(lettersToGuess.length);
if (letters === guessedLettersSpaces) {
randomWordOutput.style.color = "#0cc206";
setTimeout(() => {
if (confirm("WIN")) {
window.location.reload();
}
}, 500);
}
}

* {
box-sizing: border-box;
font-family: Rubik, sans-serif;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
background-color: #131313;
color: white;
}
.game-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0c0c0c;
padding: 50px;
border-radius: 40px;
}
#randomWord {
text-align: center;
padding: 20px;
}
.keyboard-container {
width: 900px;
display: block;
margin: auto auto;
}
.keyboard-button {
box-sizing: border-box;
line-height: 80px;
font-size: 22px;
text-align: center;
width: 80px;
color: #ffffff;
cursor: pointer;
margin: 10px 8px;
height: 80px;
border-style: solid #0c0c0c;
box-shadow: 0 0.5px 1px #0c0c0c, 0 2px 6px #0c0c0c;
border-width: 1px;
border-radius: 10px;
background: -webkit-linear-gradient(top, #141414 0%, #0f0f0f 80%, #0e0e0e 100%);
font-family: sans-serif;
display: inline-block;
transition: box-shadow 0.3s ease, transform 0.15s ease;
}
.keyboard-button:hover,
:focus {
box-shadow: 0 0 1px #888, 0 1px 0 #fff, 0 4px 0 #C0C0C0, 0 2px 35px rgba(#444, 0.3), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 7px 4px rgba(#444, 0.1);
transform: translateY(2px);
}
.keyboard-button:active {
box-shadow: 0 0 1px #888, 0 1px 0 #fff, 0 0 0 #C0C0C0, 0 0px 30px rgba(#444, 0.15), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 0px 4px rgba(#444, 0.25);
transform: translateY(4px);
}
.guessed-disabled-button {
box-sizing: border-box;
line-height: 80px;
font-size: 22px;
text-align: center;
width: 80px;
color: #0cc206;
margin: 10px 8px;
height: 80px;
border-style: solid #0c0c0c;
box-shadow: 0 0.5px 1px #0c0c0c, 0 2px 6px #0c0c0c;
border-width: 1px;
border-radius: 10px;
background: #222222;
font-family: sans-serif;
display: inline-block;
transition: box-shadow 0.3s ease, transform 0.15s ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/main.css">
<title>Hangman Game</title>
</head>
<body>
<div class="game-container">
<p id="randomWord"></p>
<div class="keyboard-container">
<div class="keyboard-button" id="key-a" onClick="checkForLetter(this.id)">a</div>
<div class="keyboard-button" id="key-b" onClick="checkForLetter(this.id)">b</div>
<div class="keyboard-button" id="key-c" onClick="checkForLetter(this.id)">c</div>
<div class="keyboard-button" id="key-d" onClick="checkForLetter(this.id)">d</div>
<div class="keyboard-button" id="key-e" onClick="checkForLetter(this.id)">e</div>
<div class="keyboard-button" id="key-f" onClick="checkForLetter(this.id)">f</div>
<div class="keyboard-button" id="key-g" onClick="checkForLetter(this.id)">g</div>
<div class="keyboard-button" id="key-h" onClick="checkForLetter(this.id)">h</div>
<div class="keyboard-button" id="key-i" onClick="checkForLetter(this.id)">i</div>
<div class="keyboard-button" id="key-j" onClick="checkForLetter(this.id)">j</div>
<div class="keyboard-button" id="key-k" onClick="checkForLetter(this.id)">k</div>
<div class="keyboard-button" id="key-l" onClick="checkForLetter(this.id)">l</div>
<div class="keyboard-button" id="key-m" onClick="checkForLetter(this.id)">m</div>
<div class="keyboard-button" id="key-n" onClick="checkForLetter(this.id)">n</div>
<div class="keyboard-button" id="key-o" onClick="checkForLetter(this.id)">o</div>
<div class="keyboard-button" id="key-p" onClick="checkForLetter(this.id)">p</div>
<div class="keyboard-button" id="key-q" onClick="checkForLetter(this.id)">q</div>
<div class="keyboard-button" id="key-r" onClick="checkForLetter(this.id)">r</div>
<div class="keyboard-button" id="key-s" onClick="checkForLetter(this.id)">s</div>
<div class="keyboard-button" id="key-t" onClick="checkForLetter(this.id)">t</div>
<div class="keyboard-button" id="key-u" onClick="checkForLetter(this.id)">u</div>
<div class="keyboard-button" id="key-v" onClick="checkForLetter(this.id)">v</div>
<div class="keyboard-button" id="key-x" onClick="checkForLetter(this.id)">x</div>
<div class="keyboard-button" id="key-y" onClick="checkForLetter(this.id)">y</div>
<div class="keyboard-button" id="key-z" onClick="checkForLetter(this.id)">z</div>
</div>
</div>
<script src="./js/WordGenerator.js"></script>
<script src="./js/LivesCounter.js"></script>
</body>
</html>

Answer 1

更改此行：

censoredWord = setCharVisible(censoredWord, randomWord, i+1);

到以下行：

censoredWord = setCharVisible(censoredWord, randomWord, parseInt(i)+1);

原来i+1是连接1而不是相加。例如：当i=1时，i+1给出11。