One in a Million Game

index.html

<div id="sound">
		<p>Sound</p>
		<span>
			<a href="#">on</a>
			<a href="#">off</a>
		</span>
		<br>
	</div>
	<div id="currentScore">
		<span>Your highest score:</span>
		<h2></h2>
	</div>
	<hr>
	<div id="gameStart">
		<h1>Heads or Tails</h1>
		<p>How lucky are you feeling?</p>
		<br>
		<br>
		<a href="#" id="heads"><img src="http://scottyzen.com/oneinamillion/heads.png">Heads <p class="badge"></p></a>
		<a href="#" id="tails"><img src="http://scottyzen.com/oneinamillion/tails.png">Tails <p class="badge"></p></a>
	</div>
	<div id="gameFinish">
		<h1>Game over</h1>
		<p id="results"></p>
		<a href="index.html">Go again?</a>
		<hr>
	</div>

	<div id="leaderboard">
		<form style="display:none;">
			<h3>Submit your score</h3>
			<label>Name : </label>
			<input type="text">
			<label>Score : </label>
			<input id="scoreToSubmit" type="number" readonly="readonly" value="1"> 
			<input type="submit" value="submit">
		</form>
	</div>

	<audio id="win" preload="auto">
	  <source src="http://scottyzen.com/oneinamillion/win.mp3" type="audio/mp3">
	</audio>
	<audio id="lose" preload="auto">
	  <source src="http://scottyzen.com/oneinamillion/lose.mp3" type="audio/mp3">
	</audio>

One in a Million Game.markdown

One in a Million Game

A Pen by Scott Kennedy on CodePen.

License.

script.js

var count = 100;
var guess = "";
var headCount = 0;
var tailsCount = 0;
var leaderboard = $('<div id="leaderboard"><label>Name</label><input type="name"></input></div>')

$('#currentScore h2').append(localStorage.getItem('currentScore'));

$('#sound a:nth-child(1)').click(function(){
	localStorage.setItem('soundSwitch','on');
	$('#sound a:nth-child(1)').attr("class","soundActive").siblings().removeClass("soundActive");
});
$('#sound a:nth-child(2)').click(function(){
	localStorage.setItem('soundSwitch','off');
	$('#sound a:nth-child(2)').attr("class","soundActive").siblings().removeClass("soundActive");
});

if(localStorage.getItem('soundSwitch') === 'on'){
	$('#sound a:nth-child(1)').attr("class","soundActive").siblings().removeClass("soundActive");
} else{
	$('#sound a:nth-child(2)').attr("class","soundActive").siblings().removeClass("soundActive");
};



//When heads is clicked
$('#heads').click(function(event){
	event.preventDefault();
	guess = 'Heads';
	headCount += 1
	$('#heads p').show();
});
//When tails is clicked
$('#tails').click(function(event){
	event.preventDefault();
	guess = 'Tails';
	tailsCount += 1
	$('#tails p').show();
});

// small bit of UI to make the coin click look nicer
$('#heads').mousedown(function(){
	$("#heads img").attr('src',"http://scottyzen.com/oneinamillion/headsHover.png");
}).mouseup(function(){
	$("#heads img").attr('src',"http://scottyzen.com/oneinamillion/heads.png");
});
$('#tails').mousedown(function(){
	$("#tails img").attr('src',"http://scottyzen.com/oneinamillion/tailsHover.png");
}).mouseup(function(){
	$("#tails img").attr('src',"http://scottyzen.com/oneinamillion/tails.png");
});



