GrowingBubbles/index.html

<!doctype html>
<html>
	<head>
		<title>Growing Bubbles</title>
		<meta charset="utf-8" />
		<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		
		<script>
			$(document).ready(function() {

				// kill the ability to highlight things on the page, since that's annoying
				function killCopy(e) {
					return false;
				}
				function reEnable() {
					return true;
				}
				document.onselectstart=new Function ("return false");
				if (window.sidebar) {
					document.onmousedown=killCopy;
					document.onclick=reEnable;
				}

				// set up some variables I'll be needing
				var colorsArray = ["blue","green","red"];
				var round = 0;
				var wrongClick = 0;

				// this is the main loop
				var showBubbles = setInterval(function(){

					// increment the round number
					round += 1;
					document.getElementById("yourRound").innerHTML = round;

					// make some new bubbles
					for (i = 0; i < 4; i++) {
						var theTop = Math.floor(Math.random()*440);
						var theLeft = Math.floor(Math.random()*640);
						var theColor = colorsArray[Math.floor(Math.random()*3)];
				        $("#container").append("<div class='bubble' style='top: " + theTop + "px; left: " + theLeft + "px; background-color: " + theColor + "'></div>");
					}
				    
				    // grow
				    $(".bubble").animate({
					    width: "+=40px",
					    height: "+=40px",
					}, 2500);
				    
				    // shrink
				    $( ".bubble" ).animate({
					    width: "0px",
					    height: "0px",
					}, 1500);

				    // when a bubble is clickedl check if blue or not
					$(".bubble").click(function(){
						if (this.style.backgroundColor == "blue") {
							$(this).hide();
						} else {
							clearInterval(showBubbles);
							wrongClick = 1;
							$(".bubble").stop(true, true);
							this.style.zIndex = "3";
							$(this).animate({
							    width: "10000px",
							    height: "10000px",
							    left: "-5000px",
							    top: "-5000px"
							}, 5000);
							var bgColor = this.style.backgroundColor;
							setTimeout(function(){
								document.getElementById("container").style.backgroundColor = bgColor;
								document.getElementById("container").innerHTML = "<h2 class='gameOver'>You clicked the wrong bubble!</h2><br/><h2 class='again'>Play Again</h2>";
								$(".again").click(function(){
									location.reload();
								});
							}, 2000);
						}
					});

					// if you miss a blue bubble
					setTimeout(function(){
						bubbleArray = document.getElementsByClassName("bubble");
						if (wrongClick == 0) {
							for (j = 0; j < bubbleArray.length; j++) {
								if (bubbleArray[j].style.backgroundColor == "blue" & bubbleArray[j].style.display != "none") {
									clearInterval(showBubbles);
									$(".bubble").stop(true, true);
									document.getElementById("container").style.backgroundColor = "blue";
									document.getElementById("container").innerHTML = "<h2 class='gameOver'>You missed a blue one!</h2><br/><h2 class='again'>Play Again</h2>";

									$(".again").click(function(){
										location.reload();
									});
								}
							}
						}
					}, 4000);

				}, 5000);

			});
		</script>

		<style>
			body {
				font-family: "Indie Flower", "Open Sans Condensed", sans-serif;
			}
			.bubble {
			    height:0px;
			    width: 0px;
			    background: blue;
			    border-radius: 2500px;
			    position: absolute;
			}
			#container {
			    height: 500px;
			    width: 700px;
			    margin: auto;
			    position: relative;
			    background: #f2f2f2;
			    border-radius: 10px;
			    overflow: hidden;
			    text-align: center;
			}
			#container h2 {
				color: #FFF;
				position: relative;
			}
			#container .gameOver {
				top: 170px;
			}
			#container .again {
				border: solid 2px #FFF;
				border-radius: 4px;
				top: 120px;
    			display: inline-block;
    			padding: 10px 30px;
    			cursor: pointer;
			}
			#header, #instructions {
				margin: auto;
				text-align: center;
			}
			#header h1 {
				margin: 3px auto;
			}
			.color {
				color: blue;
			}
		</style>
	</head>

	<body>
		<iframe width="0px" height="0px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/17319478&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
		<div id="header">
			<h1>Growing Bubbles</h1>
		</div>
		<div id="container"></div>
		<div id="instructions">
			<span>Click only the bubbles that are</span>
			<span class="color">BLUE</span>
			<span>. Don't leave any of the <span class="color">BLUE</span> bubbles on the screen!</span>
			<p>Round: <span id="yourRound">1</span></p>
		</div>
	</body>
</html>