Как сравнить нажатую клавишу с сохраненным массивом, а затем заменить буквы в другом массиве

Question

Хорошо, я знаю, что название сбивает с толку, поэтому вот объяснение.

Это домашнее задание, и я полностью на нем застрял.
Я создаю простую игру «Виселица» и дошел до того, что компьютер выбрал случайное слово из списка (в текущем коде список установлен на 1 элемент, в то время как я исправлял еще пару ошибок).

Итак, вот что я спрашиваю. В строке 45 я пытаюсь сравнить буквы, хранящиеся в letterGuessed, со значением, хранящимся в randomWord. ЕСЛИ значение соответствует букве в массиве randomWord, затем распечатайте это в HTML-документ, если нет, продолжайте позволять пользователю пробовать, пока он не достигнет 0 оставшихся попыток. Я пробовал цикл for с вложенным if, но сравнение никогда не работает.

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

Заранее спасибо!

//This will hold an list of words to guess in the game
var wordsToGuess = ["abc"];
//Global variables//
//variables to hold score count
var wins = 0;
var losses = 0;
var guessesRemaining = 10;
//Empty arras to store letters guessed
var lettersGuessed = [];
//Empty arras to store the word to guess
var randomWord = [];
var word = [];


//When the enter key is pressed a new word is slected and the Current Word section is replaced with dashes
window.addEventListener("keyup", function(e) {
  if (e.keyCode === 13) {
    word = [];
    start();
  }
}, false);

//function to start and re-start the game when needed
function start() {

  //Randomizer to pick random a word from wordsToGuess array
  randomWord = wordsToGuess[Math.floor(Math.random() * wordsToGuess.length)];
  console.log(randomWord);

  //This adds the dashes for the number of letters of the picked word
  for (var i = 0; i < randomWord.length; i++) {
    word[i] = "_";
  }
  console.log(word);
  document.getElementById("current-word").innerHTML = word;


  //when the player presses a key well run some code
  document.onkeyup = function(event) {

    //To determine what key is pressed and save it to lettersGuessed
    lettersGuessed.push(event.key);

    //Print letters guessed to page
    document.getElementById("guessed-letters").innerHTML = lettersGuessed;
    console.log(lettersGuessed);
    //check if letter guessed is equal to any of the letters in the word
    if (randomWord.indexOf(lettersGuessed) === -1) {
        word.push(lettersGuessed);
    }else{
    guessesRemaining--;
    document.getElementById("guesses").innerHTML = guessesRemaining;
    console.log(guessesRemaining);
    }
    /*
    guessesRemaining--;
    document.getElementById("guesses").innerHTML = guessesRemaining;
    console.log(guessesRemaining);
    */
  }
}

//each time the player guesses a correct letter
//current word should update

//each time the player wins

//each time the player loses

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hangman-Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" media="screen" href="../assets/css/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="../assets/Javascript/game.js"></script>

</head>

<body>

  <div class="card mb-3">
    <img class="card-img-top" src="../assets/images/Star_Wars_Logo.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is my StarWars Hangman Game. Here are the rules...just guess letters and try to win. All words can come from any StarWars movie but will be limited to characters in the movies and Cartoon shows (not including books) Press ENTER to start.
      </p>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col">
        This column will hold my images
      </div>
      <div class="col">
        This side will hold by game
        <p class="wins">Wins:
          <span id="wins">0</span>
        </p>
        <p class="losses">Losses:
          <span id="losses">0</span>
        </p>
        <br/>
        <p>Current Word: </p>
        <p>
          <span id="current-word">""</span>
        </p>
        <p>Guessed Letters: </p>
        <p>
          <span id="guessed-letters">""</span>
        </p>
        <p>Guesses Remaining: </p>
        <p>
          <span id="guesses">10</span>
        </p>
      </div>
    </div>
  </div>
  </div>





  <footer class="footer position-relative">
    <div class="container">
      <span class="text-muted">Copyright Roberto Benites 2018</span>
    </div>
  </footer>

  <!--BootStrap links-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

javascript html

2

robert 12 Мар 2018 в 21:56

Answer 1

Я бы поместил правильное слово в var и перебрал каждый символ в нем, а затем поместил каждый символ из правильного слова в правильный массив слов.Когда пользователь вводит букву, вы можете пройти через свой правильный массив слов и проверить, если это буква находится в правильном массиве слов или нет. Если это. Поместите это в массив угаданных букв. Если нет. Поместите это в массив неправильно угаданных букв. Также помните, что ваше письмо, которое, по вашему мнению, могло быть в правильном массиве слов несколько раз. Вы также хотите проверить, остались ли угадывания == 0, а также стереть часть палача, если угаданная буква неверна. Однако эта базовая логика должна разделять ваши правильные буквы и неправильные буквы на два отдельных массива, с которыми вам нужно будет выполнить дополнительную логику. Вам также необходимо отобразить правильные буквы в правильных местах, что не должно быть слишком сложным. Удачи, надеюсь, это поможет.

var str = "correctWord"
var word = [];

for (var i = 0; i < str.length; i++) {
word.push(str.charAt(i));
}
for(var i =0; i< word.length; i++)
{
 if(i == guessedletter)
 {
   correctlettersGuessed.push(i);
 }
 else
 {
  wrongGuessedLetter.push(guessedletter);
 }
 guessesRemaining--; 


}

0

PerrinPrograms 12 Мар 2018 в 20:35

Answer 2

Привет! Попробуйте это: codepen

Может быть, не оптимально, но работает по мере необходимости.

HTML (как и ваш, за исключением элемента id = 'guesses' и текста 'Press ENTER ...'):

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hangman-Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" media="screen" href="../assets/css/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="../assets/Javascript/game.js"></script>

</head>

<body>

  <div class="card mb-3">
    <img class="card-img-top" src="../assets/images/Star_Wars_Logo.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is my StarWars Hangman Game. Here are the rules...just guess letters and try to win. All words can come from any StarWars movie but will be limited to characters in the movies and Cartoon shows (not including books). <span id='status' style='color: red;'>Press ENTER to start!</span>
      </p>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col">
        This column will hold my images
      </div>
      <div class="col">
        This side will hold by game
        <p class="wins">Wins:
          <span id="wins">0</span>
        </p>
        <p class="losses">Losses:
          <span id="losses">0</span>
        </p>
        <br/>
        <p>Current Word: </p>
        <p>
          <span id="current-word">""</span>
        </p>
        <p>Guessed Letters: </p>
        <p>
          <span id="guessed-letters">""</span>
        </p>
        <p>Guesses Remaining: </p>
        <p>
          <span id="guesses">10</span>
        </p>
      </div>
    </div>
  </div>
  </div>





  <footer class="footer position-relative">
    <div class="container">
      <span class="text-muted">Copyright Roberto Benites 2018</span>
    </div>
  </footer>

  <!--BootStrap links-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Вот код js:

function Game() {
  //VARIABLES
  var _this = this;
  var wins = 0;
  var losses = 0;
  var wordsList = ['stars', 'wars'];
  var messages = {
    off: 'Press ENTER to start!',
    on: 'You are playing now!'
  };

  //init each game  
  var lettersGuessed;
  var guessesRemaining;
  var status;
  var wordToGuess;
  var resultWord;

  //DOM ELEMENTS
  var $gameStatus = document.getElementById("status");
  var $wins = document.getElementById("wins");
  var $losses = document.getElementById("losses");
  var $guessedLetters = document.getElementById("guessed-letters");
  var $leftGuessesCounter = document.getElementById("guesses");
  var $currentWord = document.getElementById("current-word");

  //INIT
  this.init = function() {
    setDefaults();

    //EVENTS
    window.addEventListener('keyup', begin);
    document.addEventListener('keyup', play);

    //to begin the game
    function begin(e) {
      if(e.keyCode === 13 && status === 'off') {
        status = 'on';
        render('status');
        render('resultWord');
        render('lettersGuessed');
        render('guessesRemaining');
      }
    }

    function play(e) {
      if(status === 'on') {
        start(e);
      }
    }
  };

  //SET DEFAULTS
  function setDefaults() {
    lettersGuessed = [];
    render('lettersGuessed');
    guessesRemaining = 10;
    render('guesses');
    status = 'off';
    render('status');
    wordToGuess = wordsList[Math.floor(Math.random() * wordsList.length)];  
    //word with letters that player has found
    resultWord = new Array(wordToGuess.length + 1).join('_').split('');
  };

  //START
  function start(e) {
    if(status === 'on') {
      var code = e.keyCode
      //check if it is a char
      if(code > 64 && code < 91) {
        var char = e.key;
        //check if char was already named
        if(lettersGuessed.indexOf(char) === -1) { 
          lettersGuessed.push(char);
          render('lettersGuessed');
          //if char is in wordToGuess
          if(wordToGuess.indexOf(char) !== -1) {
            for(var i = 0; i<wordToGuess.length; i++) {
              if(wordToGuess[i] === char) resultWord[i] = char;
            }
            render('resultWord');
            //check if won
            if(wordToGuess === resultWord.join('')) {
              wins++;
              render('wins');
              alert('You\'ve won!');
              setDefaults();
            }
          } else {
            guessesRemaining--;
            render('guesses');
            if(guessesRemaining === 0) {
              losses++;
              render('losses');
              alert('You\'ve lost!');
              setDefaults();
            }
          }            
        } else {
          alert('You\'ve tried this character already!');
        }          
      } else {
        console.log('It\'s not a character!');
      }
    }
  };

  //RENDER
  function render(el) {
    switch(el) {
      case 'status':
        $gameStatus.innerText = messages[status];
        break;
      case 'resultWord':
        $currentWord.innerText = resultWord.join(' ');
        break;
      case 'guesses':
        $leftGuessesCounter.innerText = guessesRemaining;
        break;
      case 'lettersGuessed':
        $guessedLetters.innerText = lettersGuessed.join(',');
        break;
      case'wins':
        $wins.innerText = wins;
      case'losses':
        $losses.innerText = losses;
    }
  };
}; 

new Game().init();

0

g1un 13 Мар 2018 в 12:17

Как сравнить нажатую клавишу с сохраненным массивом, а затем заменить буквы в другом массиве

2 ответа

Похожие вопросы

Новые вопросы

javascript