為什么我的劊子手JavaScript游戲中沒有顯示我的所有信件？

這是我在這里的第一篇文章，如果格式不正確，請原諒我的格式。我正在構建一個劊子手游戲，我正在用字母替換我的下劃線，除非它是一個雙字母。

示例：奶酪僅回傳 che _ s _

我在下面附上了我的代碼：

const inputButton = document.querySelector("#wordInput")
const startButton = document.querySelector(".startButton")
const guessHere = document.querySelector(".guess")
const letters = document.querySelector(".letters")
let empty = ""
const letterA = document.querySelector("#A")
const alphabet = document.querySelectorAll(".letter")
let inputVal = ''
console.log(inputVal)
const wrongLetters = document.querySelector(".wrongLetters")
let wrongCounter = [];
let winCount = 0;
console.log(`win count is ${winCount}` )
let loseCount = 0;
console.log(`lose count is ${loseCount}`)


//-------------START BUTTON----------------------------------------------//

startButton.addEventListener("click", ()=>{
    inputVal = inputButton.value
    let chars = inputVal.split("")
    for(let i=0; i<chars.length;i  ){
        const hiddenLetter = document.createElement("span")
        hiddenLetter.classList.add("input-letters")
        hiddenLetter.id = i
        hiddenLetter.innerText = "_"
        hiddenLetter.style.marginRight = "15px"
        // const hiddenChar = document.createElement("p")
        // hiddenLetter.appendChild(hiddenChar)
        // console.log(hiddenLetter)
        // hiddenLetter.innerText = "_ "
        letters.appendChild(hiddenLetter)
        // hiddenLetter.style.height = "5px";

        hiddenLetter.style.fontSize = "50px";
       
    }
    const startingMinutes = 2;
let time = startingMinutes * 60;
const countdownEl = document.querySelector("#countdown")
let refreshIntervalid=setInterval(updateCountdown, 1000);
let once = false;
 function updateCountdown() {
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
    seconds = seconds < 10? "0"   seconds : seconds;
    countdownEl.innerHTML = `${minutes}: ${seconds}`;
    time--;
    if (time < 0) { //stop the setInterval whe time = 0 for avoid negative time
        alert("Game Over")
        clearInterval(refreshIntervalid);
    }
    once = true;


}
})
const hiddenChar = document.createElement("span")
const revealLetter = (e) =>{
    // inputVal = inputButton.value
    // console.log(inputVal);
    let chars = inputVal.split("")
    // console.log(chars)
    let guessedLetter = e.target.id.toLowerCase()
    console.log(guessedLetter);
    let index = chars.indexOf(guessedLetter)
    if (chars.includes(guessedLetter)){
        // console.log("Letter exists", guessedLetter);
        // console.log(chars.indexOf(guessedLetter));
        let underlines = document.querySelectorAll(".input-letters")
        underlines.forEach(span =>{
            // console.log("span id: ", typeof span.id);
            // console.log("index: ", typeof index);
            if(parseInt(span.id) === index){
                console.log("Match!");
                span.innerText = guessedLetter
                winCount  
                console.log(winCount)
                e.target.remove()
                if(winCount===chars.length){
                    alert("You won the Game!")

                }
                

            }
            
        })
    }else{
        wrongCounter.push(guessedLetter)
        wrongLetters.innerText = wrongCounter
        loseCount =1
        console.log(loseCount)
        e.target.remove()
        if(loseCount>=5){
            alert("Game Over!")
        }
        

    }
    // for(let i = 0; i < chars.length; i  ){
    //         const hiddenChar = document.createElement("span")
    //         console.log(hiddenChar)
    //         hiddenChar.innerText = chars[i]   " "
    //         letters.appendChild(hiddenChar)
    //         hiddenChar.style.fontSize = "50px"
    //         hiddenChar.style.visibility = "hidden"
    //         // "visible"
    //         // "hidden"
    //         if (chars[i]==("")){
    //             hiddenChar.style.visibility = "visible"
    //         }
    // }
}

alphabet.forEach(letter=>{
    letter.addEventListener("click", revealLetter)
})

body{
    background-color: #ffe4c4;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.playerOne{
    border-style: double;
    border-width: 1em;
    text-align: center;
     height: 200px;
}
.wrongLettersBox{
    border-style: double;
    border-width: 1em;
    width: 200px;
    height: 300px;
   
    text-align: center;
    
    
}
.container{
    display: flex;
}
#wordInput{
    /* transform: translate(574px, 43px); */
    color: black;
    text-transform: uppercase
}


.startButton{
    /* transform: translate(572px, 43px); */
}
.enterWordHere{
    /* transform: translate(588px, 31px); */
}
.guess{
    text-align: center;
    border-style: double;
    border-width: 1em;
    width: 828px;
    height: 300px;
}
.image{
    border-style: double;
    border-width: 1em;
    height: 300px;
    width: 300px;
}
.alphabet{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.letter{
    height: 50px;
    width: 50px;
    border-style: dashed;
    text-align: center;
    background-color: rgb(200, 149, 60);
    color: rgb(242, 242, 242);
}
#countdown{
    font-size: 20px;
    color:red;
}

<!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.css">
    <title>Document</title>
</head>
<div class="playerOne">
    <h1 class="snowMan_Name">Snowman</h1>
    <h3 class="enterWordHere">Enter your word here:</h3>
    <input type="text" id="wordInput" name="wordInput">
    <button class="startButton">Start</button>
    <p id="countdown"></p>
</div>
<div class="container">
    <div class="image">
        <h3>Image goes here!</h3>
    </div>
<div class="guess">
    <h3>Guess Here!</h3>
    <div class="letters"></div>
    
</div>

<body>
    <div class="wrongLettersBox">
        Wrong Letters
        <div class="wrongLetters"></div>
    </div>
</div>
<div class="alphabet">
<div class="letter" id="A">A</div>
<div class="letter" id="B">B</div>
<div class="letter" id="C">C</div>
<div class="letter" id="D">D</div>
<div class="letter" id="E">E</div>
<div class="letter" id="F">F</div>
<div class="letter" id="G">G</div>
<div class="letter" id="H">H</div>
<div class="letter" id="I">I</div>
<div class="letter" id="J">J</div>
<div class="letter" id="K">K</div>
<div class="letter" id="L">L</div>
<div class="letter" id="M">M</div>
<div class="letter" id="N">N</div>
<div class="letter" id="O">O</div>
<div class="letter" id="P">P</div>
<div class="letter" id="Q">Q</div>
<div class="letter" id="R">R</div>
<div class="letter" id="S">S</div>
<div class="letter" id="T">T</div>
<div class="letter" id="U">U</div>
<div class="letter" id="V">V</div>
<div class="letter" id="W">W</div>
<div class="letter" id="X">X</div>
<div class="letter" id="Y">Y</div>
<div class="letter" id="Z">Z</div>
</div>

<script src="script.js"></script>    
</body>
</html>

基本上我認為正在發生的事情是計算機正在獲取 id 并比較它們。但是一旦它像雙“A”這樣的重復字母，它會得到第一個字母A并跳過其余的。

uj5u.com熱心網友回復：

let index = chars.indexOf(guessedLetter)

該indexOf方法只獲取它找到的第一個匹配項。

由于您已經在回圈播放，因此無需使用indexOf. 而是檢查是否chars[parseInt(span.id)] === guessedLetter

if (chars.includes(guessedLetter)){
    let underlines = document.querySelectorAll(".input-letters")
    underlines.forEach(span => {
        if (chars[parseInt(span.id)] === guessedLetter) {
            console.log("Match!");
            span.innerText = guessedLetter
            winCount  
            console.log(winCount)
            e.target.remove()
            if(winCount===chars.length){
                alert("You won the Game!")
            }
        }
         
    })
}

uj5u.com熱心網友回復：

這可能并不完全有幫助，但在逆向工程中，我采取了稍微不同的方式。我使用一個陣列來包含原始單詞，以及一個陣列，spliced當你得到正確的字母時，它會一路走來。我還展示了如何使用簡單的字母按鈕，而無需在 ID 或其他屬性中編碼。

let word = "abba".split("")
let chars = [...word]
let underlines = document.querySelectorAll(".input-letters")
const revealLetter = (e) => {
  let guessedLetter = e.target.innerText.toLowerCase()
  let index = chars.indexOf(guessedLetter)
  if (index > -1) {
    chars.splice(index, 1);
    let found = false
    word.forEach((e, i) => {
      if (e === guessedLetter && underlines[i].innerText == "_" && !found) {
        found = true;
        underlines[i].innerText = e;
      }
    })
    if (chars.length == 0) console.log("You won the Game!")
  } else {
    console.log('wrong');
  }
}

document.querySelectorAll('.alphabet button').forEach(letter => {
  letter.addEventListener("click", revealLetter)
})

<div class='alphabet'>
  <button>a</button><button>b</button><button>c</button>
</div>

<div>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
  <span class='input-letters'>_</span>
</div>

標籤：javascript

上一篇：如何在JavaScript中的一個函式中顯示每個按鈕

下一篇：FirebaseRTDB-獲取檔案ID？