Permalink
Browse files

Give awards randomly!

  • Loading branch information...
1 parent 8fba5f4 commit 465cddb562e6955488bda37dbe806fe6cf9bf47c @cscott committed May 7, 2012
View
11 assets/www/index.html
@@ -31,10 +31,17 @@
<div id="balloons"></div>
<div id="hero"></div>
<div id="sprouts">
- <div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div>
+ <div class="award a1"></div><div class="award a2"></div><div
+ class="award a3"></div><div class="award a4"></div><div
+ class="award a5"></div><div class="award a6"></div><div
+ class="award a7"></div><div class="award a8"></div>
</div>
<div id="foreground">
- <div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div><div class="award"></div>
+ <div class="award a1"></div><div class="award a2"></div><div
+ class="award a3"></div><div class="award a4"></div><div
+ class="award a5"></div><div class="award a6"></div><div
+ class="award a7"></div><div class="award a8"></div><div
+ class="award flex"></div>
</div>
<div id="clouds"></div>
</div>
View
67 assets/www/index.js
@@ -16,6 +16,28 @@ define(['domReady!', './alea', './buzz', './compat', './hammer', './webintent.js
var buttons, handleButtonPress;
var refresh, refreshID = null;
+ var AWARDS = [['a1', 1/2],
+ ['a2', 1/4],
+ ['a3', 1/8],
+ ['a4', 1/16],
+ ['a5', 1/32],
+ ['a6', 1/64],
+ ['a7', 1/128],
+ ['a8', 1/256]];
+ var pickAward = function() {
+ var i;
+ for (i=0, sum=0; i<AWARDS.length; i++) {
+ sum += AWARDS[i][1];
+ }
+ var v = random() * sum;
+ for (i=0, sum=0; i<AWARDS.length; i++) {
+ sum += AWARDS[i][1];
+ if (v < sum) { return AWARDS[i][0]; }
+ }
+ // should never get here
+ return AWARDS[AWARDS.length-1][0];
+ };
+
var funf = function(name, value) {
// xxx this would break on iOS phonegap
if (!(window.Cordova && window.Cordova.exec)) {
@@ -108,6 +130,7 @@ define(['domReady!', './alea', './buzz', './compat', './hammer', './webintent.js
this.popped = this.popDone = false;
this.domElement.classList.remove('popped');
this.domElement.classList.remove('squirt');
+ this.award = null;
// just in case element sizes change
this.maxx = balloonsElement.offsetWidth - this.domElement.offsetWidth;
};
@@ -129,6 +152,17 @@ define(['domReady!', './alea', './buzz', './compat', './hammer', './webintent.js
if (this.domElement.classList.contains('squirt')) {
playSoundClip(random.choice(BURST_SOUNDS));
}
+ if (this.award) {
+ var elem1 = document.querySelector(
+ '#foreground .award.'+this.award);
+ elem1.classList.add('show');
+ elem1.style.WebkitTransform='';
+ var elem2 = document.querySelector(
+ '#sprouts .award.'+this.award);
+ elem2.classList.add('show');
+ var flex = document.querySelector('#foreground .award.flex');
+ flex.style.display = 'none';
+ }
}
return;
}
@@ -148,12 +182,40 @@ define(['domReady!', './alea', './buzz', './compat', './hammer', './webintent.js
};
Balloon.prototype.pop = function() {
this.popped = true;
+ // chance of award
+ var isAward = (random() < (1/10)); // 1-in-10 chance of an award
// run popping animation & sound effect
var isSquirt = (random() < (1/15)); // 1-in-15 chance of a squirt
// play balloon burst sound
- playSoundClip(random.choice(isSquirt ? SQUIRT_SOUNDS : BURST_SOUNDS));
+ var sounds = isAward ? AWARD_SOUNDS : isSquirt ? SQUIRT_SOUNDS :
+ BURST_SOUNDS;
+ playSoundClip(random.choice(sounds));
- if (isSquirt) {
+ if (isAward) {
+ this.domElement.classList.add('popped');
+ this.popTimeout = 250;
+ // move an award up here.
+ this.award = pickAward();
+ var elem1= document.querySelector('#foreground .award.'+this.award);
+ var elem2= document.querySelector('#sprouts .award.'+this.award);
+ // do we already have this award?
+ if (elem2.classList.contains('show')) {
+ // force the flex badge to fill in.
+ var flex = document.querySelector('#foreground .award.flex');
+ flex.style.top = elem1.offsetTop+'px';
+ flex.style.left = elem1.offsetLeft+'px';
+ flex.style.display = 'block';
+ flex.className = 'award flex '+this.award;
+ elem1 = flex;
+ this.popTimeout = 750;
+ }
+ var offsetY = elem1.offsetTop + elem1.offsetParent.offsetTop;
+ var offsetX = elem1.offsetLeft + elem1.offsetParent.offsetLeft;
+ var x = Math.round(this.x - offsetX + 23 /* center on balloon */);
+ var y = Math.round(this.y - offsetY + 20 /* center on balloon */);
+ elem1.style.WebkitTransform='translate3d('+x+'px,'+y+'px,0)';
+ elem2.classList.add('show');
+ } else if (isSquirt) {
this.domElement.classList.add('squirt');
this.popTimeout = 2000; // ms
} else {
@@ -261,6 +323,7 @@ define(['domReady!', './alea', './buzz', './compat', './hammer', './webintent.js
'sounds/deflate2'];
var WRONG_SOUNDS = ['sounds/wrong1'];
var ESCAPE_SOUNDS = ['sounds/wrong2'];
+ var AWARD_SOUNDS = ['sounds/award'];
// smoothing factor -- closer to 0 means more weight on present
var CORRECT_SMOOTHING = 0.8;
View
BIN assets/www/sounds/award.mp3
Binary file not shown.
View
BIN assets/www/sounds/award.ogg
Binary file not shown.
View
36 assets/www/style.css
@@ -66,35 +66,55 @@ html,body { width:100%; height:100%; margin:0; padding: 0; border:none; }
background-image: url('images/award.png'); /* blank fallback image */
height: 124px;
margin-top: 116px;
+ -webkit-transform: translate3d(0,138px,0);
}
-.grass #foreground .award {
+.grass #foreground .award.a1 {
background-image: url('images/award1.png');
}
-.grass #foreground .award + .award {
+.grass #foreground .award.a2 {
background-image: url('images/award2.png');
}
-.grass #foreground .award + .award + .award {
+.grass #foreground .award.a3 {
background-image: url('images/award3.png');
}
-.grass #foreground .award + .award + .award + .award {
+.grass #foreground .award.a4 {
background-image: url('images/award4.png');
}
-.grass #foreground .award + .award + .award + .award + .award {
+.grass #foreground .award.a5 {
background-image: url('images/award5.png');
}
-.grass #foreground .award + .award + .award + .award + .award + .award {
+.grass #foreground .award.a6 {
background-image: url('images/award6.png');
}
-.grass #foreground .award + .award + .award + .award + .award + .award + .award{
+.grass #foreground .award.a7 {
background-image: url('images/award7.png');
}
-.grass #foreground .award + .award + .award + .award + .award + .award + .award + .award{
+.grass #foreground .award.a8 {
background-image: url('images/award8.png');
}
+.grass #foreground .award.show {
+ -webkit-transform: translate3d(0,0,0) !important;
+ -webkit-transition-property: -webkit-transform;
+ -webkit-transition-duration: 1.5s;
+ -webkit-transition-timing-function: ease-in-out;
+}
+.grass #foreground .award.flex {
+ position: absolute;
+ top: 0; left: 0;
+ display: none;
+}
.grass #sprouts .award {
background-image: url('images/sprout1.png');
background-position: bottom right;
height: 138px;
+ -webkit-transform: translate3d(0,138px,0);
+ -webkit-transition-property: -webkit-transform;
+ -webkit-transition-duration: 1.5s;
+ -webkit-transition-delay: 1.5s;
+ -webkit-transition-timing-function: ease-in-out;
+}
+.grass #sprouts .award.show {
+ -webkit-transform: translate3d(0,0,0);
}
.grass #sprouts {
height: 138px;
View
BIN audio/d-chord.wav
Binary file not shown.

0 comments on commit 465cddb

Please sign in to comment.