The code breaker game should work as if the number is there then there would be a transfer icon or an ok icon, however, in every case it shows that none of the 10 digits are present. I am stuck in trying to figure it out. A little light towards the solution would be super helpful. I have included both the JS and HTML as well.
let answer = document.getElementById('answer');
let attempt = document.getElementById('attempt');
function guess() {
let input = document.getElementById('user-guess');
//add functionality to guess function here
if (answer.value == ' ' || attempt.value == ' ') {
setHiddenFields();
}
//Validate function call
if (validateInput(input.value) == false) {
return;
} else {
attempt.value++;
}
//Get results function
if (getResults(input.value) == true) {
setMessage("You Win! :)");
showAnswer(true);
showReplay();
} else if (attempt.value >= 10) {
setMessage("You Lose! :(");
showAnswer(false);
showReplay();
} else {
setMessage("Incorrect, try again.");
}
}
//implement new functions here
function setHiddenFields() {
answer.value = Math.floor(Math.random() * 10000).toString();
while (answer.value.length < 4) {
answer.value = "0" + answer.value;
}
attempt.value = "0";
}
function setMessage(input) {
document.getElementById('message').innerHTML = input;
}
function validateInput(input) {
if (input.length == 4) {
return true;
} else {
setMessage("Guesses must be exactly 4 characters long.");
return false;
}
}
function getResults(input) {
let html = '<div class="row"><span class="col-md-6">' + input + '</span><div class="col-md-6">';
for (i = 0; i < input.length; i++) {
if (input.charAt(i) == answer.value.charAt(i)) {
html += '<span class="glyphicon glyphicon-ok"></span>';
} else if (answer.value.indexOf(input.charAt(i)) > -1) {
html += '<span class="glyphicon glyphicon-transfer"></span>';
} else {
html += '<span class="glyphicon glyphicon-remove"></span>';
}
}
html += '</div></div>';
document.getElementById('results').innerHTML += html;
if (input == answer.value) {
return true;
} else {
return false;
}
}
function showAnswer(input) {
let code = document.getElementById('code');
if (input == true) {
code.className += " success";
} else {
code.className += " failure";
}
code.innerHTML = answer.value;
}
function showReplay() {
document.getElementById('guessing-div').style.display = "none";
document.getElementById('replay-div').style.display = "block";
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="http://ift.tt/2apRjw3" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/main.css" />
<title>Code Breaker</title>
</head>
<body>
<div class="container">
<div class="col-md-6">
<h1>Code Breaker</h1>
<div class="row">
<p id="code" class="code">
<strong>????</strong>
</p>
</div>
<div id="guessing-div" class="row form-inline">
<input type="hidden" id="attempt" />
<input type="hidden" id="answer" />
<input id="user-guess" class="form-control" type="number" />
<button class="btn btn-primary" onclick="guess()">Submit Guess</button>
</div>
<div id="replay-div" class="row" style="display:none">
<button class="btn btn-primary" onclick="window.location.reload()">Play again?</button>
</div>
<div class="row">
<p id="message" class="message"></p>
</div>
<div class="row" id="results">
<div class="row">
<strong class="col-md-6">Guess</strong>
<strong class="col-md-6">Result</strong>
</div>
</div>
</div>
<div class="col-md-6">
<h2>Objective:</h2>
<p class="lead">Guess the randomly generate 4 digit code.</p>
<h2>Rules:</h2>
<ul>
<li>Each guess must consist of 4 numberic characters.</li>
<li>Numbers may be used more than once!</li>
<li>You win only if your guess is an exact match.</li>
<li>You lose if you fail to guess the code under 10 guesses.</li>
<li>
<span class="glyphicon glyphicon-ok"></span> Indicates a number is in the correct place.
<li>
<span class="glyphicon glyphicon-transfer"></span> Indicates a number is part of the code, but not in the right position.
</li>
<li>
<span class="glyphicon glyphicon-transfer"></span> Doesn't consider how many times a number exists in the code.
</li>
<li>
<span class="glyphicon glyphicon-remove"></span> Indicates a number is not part of the code.
</li>
</ul>
</div>
</div>
<script src="assets/main.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire