Как упорядочить введенные в input символы ,что бы они составили слово из переменной

Question

Пока у меня получается так что, я ввожу символы в поле input,выполняется проверка со словом в переменной words_computer, если такие символы есть, то они добавляются в div,но в том порядке, в котором были введены в поле input,и вот вопрос, как собрать с этих символов слово, которое в переменной

HTML

<p id="commentComputer">Здесь будет комментарий компьютера по ходу игры Выиграл/Проиграл</p>
    <button id="start">Начинаем игру</button>
    </br>
    <input type="text" id = "input_user">
   <div id="ok_word"></div>

JS window.onload=function () {

  let div = document.getElementById("ok_word");
    let input_user = document.getElementById('input_user');
    let start = document.getElementById('start');

    let words = ["лошадь", "удав", "кровать", "телевизор", "сервис", "командир", "бамбук", "клоун", "инквизитор", "балабол", "клад", "загадка", "танк"];
    var words_computer;


    start.addEventListener("click", Get_Random_Word);

    function Get_Random_Word() {
        words_computer = words[Math.floor(Math.random() * words.length)];
        return words_computer;
    }


    input_user.addEventListener("keyup", compare);
    
    function compare() {
        console.log(words_computer);

        if (words_computer.indexOf(input_user.value) != -1) {
            div.innerText += input_user.value;
        }
        input_user.value = "";
    }
}

Answer 1

Нужно где-то в каком-то виде хранить все совпавшие буквы и их последовательность. Сделал массив такой же длины, что и у слова: Каждой букве соответствует свой индекс. Соответственно, при вводе буквы можно циклом пробежать по слову, если буква совпала - добавить её в массив под тем же индексом.

let words = ["лошадь", "удав", "кровать", "телевизор", "сервис", "командир", "бамбук", "клоун", "инквизитор", "балабол", "клад", "загадка", "танк"];

let output = id("ok_word");

let curr_word = null; // Текущее слово (строка)
let guessed_letters = null; // Массив угаданных букв

/***/
id("start").addEventListener("click", function () {
  curr_word = get_random_word();
  guessed_letters = new Array(curr_word.length);
  
  output.textContent = "";
  
  console.log(curr_word);
});

function get_random_word() {
  return words[Math.random() * words.length | 0];
}

/***/
id("input_user").addEventListener("input", function () {
  if (!this.value) return; // Не ввели букву (например, Backspace)
  
  let input = this.value[0].toLowerCase();
  let result = "";
  
  for (let i = 0; i < curr_word.length; i++) {
    let letter = curr_word[i];
    
    if (input === letter) { // Буква совпала?
      guessed_letters[i] = letter; // Cохранить в массиве угаданных.
    }
    
    if (guessed_letters[i]) {
      // Заодно в том же цикле сразу собирается строка из всех ранее угаданных.
      result += letter;
    } else {
      // result += " _ "; // Можно показывать пустые "клетки"
    }
  }
  
  output.textContent = result;
  
  if (result === curr_word) {
    console.log("Угадано");
  }
  
  setTimeout(() => this.value = "", 200);
  // Пусть удаляется чуть позже, чтобы ощущалось, что ввод сработал.
});

/***/
function id(str) {
  return document.getElementById(str);
}

<p id="commentComputer"> - - </p>

<button id="start">Начинаем игру</button>
<input type="text" id="input_user">
<div id="ok_word"></div>

БЛОГ НА HUSL

Как упорядочить введенные в input символы ,что бы они составили слово из переменной

Ответы (1 шт):