Как обновить несколько элементов массива

Question

В homestretch с моей Javascript Hangman Game. Оставшаяся задача состоит в том, чтобы обработать обновление тире (заполнители букв), когда пользователь угадывает письмо, которое содержится более одного раза в тайном слове.

Код знает, сколько раз угаданное письмо появляется в тайном слове (var name: totalCorrect), а также индексы (имя массива var: индексы) для этих букв в тайном слове (имя массива: combDashes).

Я использую следующий код, чтобы обновить тире в тайном слове, когда пользователь угадывает письмо, которое появляется только один раз в слове, но не может понять, как обновить место для тире, когда есть несколько экземпляров письмо в тайном слове (индексы содержат несколько индексов).

// replaces dash with the correctly guessed letter in the mystery word. 
combineDashes[indices] = letter;  

Полный код следующим образом:

// JavaScript Document 


$(document).ready(function() {  // upon page load 

     var badGuesses; // reset bad guess counter 
     var theWord;  // defines variable globally 
     var combineDashes; // defines variable globally 
     var letter;  // defines variable globally 
     var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Z"]; // array of letters to choose 
     $("#lettersRemaining").html(alphabet); // gets elements of the alphabet array and displays on UI 


// N E W G A M E B U T T O N C L I C K E D 

    $("#newGame").click(function() { // when user clicks on Start New Game button... 

     $("#status").hide(); // upon game reset hide the status section stating game over 
     var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Z"]; // reset array of letters to choose from 

     $("#hangmanGuy").html('<img src="img/Hangman-0.png" id="hangmanImg" alt="pic of hangman no limbs" width="144" height="216">'); // reset hangman image 
     badGuesses = 0; // reset guess counter which is used later 

     var wordCollection = ["MANSION", "STATUE", "GORILLA", "NOTEBOOK", "SMARTPHONE", "ILLUSTRATION", "PHOTO", "ELEGANT", "ARBORIST", "KEYBOARD", "CALENDAR", "CAPITAL", "TEXTBOOK", "HORRIBLE", "LIBRARY"]; // array of words the computer will randomly choose from 

     theWord = wordCollection[Math.floor(Math.random()*wordCollection.length)]; // randomly selects a word 
      console.log("theWord is ...."); 
      console.log(theWord); 

     var theWordLength = theWord.length;  // Get number of characters in randomly selected word to know how many dashes to display 
      console.log("theWordLength is ...."); 
      console.log(theWordLength); 

     // D I S P L A Y D A S H E S 

     combineDashes = []; // creates an array to hold the number of dashes inside the for loop 

     for (var i = theWordLength; i > 0; i--) 
      { 
       combineDashes.push(" - "); // each loop through adds a dash to the array 
      } 

     combineDashes.join(" "); // joins cumulative dashes and converts to a string 

     $("#dashes").html(combineDashes); // displays dashes on UI 
       console.log("combineDashes is..."); 
       console.log(combineDashes); 

    }); 


// G U E S S L E T T E R C L I C K E D 

    $("#guessLetter").click(function() { // when user clicks on the Guess Letter button pass in theWord value .... 
        console.log(combineDashes); 

     var letter = $("#theLetter").val().toUpperCase(); // gets the letter the user is guessing & makes uppercase 
      console.log("letter is ..."); 
      console.log(letter); 

     // Is the letter a good or bad guess? 
     var indices = []; // new array to capture indices of all letters contained in the word 

     var idx = theWord.indexOf(letter); 

     while (idx !== -1) {     // loops thru to find all letters in the word 
      indices[indices.length] = idx; 
      idx = theWord.indexOf(letter, idx + 1); 
     } 
      console.log("indices of letter guess contained in the word"); 
      console.log(indices); 

     var totalCorrect = indices.length; // captures how many letters guessed were correct 
      console.log("totalCorrect letters..."); 
      console.log(totalCorrect); 

    // F O R B A D G U E S S E S 
     if (indices.length === 0) // if bad guess 
      { 
       badGuesses++; // increment bad guess counter 
       $("#status").show(); 
       $("#status").html("Sorry, " + letter + " is incorrect. Try again."); // status message displays 
       console.log("Total badGuesses..."); 
       console.log(badGuesses); 

       // remove guessed letter from alphabet 
       var alphaIndex = alphabet.indexOf(letter);  // gets index of letter in alphabet 
       alphabet.splice(alphaIndex,1); // removes the letter from the alphabet array 
       console.log("alphabet index of letter guessed..."); 
       console.log(alphaIndex); 
       $("#lettersRemaining").html(alphabet); // refreshes letters remaining 

      // display correct hangman image based on how many bad guesses 
        if (badGuesses === 1) 
        { 
         $("#hangmanGuy").html('<img src="img/Hangman-1.png" id="hangmanImg" alt="pic of hangman 1 limb" width="144" height="216">'); 
        } 
        else if (badGuesses === 2) 
        { 
          $("#hangmanGuy").html('<img src="img/Hangman-2.png" id="hangmanImg" alt="pic of hangman 2 limbs" width="144" height="216">'); 
        } 
        else if (badGuesses === 3) 
        { 
          $("#hangmanGuy").html('<img src="img/Hangman-3.png" id="hangmanImg" alt="pic of hangman 3 limbs" width="144" height="216">'); 
        } 
        else if (badGuesses === 4) 
        { 
          $("#hangmanGuy").html('<img src="img/Hangman-4.png" id="hangmanImg" alt="pic of hangman 4 limbs" width="144" height="216">'); 
        } 
        else if (badGuesses === 5) 
        { 
          $("#hangmanGuy").html('<img src="img/Hangman-5.png" id="hangmanImg" alt="pic of hangman 5 limbs" width="144" height="216">'); 
        } 
        else if (badGuesses === 6) 
        { 
          $("#hangmanGuy").html('<img src="img/Hangman-6.png" id="hangmanImg" alt="pic of hangman 6 limbs" width="144" height="216">'); 
          $("#status").html("Game Over. Sorry, you didn't win. Click Start New Game and try again."); // status message displays 
        } 
      } 
     // F O R G O O D G U E S S E S 
     else 
      { 
       // remove guessed letter from alphabet 
       var alphaIndex = alphabet.indexOf(letter);  // gets index of letter in alphabet 

       alphabet.splice(alphaIndex,1); // removes the letter from the alphabet array 
        console.log("alphabet index of letter guessed..."); 
        console.log(alphaIndex); 

       $("#lettersRemaining").html(alphabet); // refreshes letters remaining 

       console.log(indices[0]); // gives value of the indexes array position 0 
       console.log(indices[1]); // gives value of the indexes array position 1 
       console.log(indices[2]); // gives value of the indexes array position 2 
       console.log(indices[3]); // gives value of the indexes array position 3 
       console.log(indices[4]); // gives value of the indexes array position 4 
       console.log(indices[5]); // gives value of the indexes array position 5 
       console.log(indices[6]); // gives value of the indexes array position 6 
      } 


      // R E P L A C E D A S H E S W I T H L E T T E R 

        // if there's only one instance of the letter in the word... 
        if (totalCorrect === 1) { 
         combineDashes[indices] = letter;   
         console.log(letter); 
         console.log(combineDashes); 
        } 

        else // if there are multiple instances of the letter in the word... 
        { 
         letterInWordIndex0 = indices[0]; // assigns value of index to variable 
         letterInWordIndex1 = indices[1]; // assigns value of index to variable 
         letterInWordIndex2 = indices[2]; // assigns value of index to variable 

         combineDashes[letterInWordIndex0] = letter; // replaces dash with letter 
         combineDashes[letterInWordIndex1] = letter; // replaces dash with letter 
         combineDashes[letterInWordIndex2] = letter; // replaces dash with letter 
        } 
       // D I S P L A Y S T A T U S M E S S A G E 
       $("#dashes").html(combineDashes); // 
       $("#status").show(); 

// HUNG UP HERE 
       combineDashes.find(" - "); 

       if (noMoreDashes = []) { // ?? HOW TO SAY NO DASHES REMAIN ? 
        $("#status").html("YOU WIN! Click Start New Game to play again."); // status message displays 
        } 
       else 
       { 
        $("#status").html(letter + " is correct! Go again."); // status message displays 
       } 


    }); 

});  

