Отображение угаданных букв с использованием Javascript

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

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

Однако он указывает запятые, когда пользователь вводит неправильные буквы.

В заключение, я думал, что следующее будет достаточно:

var guessedLetters = []; //Array to capture user letter input 
var yourGuess = event.key; //variable to capute user's guess 
guessedLetters.push(yourGuess); //This is suppose to capture letters entered by the user 
. 
. 
. 
"<p>Guessed Letter: " + guessedLetters.join(', '); //Show guessed letters here

Пожалуйста, обратите внимание, что часть выигрыш/проигрыш по-прежнему работал ... и да, я нуб в Javascript :)

Ниже приведен код, я до сих пор (был сделаны комментарии для понимания кода)

<!DOCTYPE html> 
<html lang="en-us"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>The Guessing Game</title> 
</head> 
<body> 
    <div id="psychicAct"> 
    <h1>The Guessing Game</h1> 
    <p>Guess what letter I'm thinking of:</p> 
    </div> 
    <script type="text/javascript"> 
    var psychicLetters = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; 
    var youWin = 0; 
    var youLose = 0; 
    var guessesLeft = 13; 
    var guessedLetters = []; //Array to capture user letter input 

    document.onkeyup = function(event) { 
    var yourGuess = event.key; //variable to capute user's guess 
    guessedLetters.push(yourGuess); //This is suppose to capture letters  entered by the user  
    var psychicAns = psychicLetters[Math.floor(Math.random() * psychicLetters.length)]; 

    //If your guess matches the psychic's guess, 
    //a point is added to the "Wins" tally and the guesses tally restarts. 
    if (yourGuess === psychicAns) { 
     youWin++; 
     guessesLeft = 12; 
    } 
    //If your does not not match the psychic's guess, your number of guesses remaining are deducted. 
    else { 
     guessesLeft--; 
    } 

    //If the guesses remaining equals 0, you lose, an increment is added to the "Losses" tally and the points restart. 
    if (guessesLeft === 0){ 
     youLose++; 
     guessesLeft = 12; 
    } 

    var html = "<p>Guess what letter I'm thinking of:</p>" + "<p>Wins: " + youWin + "</p>" + "<p>Loses: "+ youLose + "<p>Guesses Remaining: " + guessesLeft + "<p>Guessed Letter: " + guessedLetters.join(', '); //Show guessed letters here 
    document.querySelector("#psychicAct").innerHTML = html; 
    } 
    </script> 
</body> 
</html>

источник

2017-02-16 EDavidson

Пожалуйста, добавьте несколько отступов в код .... нечитаемым в данный момент – LuudJacobs

Возможно падение это в скрипку для облегчения экспериментов? – Frits

https://jsfiddle.net/q1uxvq8b/ - кажется, что он работает нормально. Если вы не хотите, чтобы запятые отображались, удалите запятую из 'guessedLetters.join (',');' - просто используйте 'guessedLetters.join ('');' – ADyson

здесь упрощенный код , Я создал различные функции, чтобы сделать его более читабельным и понятным, чтобы вы могли понять его легче.

var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; 
 
var wins = 0; 
 
var loses = 0; 
 
var guessesLeft, guessedLetters, letterToGuess; 
 

 
resetGame(); 
 
display(); 
 

 
document.onkeyup = function(event) { 
 
    var guess = event.key; 
 
    if (guess === letterToGuess) { 
 
    win(); 
 
    } else if (guessesLeft - 1 === 0) { 
 
    lost(); 
 
    } else { 
 
    fail(guess); 
 
    } 
 

 
    display(); 
 
} 
 

 
function display() { 
 
    var winsP = document.getElementById("wins"); 
 
    var losesP = document.getElementById("loses"); 
 
    var guessLeft = document.getElementById("guessLeft"); 
 
    var letterGuessed = document.getElementById("guessed"); 
 
    winsP.innerHTML = wins; 
 
    losesP.innerHTML = loses; 
 
    guessLeft.innerHTML = guessesLeft; 
 
    letterGuessed.innerHTML = guessedLetters.join(','); 
 
} 
 

 
function win() { 
 
    wins++; 
 
    resetGame(); 
 
} 
 

 
function lost() { 
 
    loses++; 
 
    resetGame(); 
 
} 
 

 
function fail(letter) { 
 
    guessesLeft--; 
 
    guessedLetters.push(letter); 
 
} 
 

 
function resetGame() { 
 
    guessesLeft = 12; 
 
    guessedLetters = []; 
 
    letterToGuess = letters[Math.floor(Math.random() * letters.length)]; 
 
    console.log("Letter to guess: " + letterToGuess); 
 
}

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

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>The Guessing Game</title> 
 
</head> 
 

 
<body> 
 
    <div id="psychicAct"> 
 
    <h1>The Guessing Game</h1> 
 
    <h3>Wins: 
 
     <p id="wins"></p> 
 
    </h3> 
 
    <h3>Loses: 
 
     <p id="loses"></p> 
 
    </h3> 
 
    <h3>Guess left: 
 
     <p id="guessLeft"></p> 
 
    </h3> 
 
    <p>Guess what letter I'm thinking of:</p> 
 
    <p id="guessed"></p> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-02-16 11:18:34 Weedoze

Благодарим за помощь! И спасибо за советы по торможению функций (гораздо проще читать). Как бы я привел как код HTML, так и код javascript вместе, поскольку они теперь разделены. Я попытался, но кажется, что эта часть не работает на моем компьютере. – EDavidson

Просто добавьте javascript внутри '' – Weedoze

Благодарим вас за ответ. Да, я включил , но я не могу заставить его работать. Я предполагаю, что HTML-код не входит в раздел

несколько вещей:

вам нужно заполнить, чтобы показать результаты.
несколько закрывающих тегов в переменной html отсутствуют
вам нужно найти что-заполнитель и отображать результат, когда результаты изменение:

<div id="psychicAct"> 
 
    <h1>The Guessing Game</h1>  
 
    <div id="results"><p>Guess what letter I'm thinking of:</p></div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    var psychicLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; 
 
    var youWin = 0; 
 
    var youLose = 0; 
 
    var guessesLeft = 13; 
 
    var guessedLetters = []; //Array to capture user letter input 
 
    document.onkeyup = function(event) { 
 
     var yourGuess = event.key; //variable to capute user's guess 
 
     guessedLetters.push(yourGuess); //This is suppose to capture letters  entered by the user  
 
     var psychicAns = psychicLetters[Math.floor(Math.random() * psychicLetters.length)]; 
 
     //If your guess matches the psychic's guess, 
 
     //a point is added to the "Wins" tally and the guesses tally restarts. 
 
     if (yourGuess === psychicAns) { 
 
     youWin++; 
 
     guessesLeft = 12; 
 
     } 
 
     //If your does not not match the psychic's guess, your number of guesses remaining are deducted. 
 
     else { 
 
     guessesLeft--; 
 
     } 
 
     //If the guesses remaining equals 0, you lose, an increment is added to the "Losses" tally and the points restart. 
 
     if (guessesLeft === 0) { 
 
     youLose++; 
 
     guessesLeft = 12; 
 
     } 
 
     var html = "<p>Guess what letter I'm thinking of:</p>" + 
 
     "<p>Wins: " + youWin + "</p>" + 
 
     "<p>Loses: " + youLose + "</p>" + 
 
     "<p>Guesses Remaining: " + guessesLeft + "</p>" + 
 
     "<p>Guessed Letter: " + guessedLetters.join(', ') + "</p>" ; //Show guessed  letters heredocument.querySelector("#psychicAct").innerHTML = html; 
 
     
 
     document.getElementById("results").innerHTML = html; 
 
    } 
 
    </script>

источник

2017-02-16 11:16:28

Обратите внимание, что вам нужно нажать на пример выход выше, чтобы дать ему фокус, прежде чем он примет ввод на клавиатуре –

Смежные вопросы