willrichman/guessgameobject.html

## guessgameobject.html
<!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">&nbsp;</p>
      <p id="guessCountText">You have 7 guesses left.</p>
      <input type="button" id="reset" onmouseup="game.resetGame()"/ value="Reset the game" disabled="true">
    </div>


    <script type="text/javascript">
      var guess, random, playing, game;
      playing = true;

      /* Create a random number between 1 and 100 */
      var getRandom = function(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }

      random = getRandom(1,100);
      console.log(random);

      function GuessGame(answer) {
        this.answer = answer;
        this.guessesLeft = 7

        /* Print the number of guesses left in the game */
        this.printGuesses = function() {
          if (this.guessesLeft != 1) {
            document.getElementById("guessCountText").innerHTML = "You have " + this.guessesLeft + " guesses left."
          }
          else {
            document.getElementById("guessCountText").innerHTML = "You have " + this.guessesLeft + " guess left."
          }
        }

        /* Main game function to check the user's answer */
        this.play = function(ele) {
          if (event.keyCode == 13) {
            guess = ele.value;
            document.getElementById("playerGuessText").innerHTML = "Your guess was " + guess;

            if (guess > this.answer) {
              document.getElementById("gametext1").innerHTML = "Try again! You're too high!";
              this.guessesLeft -= 1;
              this.printGuesses();
            }

            else if (guess < this.answer) {
              document.getElementById("gametext1").innerHTML = "Try again! You're too low!"
              this.guessesLeft -= 1;
              this.printGuesses();
            }

            else {
              console.log("Dagnabit, they got me!");
              document.getElementById("gametext1").innerHTML = "You win! The number was " + this.answer;
              playing = false;
            }

            if (this.guessesLeft === 0 && playing == true) {
              document.getElementById("gametext1").innerHTML = "You lose! The number was " + this.answer;
              playing = false;
            }
          }
        }

        /* Restarts the game and resets all game text */
        this.resetGame = function() {
          document.getElementById("reset").disabled = true;
          playing = true;
          this.guessesLeft = 7;
          this.answer = getRandom(1,100);
          document.getElementById("gametext1").innerHTML = "Guess the number I'm thinking of!";
          document.getElementById("answerBox").value = "";
          document.getElementById("playerGuessText").innerHTML = "&nbsp";
          this.printGuesses();
        }

        /* Updates the game text and enables the resetGame button */
        this.gameOver = function() {
          document.getElementById("playerGuessText").innerHTML = "Game over!  Press reset to start a new game!";
          document.getElementById("reset").disabled = false;
        }
      }


      game = new GuessGame(random);

      /* Checks if a game is currently running each time the user presses a key */
      var tryGame = function(ele) {
        if (playing) {
          game.play(ele);
        }
        if (!playing) {
          game.gameOver();
        }
      }

    </script>
  </body>

</html>
	<!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="game.resetGame()"/ value="Reset the game" disabled="true">
	</div>


	<script type="text/javascript">
	var guess, random, playing, game;
	playing = true;

	/* Create a random number between 1 and 100 */
	var getRandom = function(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
	}

	random = getRandom(1,100);
	console.log(random);

	function GuessGame(answer) {
	this.answer = answer;
	this.guessesLeft = 7

	/* Print the number of guesses left in the game */
	this.printGuesses = function() {
	if (this.guessesLeft != 1) {
	document.getElementById("guessCountText").innerHTML = "You have " + this.guessesLeft + " guesses left."
	}
	else {
	document.getElementById("guessCountText").innerHTML = "You have " + this.guessesLeft + " guess left."
	}
	}

	/* Main game function to check the user's answer */
	this.play = function(ele) {
	if (event.keyCode == 13) {
	guess = ele.value;
	document.getElementById("playerGuessText").innerHTML = "Your guess was " + guess;

	if (guess > this.answer) {
	document.getElementById("gametext1").innerHTML = "Try again! You're too high!";
	this.guessesLeft -= 1;
	this.printGuesses();
	}

	else if (guess < this.answer) {
	document.getElementById("gametext1").innerHTML = "Try again! You're too low!"
	this.guessesLeft -= 1;
	this.printGuesses();
	}

	else {
	console.log("Dagnabit, they got me!");
	document.getElementById("gametext1").innerHTML = "You win! The number was " + this.answer;
	playing = false;
	}

	if (this.guessesLeft === 0 && playing == true) {
	document.getElementById("gametext1").innerHTML = "You lose! The number was " + this.answer;
	playing = false;
	}
	}
	}

	/* Restarts the game and resets all game text */
	this.resetGame = function() {
	document.getElementById("reset").disabled = true;
	playing = true;
	this.guessesLeft = 7;
	this.answer = getRandom(1,100);
	document.getElementById("gametext1").innerHTML = "Guess the number I'm thinking of!";
	document.getElementById("answerBox").value = "";
	document.getElementById("playerGuessText").innerHTML = "&nbsp";
	this.printGuesses();
	}

	/* Updates the game text and enables the resetGame button */
	this.gameOver = function() {
	document.getElementById("playerGuessText").innerHTML = "Game over! Press reset to start a new game!";
	document.getElementById("reset").disabled = false;
	}
	}


	game = new GuessGame(random);

	/* Checks if a game is currently running each time the user presses a key */
	var tryGame = function(ele) {
	if (playing) {
	game.play(ele);
	}
	if (!playing) {
	game.gameOver();
	}
	}

	</script>
	</body>

	</html>