joshfry/dragon-slayer-game.html

## dragon-slayer-game.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
  <style>
    * {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    html { font-size: 100%; color: #444; }
    body { font: 1em/1.5 sans-serif; max-width: 55em; margin: auto; padding: 0 1em; background: #0C1021; }
    h1 { margin: 1em 0; line-height: 1; color: #e74c3c }
    #results { font-family: monospace; font-size: 1.25em; min-height: 20em; padding: 1em; background: #0C1021; color: #61CA32; border: 2px solid #1a2246; border-radius: .25em; }
    #results p + p { margin-top: 1em }
    #playGame { font-size: .9em; border: none; margin: 1em 0; padding: .75em 1em; background: #2370cf; color: #fff; border-radius: .25em; }
    #playGame:focus { outline: none }
    #playGame:hover { cursor: pointer; background: #e74c3c }
    #playCount { float: right; margin: 1em 0; padding: .75em 1em; }
  </style>
</head>
<body>

<h1>Dragon Slayer</h1>
<div id="results"></div>
<button id ="playGame">Play</button>
<div id="playCount"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

// -------------------------------------------------------------------
// Dragon Slayer Game
// -------------------------------------------------------------------

var $results      = $('#results'),
    $playGame     = $('#playGame'),
    $playCount    = $('#playCount'),
    $playCounter  = 1;

$playGame.click(function() {
  $results.empty();
  playGame();
  $(this).html('Replay');
  $playCount.html($playCounter);
  $playCounter++;
});

function displayMessage (message) {
  $results.append('<p>' + message + '</p>');
};

function playGame() {

  var slaying           = true,
      dragonHealth      = 10,
      youHit            = Math.floor(Math.random() * 2),
      damageThisRound   = Math.floor(Math.random() * 5 + 1);

  while(slaying) {

    if (youHit) {
      displayMessage('WHACK! You struck the dragon with your sword :)');

      var dragonStatus = dragonHealth -= damageThisRound;

      displayMessage('Dragon\'s Health: ' + dragonStatus);

      if (dragonHealth <= 0) {
        displayMessage('BOOM! The dragon drops to the ground. You slayed the dragon!');

        slaying = false;
      }
    }

    else {
      displayMessage('The dragon swallowed you alive. You\'re dead :(');
      slaying = false;
    }

    youHit = Math.floor(Math.random() * 2);
  };
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width">
	<style>
	* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	html { font-size: 100%; color: #444; }
	body { font: 1em/1.5 sans-serif; max-width: 55em; margin: auto; padding: 0 1em; background: #0C1021; }
	h1 { margin: 1em 0; line-height: 1; color: #e74c3c }
	#results { font-family: monospace; font-size: 1.25em; min-height: 20em; padding: 1em; background: #0C1021; color: #61CA32; border: 2px solid #1a2246; border-radius: .25em; }
	#results p + p { margin-top: 1em }
	#playGame { font-size: .9em; border: none; margin: 1em 0; padding: .75em 1em; background: #2370cf; color: #fff; border-radius: .25em; }
	#playGame:focus { outline: none }
	#playGame:hover { cursor: pointer; background: #e74c3c }
	#playCount { float: right; margin: 1em 0; padding: .75em 1em; }
	</style>
	</head>
	<body>

	<h1>Dragon Slayer</h1>
	<div id="results"></div>
	<button id ="playGame">Play</button>
	<div id="playCount"></div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>

	// -------------------------------------------------------------------
	// Dragon Slayer Game
	// -------------------------------------------------------------------

	var $results = $('#results'),
	$playGame = $('#playGame'),
	$playCount = $('#playCount'),
	$playCounter = 1;

	$playGame.click(function() {
	$results.empty();
	playGame();
	$(this).html('Replay');
	$playCount.html($playCounter);
	$playCounter++;
	});

	function displayMessage (message) {
	$results.append('<p>' + message + '</p>');
	};

	function playGame() {

	var slaying = true,
	dragonHealth = 10,
	youHit = Math.floor(Math.random() * 2),
	damageThisRound = Math.floor(Math.random() * 5 + 1);

	while(slaying) {

	if (youHit) {
	displayMessage('WHACK! You struck the dragon with your sword :)');

	var dragonStatus = dragonHealth -= damageThisRound;

	displayMessage('Dragon\'s Health: ' + dragonStatus);

	if (dragonHealth <= 0) {
	displayMessage('BOOM! The dragon drops to the ground. You slayed the dragon!');

	slaying = false;
	}
	}

	else {
	displayMessage('The dragon swallowed you alive. You\'re dead :(');
	slaying = false;
	}

	youHit = Math.floor(Math.random() * 2);
	};
	}

	</script>
	</body>
	</html>