Re-organised the html course

010 Intro to Animation/README.md

@@ -83,12 +83,18 @@ A function has the following rules
 * add the open backet for your function {
 * close your function with }
 
-````function
+````javascript
 function sizeImage() {
 
 }
 ````
 
 Link your function to the image
 -----
-Now that you have created your first function you now need to add the 
+Now that you have created your first function you now need to add the method 
+to the image using the function name.
+````html
+function sizeImage() {
+
+}
+````

011 Intro to Animation - Balloon Game/animation.js

@@ -89,6 +89,9 @@ function stop() {
 		//increase the score to 100
 		score += 100;
 		scoreDiv.innerHTML = score;
+
+		//adding another attempt so you cant get back here
+		blownUpAttempts++;
 	} else {
 		scoreDiv.innerHTML = 0;
 		resetGame();

011 Intro to Animation - Balloon Game/index.html

@@ -13,8 +13,10 @@ <h1>CoderDojo Balloon Game - Blow It Up </h1>
 			</div>
 
 			<div id="scoreDiv">
-				<div id="scoreTitle">SCORE</div>
-				<div id="score">0</div>
+				<div id="scoreTitle" class="resultHeader">SCORE</div>
+				<div id="score" class="resultAmount">0</div>
+				<div id="scoreTitle" class="resultHeader">LIVES LEFT</div>
+				<div id="score" class="resultAmount">0</div>
 
 				<button id="stop" onclick="stop()">STOP</button>	
 			</div>

011 Intro to Animation - Balloon Game/style.css

@@ -37,7 +37,7 @@ div#scoreDiv {
 	background-color: navy;
 }
 
-div#scoreTitle {
+div.resultHeader {
 	font-size: 20px;
 	width: 100%;
 	font-weight: bold;
@@ -46,7 +46,7 @@ div#scoreTitle {
 }
 
 
-div#score {
+div.resultAmount {
 	font-size: 60px;
 	width: 100%;
 	font-weight: bold;

012 Completed Balloon Game/README.md

@@ -0,0 +1,2 @@
+010 Intro to Animation Balloon Game - HTML Course @ CoderDojo DCU
+===================================

012 Completed Balloon Game/animation.js

@@ -0,0 +1,212 @@
+//get the random number where the balloon will below
+var maxBlows=0;
+
+//the score value
+var score;
+
+//blown up attempts
+var blownUpAttempts;
+
+//increase the size
+var increaseSizeBy = 50;
+
+//this will be our image
+var logo;
+
+//boom div
+var boom;
+
+//game over div
+var gameOver;
+
+//score div
+var scoreDiv;
+
+//increase the score by
+var increaseScoreBy;
+
+//current life
+var livesRemaining;
+
+//lives left div
+var livesLeft;
+
+// High score div
+var highScore;
+
+//reset the game
+function resetGame(increaseBy) {
+
+	//get random number between 0-10
+	maxBlows = Math.floor(Math.random()*11);
+
+	//you starting a new balloon here
+	blownUpAttempts = 0;
+
+	//hide the boom
+	boom.style.display="none";
+
+	//display the image
+	logo.style.display="block";
+
+	//set the lives left
+	livesLeft.innerHTML = livesRemaining;
+
+	//score div
+	scoreDiv = document.getElementById("score");
+
+	//reset the size
+	logo.style.width="150px";
+
+	//increase the score, this will increase by level
+	increaseScoreBy += increaseBy;
+}
+
+//resets the values
+function resetGameValues() {
+	score = 0;
+	livesRemaining = 3;
+	increaseScoreBy=0;
+}
+
+//starts the game
+function startGame() {
+
+	//reset the game values
+	resetGameValues();
+
+	//get the image
+	logo = document.getElementById("logoDiv");
+
+	//get the lives left div
+	livesLeft = document.getElementById("livesLeft");
+
+	// boom div
+	boom = document.getElementById("boom");
+
+	//high score
+	highScore = document.getElementById("highScore");
+	highScore.style.display="none";
+
+	//resets the max baloon size
+	resetGame(10);
+
+	//hide the game over div
+	gameOver = document.getElementById("gameOver");
+	gameOver.style.display="none";
+
+	//reset score to zero
+	scoreDiv.innerHTML = score;
+}
+
+//resizes the image
+function blow() {
+
+	//its another blow
+	blownUpAttempts++;
+
+	//you loose you have exceed the blows
+	if(blownUpAttempts > maxBlows) {
+		boomBallon();
+	} else { //successful blow
+		successfulBlow();
+	}
+}
+
+function happyWithScore() {
+	//display the score
+	var result = document.getElementById("result");
+	result.innerHTML="Well done, high score is: " + score;
+
+	//show the widgets
+	highScore.style.display = "block";
+	logo.style.display = "none";
+}
+
+//boom you lost 
+function boomBallon() {
+
+	//show the boom
+	boom.style.display="block";
+
+	//hide the logo
+	logo.style.display="none";
+}
+
+//good blow
+function successfulBlow() {
+
+	//get the current width
+	var width = parseInt(logo.offsetWidth);
+
+	//Set the width value + new size;
+	width = width + increaseSizeBy;
+
+	//increase the image size
+	logo.style.width = width+"px";
+
+	//increase the score
+	score += increaseScoreBy;
+
+	//display the score
+	scoreDiv.innerHTML = score;
+}
+
+//stop blowing the baloon	
+function tieTheBalloon() {
+
+	if(livesRemaining > 0) {
+		//if you have hit the jackpot
+		if(blownUpAttempts == maxBlows) {
+			moveToNextLevel();
+		} else {
+			lostLife();
+		}
+	} else {
+		startGame();
+	}
+}
+
+
+//You passed this level
+function moveToNextLevel() {
+
+	//increase the score by 100
+	score += 100;
+	scoreDiv.innerHTML = score;
+
+	//reset game and increase the scoring
+	resetGame(10);
+}
+
+//lost a life
+function lostLife() {
+	//lost life
+	livesRemaining--;
+
+	//set the score to zero
+	score = 0;
+	scoreDiv.innerHTML = score;
+
+	//game over you lose
+	if(livesRemaining == 0) {
+
+		//end of life
+		logo.style.display="none";	
+		boom.style.display="none";
+		gameOver.style.display="block";
+
+		//set the lives left
+		livesLeft.innerHTML = livesRemaining;
+	} else { //lives remaining
+
+		//end of life
+		logo.style.display="none";	
+		boom.style.display="block";
+
+		//reset the game
+		resetGame(0);
+	}
+
+}
+

012 Completed Balloon Game/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<title>Blow it up - Can you beat the Game?</title>
+		<link rel="stylesheet" type="text/css" href="style.css" />
+		<script type="text/javascript" src="animation.js"></script>
+	</head>
+
+	<body onload="startGame()">
+		<div id="header">
+
+			<div id="titleDiv">
+					<div id="titleInner">
+						<h1>CoderDojo Balloon Game </h1>
+					</div>
+					<h1 id="canYou">Can you beat the Balloon?</h1>
+			</div>
+			<div id="stopButton">
+						<button id="stop" onclick="tieTheBalloon()">Tie It</button>
+			</div>
+
+			<div id="scoreDiv">
+				<div id="scoreTitle" class="resultHeader">SCORE</div>
+				<div id="score" class="resultAmount">0</div>
+				<div id="livesLeftTitle" class="resultHeader">LIVES LEFT</div>
+				<div id="livesLeft" class="resultAmount">3</div>
+
+				<button id="happy" class="nextButton" onclick="happyWithScore()">Happy</button>			
+			</div>
+
+		</div>
+
+		<div id="logoDiv">
+			<img src="coder.png" onclick="blow()" id ="image"/>
+		</div>
+
+		<div id="boom">
+			BooooooooM!!
+			<br/>
+			<button id="nextLife" class="nextButton" onclick="lostLife()">Next Life</button>
+		</div>
+
+		<div id="highScore">
+			<div id="result">
+
+			</div>
+			<button class="nextButton" onclick="startGame()">New Game</button>			
+		</div>
+
+		<div id="gameOver">
+			<blink>Game Over!!</blink>
+			<br/>
+			<button id="newGame" class="nextButton" onclick="startGame()">New Game</button>
+		</div>
+
+		<blink>
+			<h2>Blow It, Blow It, Hurry Up</h2>
+		</blink>
+		<h3>Rules</h3>
+		<ul>
+			<li>Blow up the balloon by clicking on the logo</li>
+			<li>You never know when its going to blow</li>
+			<li>The balloon has a max blows of 11</li>
+			<li>You get 10 points for every successful blow</li>
+			<li>If you think the balloon is at its max, hit the tie button </li>
+			<li>If you quit too early you loose a life</li>
+			<li>If you blow too many times you loose a life</li>
+			<li>If you guess right you get extra 100 points</li>
+			<li>If you guess right your next round blows increase by 10 points</li>
+			<li>Challenge yourself and see what your highest score is</li>
+			<li>If you are happy with your highest score hit "Happy" to end the game</li>
+		</ul>
+		<h3>Are you the coderdojo balloon champion?</h3>
+	</body>
+</html>