Permalink
Browse files

Re-organised the html course

  • Loading branch information...
noelking committed Jul 14, 2012
1 parent 2bd0993 commit 5decbc36a19cad81b80b89b82a206b4adfbf8ad2
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -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() {
+
+}
+````
@@ -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();
@@ -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>
@@ -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;
@@ -0,0 +1,2 @@
+010 Intro to Animation Balloon Game - HTML Course @ CoderDojo DCU
+===================================
@@ -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);
+ }
+
+}
+
Binary file not shown.
@@ -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>
Oops, something went wrong.

0 comments on commit 5decbc3

Please sign in to comment.