Improve the game guessing number

In previous game, we have leant some new properties of HTML 5.
In this version, we learn some new function in javascript below:
 – to generate a random number from 1 to 100: Math.floor(Math.random() * 100);
 – to catch the event keydown in all over the site: window.addEventListener(“keydown”, keydownHandler, false);
– to remove event Handler when we don’t want that element (ex: button) catch an event: button.removeEventListener(“click”, clickHandler, false);
Example:

I am thinking of a number between 0 and 99.

 

In this version, we have maximum 10 times to guess. The game will end if we run out of guess – time or we guess the right number. Another new feature is that after filling the number, user can press enter keyboard instead of click on guess button.

<!doctype html>

<meta charset=”utf-8″>

<title>Number guessing game</title>

<p id=”output”>I am thinking of a number between 0 and 99.</p>

<input id=”input” type=”text” placeholder=”Enter your guess…” autofocus>

<button>guess</button>

<script>

//Game variables

var mysteryNumber = Math.floor(Math.random() * 100);

console.log(mysteryNumber);

var playersGuess = 0;

var guessesRemaining = 10;

var guessesMade = 0;

var gameState = “”;

var gameWon = false;

//The input and output fields

var input = document.querySelector(“#input”);

var output = document.querySelector(“#output”);

//The button

var button = document.querySelector(“button”);

button.addEventListener(“click”, clickHandler, false);

button.style.cursor = “pointer”;

//Listen for enter key presses

window.addEventListener(“keydown”, keydownHandler, false);

function keydownHandler(event)

{

if(event.keyCode === 13)

{

validateInput();

}

}

function clickHandler()

{

validateInput();

}

function validateInput()

{

playersGuess = parseInt(input.value);

if(isNaN(playersGuess))

{

output.innerHTML = “Please enter a number.”;

}

else

{

playGame();

}

}

function playGame()

{

guessesRemaining = guessesRemaining – 1;

guessesMade = guessesMade + 1;

gameState = ” Guess: ” + guessesMade + “, Remaining: ” + guessesRemaining;

playersGuess = parseInt(input.value);

if(playersGuess > mysteryNumber)

{

output.innerHTML = “That’s too high.” + gameState;

//Check for the end of the game

if (guessesRemaining < 1)

{

endGame();

}

}

else 

if(playersGuess < mysteryNumber)

{

output.innerHTML = “That’s too low.” + gameState;

//Check for the end of the game

if (guessesRemaining < 1)

{

endGame();

}

}

else if(playersGuess === mysteryNumber)

{

gameWon = true;

endGame();

}

}

function endGame()

{

if (gameWon)

{

output.innerHTML = “Yes, it’s ” + mysteryNumber + “!” + “<br>” + “It only took you ” + guessesMade + ” guesses.”;

}

else

{

output.innerHTML = “No more guesses left!” + “<br>” + “The number was: ” + mysteryNumber + “.”;

}

//Disable the button

button.removeEventListener(“click”, clickHandler, false);

button.disabled = true;

//Disable the enter key

window.removeEventListener(“keydown”, keydownHandler, false);

//Disable the input field

input.disabled = true;

}

</script>

Leave a Reply

Your email address will not be published. Required fields are marked *