БЛОГ НА HUSL


Отгадать слово по буквам

Автор вопроса: Михаил Камахин

Я пытаюсь написать программу, которая загадывает слово и ты его должен угадать по буквам.
У меня проблема с тем, что я не понимаю, как написать логику нахождения следующей одинаковой буквы.
Например:
Слово автомагистраль
я понимаю как найти первую букву а, но не понимаю как найти вторую букву, а потом третью
Итоговым результатом я хочу, чтобы я на странице подставлялась одна буква вместо _, если мы нашли нужную букву
Вся логика происходит в функции logic

const edit__block = document.querySelector('.edit__block');
const button = document.querySelector('.button');
const form = document.querySelector('.form');
const find__word = document.querySelector('.find__word');

const words = [
  'машина',
  'яблоко',
  'корона',
  'автомагистраль',
  'электростанция'
];

const findWord = words[getRandomInt(words.length)];
let word = [];
console.log(findWord);
for (let i = 0; i < findWord.length; i++) {
  find__word.innerHTML += '<span>_</span>';
}
const spans = find__word.querySelectorAll('span');

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function logic(letter) {
  for (let i = 0; i < findWord.length; i++) {
    if (word.length == 0 && letter == findWord[i]) {
      word[i] = letter;
      spans[i].innerHTML = word[i];
      break;
    }
    for (let j = 0; j < word.length; j++) {
      if (letter == findWord[i] && word[i] != letter) {
        console.log('i', i);
        console.log('j', j);
        word[i] = letter;
        spans[i].innerHTML = word[i];
        console.log(word);
        console.log('Вы отгадали букву!');
        console.log('');
        break;
      }
    }
  }
  console.log(word);
  console.log('');
}

function submitForm(event) {
  event.preventDefault();
  const letter = edit__block.value;
  logic(letter);
  edit__block.value = '';
}

function editBlock(event) {
  if (!event.target.value.match(/[а-яА-ЯЁё]+/)) {
    event.target.value = '';
  }
  if (event.target.value.length > 1) {
    event.target.value = event.target.value[0];
  }
}

form.addEventListener('submit', submitForm);
edit__block.addEventListener('input', editBlock);

edit__block.addEventListener('keydown', function(e) {
  if ((e.key == 'я' || e.key == 'Я' || e.key == 'z' || e.key == 'Z') && e.ctrlKey) {
    e.target.value = e.target.value.slice(0, -1);
  }
  if (e.key == 'Enter') {
    submitForm(e);
  }

})
body {
  margin: 0;
  font-family: sans-serif;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 250px;
  margin: 0 auto;
}

