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 variablesvar 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 fieldsvar input = document.querySelector("#input");var output = document.querySelector("#output");//The buttonvar button = document.querySelector("button");button.addEventListener("click", clickHandler, false);button.style.cursor = "pointer";//Listen for enter key presseswindow.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 gameif (guessesRemaining < 1){endGame();}}elseif(playersGuess < mysteryNumber){output.innerHTML = "That's too low." + gameState;//Check for the end of the gameif (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 buttonbutton.removeEventListener("click", clickHandler, false);button.disabled = true;//Disable the enter keywindow.removeEventListener("keydown", keydownHandler, false);//Disable the input fieldinput.disabled = true;}</script>
No comments:
Post a Comment