Question

我正在尝试更改此代码，以将玩家选择插入＆＃34;结果＆＃34;在我的页面上标记以填写字母的空格＆＃34; _ _ _ _ _ _＆＃34;而不是全部作为警报。我需要帮助来弄清楚这项任务背后的逻辑。

_HTML __

<div class="jumbotron">
    <h1 class="display-4">Hangman</h1>
    <hr class="my-4">
    <p>Select a letter from A - Z</p>
    <div id="results"></div>
    <h5>Letters used:</h5>
    <div id="used"></div>
</div>
<div id="results"></div>

JS

var word = ["tiger", "lion", "giraffe", "monkey", "elephant", "cheetah"];
var words = word[Math.floor(Math.random() * word.length)];
var answerArray = [];    

for (var i = 0; i < words.length; i++) {
    document.getElementById("results").innerHTML += " _ ";
}

var remainingLetters = words.length;
while (remainingLetters > 0) {
    alert(answerArray.join(" "));
    var guess = prompt("Guess a letter, or click Cancel to stop playing.");

    if (guess === null) {    
        break;

    } else if (guess.length !== 1) {    
        alert("Please enter a single letter.");

    } else {   
        for (var j = 0; j < words.length; j++) {    
            if (words[j] === guess) {    
                answerArray[j] = guess;

                remainingLetters--;    
            }    
        }
    }    
}

alert(answerArray.join(" "));

Answer 1

HTML：

<div class="jumbotron">
  <h1 class="display-4">Hangman</h1>
  <hr class="my-4">
  <p>Select a letter from A - Z</p>
  <button onclick="game('A');" class="guess">A</button>
  <button onclick="game('B');" class="guess">B</button>
  <button onclick="game('C');" class="guess">C</button>
  <button onclick="game('D');" class="guess">D</button>
  <button onclick="game('E');" class="guess">E</button>
  <button onclick="game('F');" class="guess">F</button>
  <button onclick="game('G');" class="guess">G</button>
  <button onclick="game('H');" class="guess">H</button>
  <button onclick="game('I');" class="guess">I</button>
  <button onclick="game('J');" class="guess">J</button>
  <button onclick="game('K');" class="guess">K</button>
  <button onclick="game('L');" class="guess">L</button>
  <button onclick="game('M');" class="guess">M</button>
  <button onclick="game('N');" class="guess">N</button>
  <button onclick="game('O');" class="guess">O</button>
  <button onclick="game('P');" class="guess">P</button>
  <button onclick="game('Q');" class="guess">Q</button>
  <button onclick="game('R');" class="guess">R</button>
  <button onclick="game('S');" class="guess">S</button>
  <button onclick="game('T');" class="guess">T</button>
  <button onclick="game('U');" class="guess">U</button>
  <button onclick="game('V');" class="guess">V</button>
  <button onclick="game('W');" class="guess">W</button>
  <button onclick="game('X');" class="guess">X</button>
  <button onclick="game('Y');" class="guess">Y</button>
  <button onclick="game('Z');" class="guess">Z</button>
  <div id="results"></div>
  <h5>Letters used:</h5>
  <div id="used"></div>
</div>
<div id="results"></div>

JavaScript的：

var word = ["tiger", "lion", "giraffe", "monkey", "elephant", "cheetah"];
var words = word[Math.floor(Math.random() * word.length)];
var answerArray = [];

for (var i = 0; i < words.length; i++) {
  document.getElementById("results").innerHTML += " _ ";
}

var remainingLetters = words.length;

function game(guess){
        var found = -1;
    for (var j = 0; j < words.length; j++) {
      if (words[j].toLowerCase() == guess.toLowerCase()) {
        answerArray[j] = guess;
                found = j;
        remainingLetters--;
      }
    }
    var answerStr = '';
    if(found >= 0){
      for (var f = 0; f < words.length; f++) {
        if (words[f].toUpperCase() == answerArray[f]) {
          answerStr += " "+answerArray[f]+" ";
        } else {
          answerStr += ' _ ';
        }
        document.getElementById("results").innerHTML = answerStr;
      }
    }else{
        alert('wrong answer');
    }  
}

将用户提示更改为innerHTML文本

1 个答案: