Last active
August 29, 2015 14:02
-
-
Save willrichman/765be0b0e9a5aab4c6d5 to your computer and use it in GitHub Desktop.
Guessing Game Loop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Guess the number!</title> | |
<style> | |
body { | |
background-color: #0A212A; | |
color: #A3BCC5; | |
font-family: Verdana, sans-serif; | |
font-size: 18px; | |
text-align: center; | |
} | |
div { | |
border-radius: 5px; | |
background-color: #253C45; | |
width: 90%; | |
height: 250px; | |
margin: 0 auto; | |
} | |
#header { | |
width: 100%; | |
height: 60px; | |
} | |
#title { | |
font-size: 35px; | |
vertical-align: middle; | |
line-height: 60px; | |
} | |
#gametext1 { | |
padding-top: 1em; | |
} | |
#answerBox { | |
width: 15%; | |
} | |
input { | |
font-size: 18; | |
font-family: Verdana, sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="header"> | |
<p id="title">Guessing game</p> | |
</div> | |
<div id="gameboard"> | |
<p id="gametext1">Guess the number I'm thinking of!</p> | |
<input type="text" id="answerBox" placeholder="Type your guess and press enter!" onkeydown="tryGame(this)"/> | |
<p id="playerGuessText"> </p> | |
<p id="guessCountText">You have 7 guesses left.</p> | |
<input type="button" id="reset" onmouseup="resetGame()"/ value="Reset the game" disabled="true"> | |
</div> | |
<script type="text/javascript"> | |
var guess, answer, guessesLeft, playing; | |
guessesLeft = 7; | |
playing = true; | |
/* Create a random number between 1 and 100 */ | |
var getRandom = function(min, max) { | |
return Math.floor(Math.random() * (max - min)) + min; | |
} | |
answer = getRandom(1,100); | |
console.log(answer); | |
/* Print the number of guesses left in the game */ | |
var printGuesses = function() { | |
if (guessesLeft != 1) { | |
document.getElementById("guessCountText").innerHTML = "You have " + guessesLeft + " guesses left." | |
} | |
else { | |
document.getElementById("guessCountText").innerHTML = "You have " + guessesLeft + " guess left." | |
} | |
} | |
/* Main game function to check the user's answer */ | |
var game = function(ele) { | |
if (event.keyCode == 13) { | |
guess = ele.value; | |
document.getElementById("playerGuessText").innerHTML = "Your guess was " + guess; | |
if (guess > answer) { | |
document.getElementById("gametext1").innerHTML = "Try again! You're too high!"; | |
guessesLeft -= 1; | |
printGuesses(); | |
} | |
else if (guess < answer) { | |
document.getElementById("gametext1").innerHTML = "Try again! You're too low!" | |
guessesLeft -= 1; | |
printGuesses(); | |
} | |
else { | |
console.log("Dagnabit, they got me!"); | |
document.getElementById("gametext1").innerHTML = "You win! The number was " + answer; | |
playing = false; | |
} | |
if (guessesLeft === 0 && playing = true) { | |
document.getElementById("gametext1").innerHTML = "You lose! The number was " + answer; | |
playing = false; | |
} | |
} | |
} | |
/* Restarts the game and resets all game text */ | |
var resetGame = function() { | |
document.getElementById("reset").disabled = true; | |
playing = true; | |
guessesLeft = 7; | |
answer = getRandom(1,100); | |
document.getElementById("gametext1").innerHTML = "Guess the number I'm thinking of!"; | |
document.getElementById("answerBox").value = ""; | |
document.getElementById("playerGuessText").innerHTML = " "; | |
printGuesses(); | |
} | |
/* Checks if a game is currently running each time the user presses a key */ | |
var tryGame = function(ele) { | |
if (playing) { | |
game(ele); | |
} | |
if (!playing) { | |
gameOver(); | |
} | |
} | |
/* Updates the game text and enables the resetGame button */ | |
var gameOver = function() { | |
document.getElementById("playerGuessText").innerHTML = "Game over! Press reset to start a new game!"; | |
document.getElementById("reset").disabled = false; | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Guess a number!</title> | |
<style> | |
body { | |
background-color: #0A212A; | |
color: #A3BCC5; | |
font-family: Verdana, sans-serif; | |
font-size: 18px; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<p>Guess a number!</p> | |
<script> | |
var random; | |
var findHighLow = function(answer, guess) { | |
if (parseInt(guess) < answer) { | |
return "low!" | |
} | |
else { | |
return "high!" | |
} | |
} | |
var guessingGame = function(answer) { | |
var guess, highLow; | |
guess = prompt("What's my number?"); | |
highLow = findHighLow(answer, guess); | |
if (guess == answer) { | |
console.log("Dagnabit, they got me!") | |
return ["You win!", true]; | |
} | |
else { | |
return ["Sorry! Your guess was too " + highLow, false]; | |
} | |
} | |
var createAnswer = function(min, max) { | |
return Math.floor(Math.random() * (max - min) + min) | |
} | |
random = createAnswer(1, 100) | |
for (tries = 1; tries < 7; tries++) { | |
var result = guessingGame(random) | |
alert(result[0]) | |
if (result[1]) { | |
break; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment