javascript - 如果在使用js的hang man游戏中索引> 1，则不显示隐藏字母

问题描述

我正在制作一个刽子手游戏。我使用数组和censoredWord创建了一个randomWord，它是randomWord但它的所有字母都使用“_”隐藏，除了第一个和最后一个。我还有一个lettersToGuess变量，用于知道所有要猜测的字母，（我通过简单地切掉 randomWord的第一个和最后一个字母来创建它），并且每次我猜一个字母时，该特定字母都会被替换为" " 在lettersToGuess变量中。

现在一切正常，但问题是当我猜测一个字母时，它只会显示第一个被审查的字母。例如，如果 randomWord 是“fish”，则 censoredWord 将是“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>

标签： javascripthtmlcss

javascript - 如果在使用js的hang man游戏中索引> 1，则不显示隐藏字母

问题描述

解决方案

推荐阅读