Javascript Аналог игры Угадай слово

138

19 октября 2019, 04:10

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

Хотя бы подскажите куда смотреть.

Спасибо.

Вот код скрипта:

const word = ['wrinkles','wrinkle it','wrink it lost'];
 var randNum = Math.floor(Math.random() * word.length);
 var choosenWord = word[randNum];
 var underScore = [];
 var rightWord = [];
 var wrongWord = [];
 var docUnderScore = document.getElementsByClassName("underscores");
 var generateUnderscore = () => {
    for(var i = 0; i < choosenWord.length; i++) {
         if(choosenWord[i] === ' '){
             underScore.push( ' ' );  
        } else {
             underScore.push( '_' );
        }
    }
    return underScore;
 }
 document.addEventListener('keypress', (event) => {
   var keyword = String.fromCharCode(event.keyCode);
  if(choosenWord.indexOf(keyword) > -1) { 
        rightWord.push(keyword);
        underScore[choosenWord.indexOf(keyword)] = keyword;
         docUnderScore[0].innerHTML = underScore.join('');
        console.log(underScore[choosenWord.indexOf(keyword)] = keyword);
    } else {
        wrongWord.push(keyword);
    }
 });
 docUnderScore[0].innerHTML = generateUnderscore().join('');

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
    <title>Words</title>
</head>
<style>

html, body {
    height: 100%;
  }

body{
    /*font-size: 2em;*/
    font-family: 'Arial', sans-serif; 
    color: #666666;
    padding-top: 120px;
    text-align: center;
}
h1,h2,h3 {
    margin: auto;
}
p{
    margin: 0 0;
    color: #666666;
}
.container {
    text-align: center;
    margin: 0 auto;
    max-width: 1300px;
}
.block, .block-button {
    padding: 20px 0;
    width: 250px;
    margin: inherit;
}
</style>
<body>
    <h1>Guess</h1>
    <div class="container">
     <div class="block">
      <h2>
       <span class="underscores"></span>
       </h2>
     </div>
    </div>
</body>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</html>