Merge
This commit is contained in:
commit
6b40e6ecdc
11 changed files with 469 additions and 466 deletions
|
@ -50,7 +50,7 @@
|
|||
<canvas id="canvas"></canvas>
|
||||
<div id='devtools' style='z-index:3;display:none;position:absolute;left:50%;width:400px;height:400px;top:50%;margin-top:-200px;margin-left:-200px;'>
|
||||
<h2 id = 'clickToExit' style = 'background-color:#fff;color:#000'>Click to exit</h2>
|
||||
<textarea id ='devtoolsText' style = 'height:300px;width:400px;'></textarea>
|
||||
<textarea id ='devtoolsText' style = 'height:300px;width:400px;'></textarea>
|
||||
</div>
|
||||
<script type = 'text/javascript' src="vendor/hammer.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/jsonfn.min.js"></script>
|
||||
|
|
153
js/Block.js
Normal file
153
js/Block.js
Normal file
|
@ -0,0 +1,153 @@
|
|||
function Block(fallingLane, color, iter, distFromHex, settled) {
|
||||
// whether or not a block is rested on the center clock or another block
|
||||
this.settled = (settled === undefined) ? 0 : 1;
|
||||
this.height = settings.blockHeight;
|
||||
//the lane which the block was shot from
|
||||
this.fallingLane = fallingLane;
|
||||
//the angle at which the block falls
|
||||
this.angle = 90 - (30 + 60 * fallingLane);
|
||||
//for calculating the rotation of blocks attached to the center clock
|
||||
this.angularVelocity = 0;
|
||||
this.targetAngle = this.angle;
|
||||
this.color = color;
|
||||
//blocks that are slated to be deleted after a valid score has happened
|
||||
this.deleted = 0;
|
||||
//blocks slated to be removed from falling and added to the clock
|
||||
this.removed = 0;
|
||||
//value for the opacity of the white blcok drawn over falling block to give it the glow as it attaches to the clock
|
||||
this.tint = 0;
|
||||
//value used for deletion animation
|
||||
this.opacity = 1;
|
||||
//boolean for when the block is expanding
|
||||
this.initializing = 1;
|
||||
this.ct = 0;
|
||||
//speed of block
|
||||
this.iter = iter;
|
||||
//number of iterations before starting to drop
|
||||
this.initLen = settings.creationDt;
|
||||
//side which block is attached too
|
||||
this.attachedLane;
|
||||
//distance from center clock
|
||||
this.distFromHex = distFromHex || settings.startDist * settings.scale ;
|
||||
|
||||
this.incrementOpacity = function() {
|
||||
if (this.deleted) {
|
||||
//add shakes
|
||||
if (this.opacity >= .925) {
|
||||
var tLane = this.attachedLane - MainClock.position;
|
||||
tLane = MainClock.sides - tLane;
|
||||
while (tLane < 0) {
|
||||
tLane += MainClock.sides;
|
||||
}
|
||||
|
||||
tLane %= MainClock.sides;
|
||||
MainClock.shakes.push({lane:tLane, magnitude:3});
|
||||
}
|
||||
//fade out the opacity
|
||||
this.opacity = this.opacity - 0.075;
|
||||
if (this.opacity <= 0) {
|
||||
//slate for final deletion
|
||||
this.opacity = 0;
|
||||
this.deleted = 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.getIndex = function (){
|
||||
//get the index of the block in its stack
|
||||
var parentArr = MainClock.blocks[this.attachedLane]
|
||||
for (var i = 0; i < parentArr.length; i++) {
|
||||
if (parentArr[i] == this) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.draw = function(attached, index) {
|
||||
this.height = settings.blockHeight;
|
||||
if (Math.abs(settings.scale - settings.prevScale) > .000000001) {
|
||||
this.distFromHex *= (settings.scale/settings.prevScale);
|
||||
}
|
||||
|
||||
this.incrementOpacity();
|
||||
if(attached === undefined)
|
||||
attached = false;
|
||||
|
||||
if(this.angle > this.targetAngle) {
|
||||
this.angularVelocity -= angularVelocityConst;
|
||||
}
|
||||
else if(this.angle < this.targetAngle) {
|
||||
this.angularVelocity += angularVelocityConst;
|
||||
}
|
||||
|
||||
if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
|
||||
this.angle = this.targetAngle;
|
||||
this.angularVelocity = 0;
|
||||
}
|
||||
else {
|
||||
this.angle += this.angularVelocity;
|
||||
}
|
||||
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthWide = this.width + this.height + 3;
|
||||
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);
|
||||
}
|
||||
|
||||
if (this.deleted) {
|
||||
ctx.fillStyle = "#FFF";
|
||||
} else {
|
||||
ctx.fillStyle = this.color;
|
||||
}
|
||||
ctx.globalAlpha = this.opacity;
|
||||
var baseX = trueCanvas.width / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdx;
|
||||
var baseY = trueCanvas.height / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdy;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
if (this.tint) {
|
||||
if (this.opacity < 1) {
|
||||
this.tint = 0;
|
||||
}
|
||||
ctx.fillStyle = "#FFF";
|
||||
ctx.globalAlpha = this.tint;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
this.tint -= 0.02;
|
||||
if (this.tint < 0) {
|
||||
this.tint = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
};
|
||||
}
|
155
js/Clock.js
Normal file
155
js/Clock.js
Normal file
|
@ -0,0 +1,155 @@
|
|||
function Clock(sideLength) {
|
||||
this.fillColor = '#2c3e50';
|
||||
this.angularVelocity = 0;
|
||||
this.position = 0;
|
||||
this.dy = 0;
|
||||
this.sides = 6;
|
||||
this.blocks = [];
|
||||
this.angle = 180 / this.sides;
|
||||
this.targetAngle = this.angle;
|
||||
this.shakes = [];
|
||||
this.sideLength = sideLength;
|
||||
this.strokeColor = 'blue';
|
||||
this.x = trueCanvas.width / 2;
|
||||
this.y = trueCanvas.height / 2;
|
||||
this.lastCombo;
|
||||
this.comboMultiplier = 1;
|
||||
|
||||
for (var i = 0; i < this.sides; i++) {
|
||||
this.blocks.push([]);
|
||||
}
|
||||
|
||||
this.shake = function(obj) { //lane as in particle lane
|
||||
var angle = 30 + obj.lane * 60;
|
||||
angle *= Math.PI / 180;
|
||||
var dx = Math.cos(angle) * obj.magnitude;
|
||||
var dy = Math.sin(angle) * obj.magnitude;
|
||||
gdx -= dx;
|
||||
gdy += dy;
|
||||
obj.magnitude /= 2;
|
||||
if (obj.magnitude < 1) {
|
||||
for (var i = 0; i < this.shakes.length; i++) {
|
||||
if (this.shakes[i] == obj) {
|
||||
this.shakes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.addBlock = function(block) {
|
||||
if (gameState != 1) return;
|
||||
block.settled = 1;
|
||||
block.tint = 0.6;
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
this.shakes.push({lane:block.fallingLane, magnitude:3});
|
||||
lane += this.position;
|
||||
lane = (lane + this.sides) % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
block.attachedLane = lane;
|
||||
block.parentArr = this.blocks[lane];
|
||||
consolidateBlocks(this, lane, this.blocks[lane].length - 1);
|
||||
};
|
||||
|
||||
this.doesBlockCollide = function(block, position, tArr) {
|
||||
if (block.settled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (position !== undefined) {
|
||||
arr = tArr;
|
||||
if (position <= 0) {
|
||||
if (block.distFromHex - block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
|
||||
block.settled = 1;
|
||||
consolidateBlocks(this, block.attachedLane, block.getIndex());
|
||||
} else {
|
||||
block.settled = 0;
|
||||
}
|
||||
} else {
|
||||
if (arr[position - 1].settled && block.distFromHex - block.iter * settings.scale - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.distFromHex = arr[position - 1].distFromHex + arr[position - 1].height;
|
||||
block.settled = 1;
|
||||
consolidateBlocks(this, block.attachedLane, block.getIndex());
|
||||
}
|
||||
else {
|
||||
block.settled = 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
lane += this.position;
|
||||
|
||||
lane = (lane+this.sides) % this.sides;
|
||||
var arr = this.blocks[lane];
|
||||
|
||||
if (arr.length > 0) {
|
||||
if (block.distFromHex + block.iter * settings.scale - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;
|
||||
this.addBlock(block);
|
||||
}
|
||||
} else {
|
||||
if (block.distFromHex + block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.rotate = function(steps) {
|
||||
if (gameState != 1 && gameState != -2) return;
|
||||
this.position += steps;
|
||||
if (!history[count]) {
|
||||
history[count] = {};
|
||||
}
|
||||
|
||||
if (!history[count].rotate) {
|
||||
history[count].rotate = steps;
|
||||
}
|
||||
else {
|
||||
history[count].rotate += steps;
|
||||
}
|
||||
|
||||
while (this.position < 0) {
|
||||
this.position += 6;
|
||||
}
|
||||
|
||||
this.position = this.position % this.sides;
|
||||
this.blocks.forEach(function(blocks) {
|
||||
blocks.forEach(function(block) {
|
||||
block.targetAngle = block.targetAngle - steps * 60;
|
||||
});
|
||||
});
|
||||
|
||||
this.targetAngle = this.targetAngle - steps * 60;
|
||||
};
|
||||
|
||||
this.draw = function() {
|
||||
this.x = trueCanvas.width/2;
|
||||
if (gameState == 1) {
|
||||
this.y = trueCanvas.height/2;
|
||||
}
|
||||
this.sideLength = settings.hexWidth;
|
||||
gdx = 0;
|
||||
gdy = 0;
|
||||
for (var i = 0; i < this.shakes.length; i++) {
|
||||
this.shake(this.shakes[i]);
|
||||
}
|
||||
if (this.angle > this.targetAngle) {
|
||||
this.angularVelocity -= angularVelocityConst;
|
||||
}
|
||||
else if(this.angle < this.targetAngle) {
|
||||
this.angularVelocity += angularVelocityConst;
|
||||
}
|
||||
|
||||
if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
|
||||
this.angle = this.targetAngle;
|
||||
this.angularVelocity = 0;
|
||||
}
|
||||
else {
|
||||
this.angle += this.angularVelocity;
|
||||
}
|
||||
drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle, this.fillColor, 0, 'rgba(0,0,0,0)');
|
||||
};
|
||||
}
|
|
@ -7,7 +7,7 @@ function search(twoD,oneD){
|
|||
}
|
||||
return false;
|
||||
}
|
||||
function floodFill(clock,side,index,deleting) {
|
||||
function floodFill(clock, side, index, deleting) {
|
||||
if (clock.blocks[side] === undefined || clock.blocks[side][index] === undefined) {
|
||||
//just makin sure stuff exists
|
||||
return;
|
||||
|
@ -63,6 +63,15 @@ function consolidateBlocks(clock,side,index){
|
|||
}
|
||||
}
|
||||
// add scores
|
||||
score += deleting.length*deleting.length;
|
||||
var now = Date.now();
|
||||
if(now - clock.lastCombo < 5000 ){
|
||||
clock.comboMultiplier += 1;
|
||||
clock.lastCombo = now;
|
||||
}
|
||||
else{
|
||||
clock.lastCombo = now;
|
||||
clock.comboMultiplier = 1;
|
||||
}
|
||||
score += deleting.length * deleting.length * clock.comboMultiplier;
|
||||
|
||||
}
|
||||
|
|
315
js/entities.js
315
js/entities.js
|
@ -1,317 +1,12 @@
|
|||
var angularVelocityConst = 4;
|
||||
|
||||
function Block(fallingLane, color, iter, distFromHex, settled) {
|
||||
// whether or not a block is rested on the center clock or another block
|
||||
this.settled = (settled === undefined) ? 0 : 1;
|
||||
this.height = settings.blockHeight;
|
||||
//the lane which the block was shot from
|
||||
this.fallingLane = fallingLane;
|
||||
//the angle at which the block falls
|
||||
this.angle = 90 - (30 + 60 * fallingLane);
|
||||
//for calculating the rotation of blocks attached to the center clock
|
||||
this.angularVelocity = 0;
|
||||
this.targetAngle = this.angle;
|
||||
this.color = color;
|
||||
//blocks that are slated to be deleted after a valid score has happened
|
||||
this.deleted = 0;
|
||||
//blocks slated to be removed from falling and added to the clock
|
||||
this.removed = 0;
|
||||
//value for the opacity of the white blcok drawn over falling block to give it the glow as it attaches to the clock
|
||||
this.tint = 0;
|
||||
//value used for deletion animation
|
||||
this.opacity = 1;
|
||||
//boolean for when the block is expanding
|
||||
this.initializing = 1;
|
||||
this.ct = 0;
|
||||
//speed of block
|
||||
this.iter = iter;
|
||||
//number of iterations before starting to drop
|
||||
this.initLen = settings.creationDt;
|
||||
//side which block is attached too
|
||||
this.attachedLane;
|
||||
//distance from center clock
|
||||
this.distFromHex = distFromHex || settings.startDist * settings.scale ;
|
||||
|
||||
this.incrementOpacity = function() {
|
||||
|
||||
if (this.deleted) {
|
||||
if (this.opacity >= 1 - .075) {
|
||||
var tLane = this.attachedLane - MainClock.position;
|
||||
tLane = MainClock.sides - tLane;
|
||||
while (tLane < 0) {
|
||||
tLane += MainClock.sides;
|
||||
}
|
||||
|
||||
tLane %= MainClock.sides;
|
||||
MainClock.shakes.push({lane:tLane, magnitude:3});
|
||||
}
|
||||
this.opacity = this.opacity - 0.075;
|
||||
if (this.opacity <= 0) {
|
||||
this.opacity = 0;
|
||||
this.deleted = 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.getIndex = function (){
|
||||
var parentArr = MainClock.blocks[this.attachedLane]
|
||||
for (var i = 0; i < parentArr.length; i++) {
|
||||
if (parentArr[i] == this) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.draw = function(attached, index) {
|
||||
this.height = settings.blockHeight;
|
||||
if (Math.abs(settings.scale - settings.prevScale) > .000000001) {
|
||||
this.distFromHex *= (settings.scale/settings.prevScale);
|
||||
}
|
||||
|
||||
this.incrementOpacity();
|
||||
if(attached === undefined)
|
||||
attached = false;
|
||||
|
||||
if(this.angle > this.targetAngle) {
|
||||
this.angularVelocity -= angularVelocityConst;
|
||||
}
|
||||
else if(this.angle < this.targetAngle) {
|
||||
this.angularVelocity += angularVelocityConst;
|
||||
}
|
||||
|
||||
if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
|
||||
this.angle = this.targetAngle;
|
||||
this.angularVelocity = 0;
|
||||
}
|
||||
else {
|
||||
this.angle += this.angularVelocity;
|
||||
}
|
||||
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthWide = this.width + this.height + 3;
|
||||
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);
|
||||
}
|
||||
|
||||
if (this.deleted) {
|
||||
ctx.fillStyle = "#FFF";
|
||||
} else {
|
||||
ctx.fillStyle = this.color;
|
||||
}
|
||||
ctx.globalAlpha = this.opacity;
|
||||
var baseX = trueCanvas.width / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdx;
|
||||
var baseY = trueCanvas.height / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdy;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
if (this.tint) {
|
||||
if (this.opacity < 1) {
|
||||
this.tint = 0;
|
||||
}
|
||||
ctx.fillStyle = "#FFF";
|
||||
ctx.globalAlpha = this.tint;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
this.tint -= 0.02;
|
||||
if (this.tint < 0) {
|
||||
this.tint = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
};
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
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"),
|
||||
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
||||
"#3498db":new Audio("../sounds/middle.ogg"),
|
||||
"#2ecc71":new Audio("../sounds/highest.ogg") //fix this later
|
||||
};
|
||||
|
||||
function Clock(sideLength) {
|
||||
this.fillColor = '#2c3e50';
|
||||
this.angularVelocity = 0;
|
||||
this.position = 0;
|
||||
this.dy = 0;
|
||||
this.sides = 6;
|
||||
this.blocks = [];
|
||||
this.angle = 180 / this.sides;
|
||||
this.targetAngle = this.angle;
|
||||
this.shakes = [];
|
||||
this.sideLength = sideLength;
|
||||
this.strokeColor = 'blue';
|
||||
this.x = trueCanvas.width / 2;
|
||||
this.y = trueCanvas.height / 2;
|
||||
|
||||
for (var i = 0; i < this.sides; i++) {
|
||||
this.blocks.push([]);
|
||||
}
|
||||
|
||||
this.shake = function(obj) { //lane as in particle lane
|
||||
var angle = 30 + obj.lane * 60;
|
||||
angle *= Math.PI / 180;
|
||||
var dx = Math.cos(angle) * obj.magnitude;
|
||||
var dy = Math.sin(angle) * obj.magnitude;
|
||||
gdx -= dx;
|
||||
gdy += dy;
|
||||
obj.magnitude /= 2;
|
||||
if (obj.magnitude < 1) {
|
||||
for (var i = 0; i < this.shakes.length; i++) {
|
||||
if (this.shakes[i] == obj) {
|
||||
this.shakes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.addBlock = function(block) {
|
||||
if (gameState != 1) return;
|
||||
block.settled = 1;
|
||||
block.tint = 0.6;
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
this.shakes.push({lane:block.fallingLane, magnitude:3});
|
||||
lane += this.position;
|
||||
lane = (lane+this.sides) % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
block.attachedLane = lane;
|
||||
//block.parentArr = this.blocks[lane];
|
||||
consolidateBlocks(this, lane, this.blocks[lane].length - 1);
|
||||
};
|
||||
|
||||
this.doesBlockCollide = function(block, position, tArr) {
|
||||
if (block.settled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (position !== undefined) {
|
||||
arr = tArr;
|
||||
if (position <= 0) {
|
||||
if (block.distFromHex - block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
|
||||
block.settled = 1;
|
||||
consolidateBlocks(this, block.attachedLane, block.getIndex());
|
||||
} else {
|
||||
block.settled = 0;
|
||||
}
|
||||
} else {
|
||||
if (arr[position - 1].settled && block.distFromHex - block.iter * settings.scale - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.distFromHex = arr[position - 1].distFromHex + arr[position - 1].height;
|
||||
block.settled = 1;
|
||||
consolidateBlocks(this, block.attachedLane, block.getIndex());
|
||||
}
|
||||
else {
|
||||
block.settled = 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
lane += this.position;
|
||||
|
||||
lane = (lane+this.sides) % this.sides;
|
||||
var arr = this.blocks[lane];
|
||||
|
||||
if (arr.length > 0) {
|
||||
if (block.distFromHex + block.iter * settings.scale - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;
|
||||
this.addBlock(block);
|
||||
}
|
||||
} else {
|
||||
if (block.distFromHex + block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.rotate = function(steps) {
|
||||
if (gameState != 1 && gameState != -2) return;
|
||||
this.position += steps;
|
||||
if (!history[count]) {
|
||||
history[count] = {};
|
||||
}
|
||||
|
||||
if (!history[count].rotate) {
|
||||
history[count].rotate = steps;
|
||||
}
|
||||
else {
|
||||
history[count].rotate += steps;
|
||||
}
|
||||
|
||||
while (this.position < 0) {
|
||||
this.position += 6;
|
||||
}
|
||||
|
||||
this.position = this.position % this.sides;
|
||||
this.blocks.forEach(function(blocks) {
|
||||
blocks.forEach(function(block) {
|
||||
block.targetAngle = block.targetAngle - steps * 60;
|
||||
});
|
||||
});
|
||||
|
||||
this.targetAngle = this.targetAngle - steps * 60;
|
||||
};
|
||||
|
||||
this.draw = function() {
|
||||
this.x = trueCanvas.width/2;
|
||||
if (gameState == 1) {
|
||||
this.y = trueCanvas.height/2;
|
||||
}
|
||||
this.sideLength = settings.hexWidth;
|
||||
gdx = 0;
|
||||
gdy = 0;
|
||||
for (var i = 0; i < this.shakes.length; i++) {
|
||||
this.shake(this.shakes[i]);
|
||||
}
|
||||
if (this.angle > this.targetAngle) {
|
||||
this.angularVelocity -= angularVelocityConst;
|
||||
}
|
||||
else if(this.angle < this.targetAngle) {
|
||||
this.angularVelocity += angularVelocityConst;
|
||||
}
|
||||
|
||||
if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
|
||||
this.angle = this.targetAngle;
|
||||
this.angularVelocity = 0;
|
||||
}
|
||||
else {
|
||||
this.angle += this.angularVelocity;
|
||||
}
|
||||
drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle, this.fillColor, 0, 'rgba(0,0,0,0)');
|
||||
};
|
||||
}
|
||||
};
|
37
js/input.js
37
js/input.js
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
var prevGameState;
|
||||
|
||||
keypress.register_combo({
|
||||
|
@ -56,25 +55,25 @@ keypress.register_combo({
|
|||
keypress.register_combo({
|
||||
keys: "enter",
|
||||
on_keydown: function() {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.body.addEventListener('touchstart', function(e){
|
||||
|
||||
if( e.changedTouches[0].pageX<window.innerWidth/2){
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1);
|
||||
}
|
||||
if( e.changedTouches[0].pageX>window.innerWidth/2){
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1);
|
||||
}
|
||||
document.body.addEventListener('touchstart', function(e) {
|
||||
if (e.changedTouches[0].pageX<window.innerWidth/2) {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1);
|
||||
}
|
||||
if (e.changedTouches[0].pageX>window.innerWidth/2) {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1);
|
||||
}
|
||||
}, false)
|
||||
|
||||
|
|
124
js/main.js
124
js/main.js
|
@ -201,122 +201,6 @@ function exportHistory() {
|
|||
toggleDevTools();
|
||||
}
|
||||
|
||||
//remember to update history function to show the respective iter speeds
|
||||
function update() {
|
||||
settings.hexWidth = settings.baseHexWidth * settings.scale;
|
||||
settings.blockHeight = settings.baseBlockHeight * settings.scale;
|
||||
|
||||
var now = Date.now();
|
||||
if (importing) {
|
||||
if (importedHistory[count]) {
|
||||
if (importedHistory[count].block) {
|
||||
addNewBlock(importedHistory[count].block.blocklane, importedHistory[count].block.color, importedHistory[count].block.iter, importedHistory[count].block.distFromHex, importedHistory[count].block.settled);
|
||||
}
|
||||
|
||||
if (importedHistory[count].rotate) {
|
||||
MainClock.rotate(importedHistory[count].rotate);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
waveone.update();
|
||||
if (now - waveone.prevTimeScored > 1000) {
|
||||
waveone.prevTimeScored = now;
|
||||
}
|
||||
}
|
||||
|
||||
var i;
|
||||
var objectsToRemove = [];
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i]);
|
||||
if (!blocks[i].settled) {
|
||||
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
|
||||
} else if (!blocks[i].removed) {
|
||||
blocks[i].removed = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var lDI;
|
||||
for (i = 0; i < MainClock.blocks.length; i++) {
|
||||
lDI = 99;
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
if (block.deleted == 2) {
|
||||
MainClock.blocks[i].splice(j,1);
|
||||
if (j < lDI) lDI = j;
|
||||
j--;
|
||||
}
|
||||
}
|
||||
|
||||
if (lDI < MainClock.blocks[i].length) {
|
||||
for (var q = lDI; q < MainClock.blocks[i].length; q++) {
|
||||
MainClock.blocks[i][q].settled = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var block;
|
||||
var j;
|
||||
for (i in MainClock.blocks) {
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
|
||||
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(i=0;i<blocks.length;i++){
|
||||
if(blocks[i].removed == 1){
|
||||
blocks.splice(i,1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
count++;
|
||||
if (score != prevScore) {
|
||||
updateScoreboard();
|
||||
prevScore = score;
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
|
||||
clearGameBoard();
|
||||
|
||||
if (gameState == -2) {
|
||||
if (Date.now() - startTime > 1300) {
|
||||
var op = (Date.now() - startTime - 1300)/500;
|
||||
if (op > 1) {
|
||||
op = 1;
|
||||
}
|
||||
ctx.globalAlpha = op;
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
} else {
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
|
||||
}
|
||||
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
for (i in blocks) {
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
MainClock.draw();
|
||||
settings.prevScale = settings.scale;
|
||||
}
|
||||
|
||||
function stepInitialLoad() {
|
||||
var dy = getStepDY(Date.now() - startTime, 0, (100 + trueCanvas.height/2), 1300);
|
||||
if (Date.now() - startTime > 1300) {
|
||||
|
@ -349,10 +233,10 @@ function animLoop() {
|
|||
update();
|
||||
render();
|
||||
if (checkGameOver()) {
|
||||
isGameOver--;
|
||||
if (isGameOver === 0) {
|
||||
// isGameOver--;
|
||||
// if (isGameOver === 0) {
|
||||
gameState = 2;
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
else if (gameState === 0) {
|
||||
|
@ -419,11 +303,9 @@ function checkGameOver() {
|
|||
window.onblur = function (e) {
|
||||
if (gameState == -1) {
|
||||
gameState = prevGameState;
|
||||
requestAnimFrame(animLoop);
|
||||
}
|
||||
else if(gameState != -2 && gameState != 0) {
|
||||
prevGameState = gameState;
|
||||
gameState = -1;
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
function rotatePoint(x, y, theta) {
|
||||
var thetaRad = theta * (Math.PI / 180);
|
||||
var rotX = Math.cos(thetaRad) * x - Math.sin(thetaRad) * y;
|
||||
|
|
35
js/render.js
Normal file
35
js/render.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
function render() {
|
||||
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
|
||||
clearGameBoard();
|
||||
|
||||
if (gameState == -2) {
|
||||
if (Date.now() - startTime > 1300) {
|
||||
var op = (Date.now() - startTime - 1300)/500;
|
||||
if (op > 1) {
|
||||
op = 1;
|
||||
}
|
||||
ctx.globalAlpha = op;
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
} else {
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
|
||||
}
|
||||
|
||||
for (var i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in blocks) {
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
MainClock.draw();
|
||||
if (gameState == 1) {
|
||||
drawScoreboard();
|
||||
}
|
||||
settings.prevScale = settings.scale;
|
||||
}
|
74
js/update.js
Normal file
74
js/update.js
Normal file
|
@ -0,0 +1,74 @@
|
|||
//remember to update history function to show the respective iter speeds
|
||||
function update() {
|
||||
settings.hexWidth = settings.baseHexWidth * settings.scale;
|
||||
settings.blockHeight = settings.baseBlockHeight * settings.scale;
|
||||
|
||||
var now = Date.now();
|
||||
if (importing) {
|
||||
// if (importedHistory[count]) {
|
||||
if (importedHistory[count].block) {
|
||||
addNewBlock(importedHistory[count].block.blocklane, importedHistory[count].block.color, importedHistory[count].block.iter, importedHistory[count].block.distFromHex, importedHistory[count].block.settled);
|
||||
}
|
||||
|
||||
if (importedHistory[count].rotate) {
|
||||
MainClock.rotate(importedHistory[count].rotate);
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
waveone.update();
|
||||
if (now - waveone.prevTimeScored > 1000) {
|
||||
waveone.prevTimeScored = now;
|
||||
}
|
||||
}
|
||||
|
||||
var objectsToRemove = [];
|
||||
for (var i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i]);
|
||||
if (!blocks[i].settled) {
|
||||
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
|
||||
} else if (!blocks[i].removed) {
|
||||
blocks[i].removed = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var lowestDeletedIndex;
|
||||
for (var i = 0; i < MainClock.blocks.length; i++) {
|
||||
lowestDeletedIndex = 99;
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
if (block.deleted == 2) {
|
||||
MainClock.blocks[i].splice(j,1);
|
||||
if (j < lowestDeletedIndex) lowestDeletedIndex = j;
|
||||
j--;
|
||||
}
|
||||
}
|
||||
|
||||
if (lowestDeletedIndex < MainClock.blocks[i].length) {
|
||||
for (var q = lowestDeletedIndex; q < MainClock.blocks[i].length; q++) {
|
||||
MainClock.blocks[i][q].settled = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
|
||||
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(var i=0;i<blocks.length;i++){
|
||||
if(blocks[i].removed == 1){
|
||||
blocks.splice(i,1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
count++;
|
||||
}
|
26
js/view.js
26
js/view.js
|
@ -18,31 +18,33 @@ function showModal(text, secondaryText) {
|
|||
ctx.fillText(secondaryText, trueCanvas.width / 2, trueCanvas.height / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
||||
function renderText(lines, x, y, fontSize) {
|
||||
if(typeof lines == 'string' || lines instanceof String) {
|
||||
lines = [lines];
|
||||
}
|
||||
function renderText(x, y, fontSize, text) {
|
||||
// if(typeof text == 'string' || text instanceof String) {
|
||||
// text = [text];
|
||||
// }
|
||||
|
||||
fontSize = fontSize || 50;
|
||||
// fontSize = fontSize || 50;
|
||||
|
||||
ctx.font = fontSize + 'px Roboto'; // figure out what is not working
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillStyle = 'rgb(236, 240, 241)';
|
||||
|
||||
// for(var i=0; i<text.length; i++) {
|
||||
// ctx.fillText(text[i], x, y + (fontSize / 4) * (i+1) + 30 * i );
|
||||
// }
|
||||
ctx.fillText(text, x, y + (fontSize / 4));
|
||||
|
||||
for(var i=0; i<lines.length; i++) {
|
||||
ctx.fillText(lines[i], x, y + (fontSize / 4) * (i+1) + 30 * i );
|
||||
}
|
||||
}
|
||||
|
||||
function updateScoreboard() {
|
||||
$('#score').html('Score: '+score + " (x" + scoreAdditionCoeff + ")");
|
||||
function drawScoreboard() {
|
||||
renderText(trueCanvas.width / 2, trueCanvas.height / 2, 50, score);
|
||||
}
|
||||
|
||||
function clearGameBoard() {
|
||||
drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
|
||||
}
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) { // can make more elegant, reduce redundancy, fix readability
|
||||
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) {
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.strokeStyle = lineColor;
|
||||
|
|
Loading…
Reference in a new issue