.card {
  border: 1px solid black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card__item {
  min-width: 180px;
  margin-bottom: 10px;
  padding: 0 20px;
}

.card__item:first-child {
  background: #E0EAF4;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}

.edit__block {
  margin: 10px 0;
  border: 1px solid black;
  padding: 5px 10px;
}

.edit__block:focus {
  border: 1px solid transparent;
}

.button {
  background-color: #0C88EC;
  height: 40px;
  border-radius: 50px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  outline: none;
  border: 0;
  width: 100%;
}

.find__word span {
  font-weight: bold;
}

.find__word span:not(:first-child) {
  margin-left: 7px;
}
<div class="container">

  <div class="card">
    <div class="card__item">
      Стартовый экран
    </div>
    <div class="card__item">
      Я загадал для вас слово
    </div>
    <div class="card__item find__word">
    </div>
    <div class="card__item">
      Дерзайте и отгадывайте!
    </div>
    <div class="card__item">
      <form class="form">
        <input class="edit__block" placeholder="Введите букву!" autofocus="">
        <input class="button" type="submit" value="ок">
      </form>
    </div>
    <div class="card__item final">
      Ваш JavaScript
    </div>
  </div>

</div>


Источник

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

Автор решения: Leonid

Правильно работает? Проверки на полностью отгаданное слово нет. 

   let WORD = [...findWord]; // Добавил в код это

   function logic(letter) {
       let index = WORD.indexOf(letter);

     if(index >= 0 && letter != ''){
       spans[index].textContent = letter;
       WORD[index] = ''; 
     }

     if(WORD.every(l => l == '')){
       console.log('ОТГАДАНО СЛОВО'); // Логика после того как отгадано все слово
       edit__block.disabled = true;
       button.disabled = true;
     }

    }


const edit__block = document.querySelector('.edit__block');
const button = document.querySelector('.button');
const form = document.querySelector('.form');
const find__word = document.querySelector('.find__word');

const words = [
  'машина',
  'яблоко',
  'корона',
  'автомагистраль',
  'электростанция'
];

const findWord = words[getRandomInt(words.length)];
let WORD = [...findWord];
console.log(findWord);
for (let i = 0; i < findWord.length; i++) {
  find__word.innerHTML += '<span>_</span>';
}
const spans = find__word.querySelectorAll('span');

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

   function logic(letter) {
       let index = WORD.indexOf(letter);
   
     if(index >= 0 && letter != ''){
       spans[index].textContent = letter;
       WORD[index] = ''; 
     }
   
     if(WORD.every(l => l == '')){
       console.log('ОТГАДАНО СЛОВО'); // Логика после того как отгадано все слово
       edit__block.disabled = true;
       button.disabled = true;
     }
   
   }

function submitForm(event) {
  event.preventDefault();
  const letter = edit__block.value;
  logic(letter);
  edit__block.value = '';
}

function editBlock(event) {
  if (!event.target.value.match(/[а-яА-ЯЁё]+/)) {
event.target.value = '';
  }
  if (event.target.value.length > 1) {
event.target.value = event.target.value[0];
  }
}

form.addEventListener('submit', submitForm);
edit__block.addEventListener('input', editBlock);

edit__block.addEventListener('keydown', function(e) {
  if ((e.key == 'я' || e.key == 'Я' || e.key == 'z' || e.key == 'Z') && e.ctrlKey) {
e.target.value = e.target.value.slice(0, -1);
  }
  if (e.key == 'Enter') {
submitForm(e);
  }

})
body {
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 250px;
  margin: 0 auto;
}

.card {
  border: 1px solid black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card__item {
  min-width: 180px;
  margin-bottom: 10px;
  padding: 0 20px;
}

.card__item:first-child {
  background: #E0EAF4;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}

.edit__block {
  margin: 10px 0;
  border: 1px solid black;
  padding: 5px 10px;
}

.edit__block:focus {
  border: 1px solid transparent;
}

.button {
  background-color: #0C88EC;
  height: 40px;
  border-radius: 50px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  outline: none;
  border: 0;
  width: 100%;
}

.find__word span:not(:first-child) {
  margin-left: 7px;
}
<div class="container">

  <div class="card">
<div class="card__item">
  Стартовый экран
</div>
<div class="card__item">
  Я загадал для вас слово
</div>
<div class="card__item find__word">
</div>
<div class="card__item">
  Дерзайте и отгадывайте!
</div>
<div class="card__item">
  <form class="form">
    <input class="edit__block" placeholder="Введите букву!" autofocus="">
    <input class="button" type="submit" value="ок">
  </form>
</div>
<div class="card__item final">
  Ваш JavaScript
</div>
  </div>

</div>

→ Ссылка
Автор решения: Grundy

Проблема заключается в лишнем цикле, при проверке буквы и неудачных проверках.

Логика должна быть следующей:

  1. бежим по загаданному слову
  2. если буква совпала с догадкой и раньше не была угадана на этой позиции показываем

В итоге цикл преобразуется в следующий:

for (let i = 0; i < findWord.length; i++) {
  if (letter == findWord[i] && !word[i]) {
    word[i] = letter;
    spans[i].innerHTML = word[i];
    console.log('Вы отгадали букву!');
    break;
  }
}


const edit__block = document.querySelector('.edit__block');
const button = document.querySelector('.button');
const form = document.querySelector('.form');
const find__word = document.querySelector('.find__word');

const words = [
  'машина',
  'яблоко',
  'корона',
  'автомагистраль',
  'электростанция'
];

const findWord = words[getRandomInt(words.length)];
let word = [];
console.log(findWord);
for (let i = 0; i < findWord.length; i++) {
  find__word.innerHTML += '<span>_</span>';
}
const spans = find__word.querySelectorAll('span');

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function logic(letter) {
  for (let i = 0; i < findWord.length; i++) {
    if (letter == findWord[i] && !word[i]) {
      word[i] = letter;
      spans[i].innerHTML = word[i];
      console.log('Вы отгадали букву!');
      break;
    }
  }
  console.log(word);
  console.log('');
}

function submitForm(event) {
  event.preventDefault();
  const letter = edit__block.value;
  logic(letter);
  edit__block.value = '';
}

function editBlock(event) {
  if (!event.target.value.match(/[а-яА-ЯЁё]+/)) {
    event.target.value = '';
  }
  if (event.target.value.length > 1) {
    event.target.value = event.target.value[0];
  }
}

form.addEventListener('submit', submitForm);
edit__block.addEventListener('input', editBlock);

edit__block.addEventListener('keydown', function(e) {
  if ((e.key == 'я' || e.key == 'Я' || e.key == 'z' || e.key == 'Z') && e.ctrlKey) {
    e.target.value = e.target.value.slice(0, -1);
  }
  if (e.key == 'Enter') {
    submitForm(e);
  }

})
body {
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 250px;
  margin: 0 auto;
}

.card {
  border: 1px solid black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card__item {
  min-width: 180px;
  margin-bottom: 10px;
  padding: 0 20px;
}

.card__item:first-child {
  background: #E0EAF4;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}

.edit__block {
  margin: 10px 0;
  border: 1px solid black;
  padding: 5px 10px;
}

.edit__block:focus {
  border: 1px solid transparent;
}

.button {
  background-color: #0C88EC;
  height: 40px;
  border-radius: 50px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  outline: none;
  border: 0;
  width: 100%;
}

.find__word span:not(:first-child) {
  margin-left: 7px;
}
<div class="container">

  <div class="card">
    <div class="card__item">
      Стартовый экран
    </div>
    <div class="card__item">
      Я загадал для вас слово
    </div>
    <div class="card__item find__word">
    </div>
    <div class="card__item">
      Дерзайте и отгадывайте!
    </div>
    <div class="card__item">
      <form class="form">
        <input class="edit__block" placeholder="Введите букву!" autofocus="">
        <input class="button" type="submit" value="ок">
      </form>
    </div>
    <div class="card__item final">
      Ваш JavaScript
    </div>
  </div>

</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.