Answer 1

Для обоих, когда totalCorrect является 1 или если больше, то вы можете использовать этот единственный кусок кода:

indices.forEach(function (index) { 
    combineDashes[index] = letter; 
}); 

Тогда вам сделайте это:

combineDashes.find(" - "); 

Но вы не фиксируете результат, который он дает. Кроме того, find нуждается в функции обратного вызова. Вы можете использовать includes вместо этого, и может объединить его в if, что следует, используя оператор ! (т.е. «не»):

if (!combineDashes.includes(" - ")) { 
    $("#status").html("YOU WIN! Click Start New Game to play again."); 
} 

Если ваш браузер не поддерживает includes, а затем использовать indexOf, как это:

if (combineDashes.indexOf(" - ") == -1) { 
    $("#status").html("YOU WIN! Click Start New Game to play again."); 
} 

Обратите внимание, что в вашем коде имеется еще несколько проблем. Слишком долго для полного анализа, но, например, это:

combineDashes.join(" "); 

... ничего не делает. Потому что joinвозвращает результат - не изменено combinationDashes. Вместо этого используйте его, где вы передаете его для отображения:

$("#dashes").html(combineDashes.join(" ")); 

В коде много повторений. Попробуйте повторно использовать код. Например, это:

if (badGuesses === 1) 
{ 
    $("#hangmanGuy").html('<img src="img/Hangman-1.png" id="hangmanImg" alt="pic of hangman 1 limb" width="144" height="216">'); 
} 
if (badGuesses === 2) 
    // ...etc 

... можно записать в виде:

if (badGuesses <= 6) { 
    $("#hangmanGuy").html('<img src="img/Hangman-' + badGuesses 
     + '.png" id="hangmanImg" alt="pic of hangman ' + badGuesses 
     + ' limb" width="144" height="216">'); 
} 
if (badGuesses >= 6) { 
    $("#status").html("Game Over. Sorry, you didn't win. Click Start New Game and try again."); 
}