$('#gameStart a').click(function(event){
	//prevent link from clicking
	event.preventDefault();

	// Generate heads or tails randomly
	var randomCoinFlip = Math.round(Math.random()) ? "Heads" : "Tails";

	//show badge count
	$('#heads p').html(headCount);
	$('#tails p').html(tailsCount);

	var correctGuesses;


	

	//if you guess right
	if (guess === randomCoinFlip){
		$('body').effect("highlight", {color: 'green'}, 500);
		count /= 2;
		console.log('win');
		if(localStorage.getItem('soundSwitch') === 'on'){
			$('#win')[0].play();
		};
	}
	// if you guess wrong, end game
	else{
		$('body').effect("highlight", {color: 'red'}, 500);
		if(localStorage.getItem('soundSwitch') === 'on'){
			$('#lose')[0].play();
		};
		// if you guess the first coin toss wrong
		if(count === 100){
			
			$('#results').html('Down at the first fence. :(');
		}
		// display the count after the game is over
		else{
			// total amount of correct guesses
			correctGuesses = headCount + tailsCount -1;

			if(correctGuesses <= parseInt(localStorage.getItem('currentScore'))){
				console.log('you didnt beat your top score this time')
			}
			else{
				localStorage.setItem('currentScore', correctGuesses);
				$('#currentScore h2').html(localStorage.getItem('currentScore'));
			}

			$('#results').html("<br><br><h1>" +correctGuesses + "</h1> Guesses correct <br><br>You had a "+ count + "% chance of getting this far.")
			
			// Add score to be submitted to the leaderboard
			$('#scoreToSubmit').val(correctGuesses);

			// Random facts to be displayed when you reach a certain score
			if (correctGuesses === 2){
				$('#gameFinish').append('<div id="fact">This is roughly the same odds as you seeing a shooting star. If you look up at the nights sky for 30 mins.</div>');
			}else if (correctGuesses === 3){
				$('#gameFinish').append('<div id="fact">This is roughly the same odds as Your baby being delivered by c-section this year.</div>');
			}else if (correctGuesses === 5) {
				$('#gameFinish').append('<div id="fact">You had a better chance of hitting BlackJack than getting this far.</div>');
			};
			
		}

		//show the game results and hide the coins
		$('#gameStart').hide();
		$('#gameFinish').show();
	}
});







// Odds list
// Your baby will be delivered by c-section this year ( 1 in 3 )
// Hitting BlackJack 4.7619% ( 1 in 21 HANDS )
// Being Dealt a Royal Flush 0.000154% ( 1 in 649,740 HANDS )
// Odds oN Wining the Irish Lottery 0.000051340184168% ( 1 in 1,947,792 PEOPLE )
// Having Identical Twins 0.35087719298% ( 1 in 285 Births )
// Being Struck by Lightening ( 1 in 576,000  )
// Finding out your child is a genius. (1 to 250)
// Dating a millionaire. (1 to 215)
// Getting a Hole in One ( 1 in 5000 )

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	border: none;
	font-family: Tahoma,Verdana,Segoe,sans-serif; 

}
body{
	text-align: center;
	background-color: #354557;
	position: relative;
}
a {
	margin: 20px;
	display: inline-block;
	color: #fff;
}
a:active{
	color: #fff;
}
hr{
	clear: both;
}
img{
	float: left;
	max-width: 100%;
	padding-bottom: 10px;
}
h1, h2, h3{
	margin: 20px;
	color: #fff;
}
p{
	color: rgba(255, 255, 255, .8);
}
input{
	-webkit-appearance: none;
	display: inline-block;
	padding: 10px;
	margin-top: 20px;
}
input[type=text]{
	background: #354557;
	border-bottom: solid 2px white;
	color: white;
	margin-right: 50px;
}
input[type=number]{
	background: #354557;
	color: white;
}
#heads, #tails {
	width: 100px;
	position: relative;
	color: rgba(255, 255, 255, .8);
}
.badge {
	display: none;
	background: url('http://scottyzen.com/oneinamillion/img/badge.png') no-repeat;
	color: #fff;
	padding-top: 6px;
	font-size: 14px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 2px;
	width: 29px;
	height: 29px;
}
#gameStart, #gameFinish{
}
#gameStart{}
#gameFinish{
	display: none;
}
#gameFinish a{
	padding: 40px 80px;
}
#sound {
	width: 200px;
	float: left;
}
#currentScore{
	color: rgba(255, 255, 255, .8);
	width: 200px;
	float: right;
}
#fact {
	color: tomato;
	background-color: rgba(1,1,1,.1);
	padding: 2%;
	display: inline-block;
}
#leaderboard{
	margin-top: 100px;
}
.soundActive {
	background-color: tomato;
}