added new block initialization animation

This commit is contained in:
lengstrom 2014-05-24 15:35:38 -04:00
parent 04703ce649
commit bd65f6da30
3 changed files with 36 additions and 41 deletions

View file

@ -7,7 +7,10 @@ function search(twoD,oneD){
return false;
}
function floodFill(clock,side,index,deleting) {
if(clock.blocks[side] === undefined || clock.blocks[side][index] === undefined){return;}
if (clock.blocks[side] === undefined || clock.blocks[side][index] === undefined) {
return;
}
var color = clock.blocks[side][index].color;
for(var x =-1;x<2;x++){
for(var y =-1;y<2;y++){

View file

@ -12,10 +12,12 @@ function Block(lane, color, iter, distFromHex, settled) {
this.deleted = 0;
this.removed = 0;
this.tint = 0; //todo
this.opacity = 0;
this.initialization = 1;
this.opacity = 1;
this.initializing = 1;
this.ct = 0;
this.parentArr;
this.iter = iter;
this.initLen = 5;
if (distFromHex) {
this.distFromHex = distFromHex;
@ -23,31 +25,6 @@ function Block(lane, color, iter, distFromHex, settled) {
this.distFromHex = 300;
}
this.incrementOpacity = function() {
if (this.deleted) {
var lane = MainClock.sides - this.lane;// -this.position;
lane += MainClock.position;
lane = (lane+MainClock.sides) % MainClock.sides;
this.opacity = this.opacity - 0.1;
if (this.opacity <= 0) {
this.opacity = 0;
var i = 0;
var j = this.getIndex();
this.parentArr.splice(j,1);
if (j < this.parentArr.length) {
for (i = j; i < this.parentArr.length; i++) {
this.parentArr[i].settled = 0;
}
}
}
}
if(!this.deleted && this.opacity<1){
this.opacity = this.opacity + 0.05;
}
};
this.getIndex = function (){
for (var i = 0; i < this.parentArr.length; i++) {
if (this.parentArr[i] == this) {
@ -57,11 +34,7 @@ function Block(lane, color, iter, distFromHex, settled) {
}
this.draw = function(attached, index) {
// var xd = (this.settled) ? gdx : 0;
// var yd = (this.settled) ? gdy : 0;
this.incrementOpacity();
if(attached == undefined)
if(attached === undefined)
attached = false;
if(this.angle > this.targetAngle) {
@ -81,11 +54,26 @@ function Block(lane, color, iter, distFromHex, settled) {
this.width = 2 * this.distFromHex / Math.sqrt(3);
this.widthWide = this.width + this.height + 3;
var p1 = rotatePoint(-this.width / 2, this.height / 2, this.angle);
var p2 = rotatePoint(this.width / 2, this.height / 2, this.angle);
var p3 = rotatePoint(this.widthWide / 2, -this.height / 2, this.angle);
var p4 = rotatePoint(-this.widthWide / 2, -this.height / 2, this.angle);
var p1;
var p2;
var p3;
var p4;
if (this.initializing) {
this.ct++;
var rat = (this.ct/this.initLen);
p1 = rotatePoint((-this.width / 2) * rat, this.height / 2, this.angle);
p2 = rotatePoint((this.width / 2) * rat, this.height / 2, this.angle);
p3 = rotatePoint((this.widthWide / 2) * rat, -this.height / 2, this.angle);
p4 = rotatePoint((-this.widthWide / 2) * rat, -this.height / 2, this.angle);
if (this.ct == this.initLen) {
this.initializing = 0;
}
} else {
p1 = rotatePoint(-this.width / 2, this.height / 2, this.angle);
p2 = rotatePoint(this.width / 2, this.height / 2, this.angle);
p3 = rotatePoint(this.widthWide / 2, -this.height / 2, this.angle);
p4 = rotatePoint(-this.widthWide / 2, -this.height / 2, this.angle);
}
ctx.fillStyle = this.color;
ctx.globalAlpha = this.opacity;
@ -125,6 +113,11 @@ function Block(lane, color, iter, distFromHex, settled) {
}
// t: current time, b: begInnIng value, c: change In value, d: duration
function easeOutCubic(t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
}
var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
"#f1c40f":new Audio("../sounds/highest.ogg"),
"#3498db":new Audio("../sounds/middle.ogg"),

View file

@ -90,7 +90,7 @@ function addNewBlock(blocklane, color, iter, distFromHex, settled) { //last two
if (settled) {
blockHist[count].settled = settled;
}
debugger;
blocks.push(new Block(blocklane, color, iter, distFromHex, settled));
}
@ -147,7 +147,7 @@ function update() {
for (i in blocks) {
MainClock.doesBlockCollide(blocks[i]);
if (!blocks[i].settled) {
blocks[i].distFromHex -= blocks[i].iter;
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter;
} else if(!blocks[i].removed){
blocks[i].removed = 1;
}
@ -195,7 +195,6 @@ function render() {
if (gameState == -2) {
if (Date.now() - startTime > 1300) {
var op = (Date.now() - startTime - 1300)/500;
debugger;
ctx.globalAlpha = op;
drawPolygon(canvas.originalWidth / 2 , canvas.originalHeight / 2 , 6, 220, 30, "#bda0cb", false,6);
ctx.globalAlpha = 1;