From 918c8ab924f09f624bfdd21b9a907a39b05222ec Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sun, 25 May 2014 21:49:03 -0400 Subject: [PATCH 1/6] create update.js, render.js --- index.html | 30 ++++++------ js/checking.js | 30 ++++++------ js/entities.js | 14 +++--- js/input.js | 37 +++++++-------- js/main.js | 124 ++----------------------------------------------- js/math.js | 1 - js/render.js | 32 +++++++++++++ js/update.js | 78 +++++++++++++++++++++++++++++++ js/view.js | 2 +- 9 files changed, 171 insertions(+), 177 deletions(-) create mode 100644 js/render.js create mode 100644 js/update.js diff --git a/index.html b/index.html index b4e0629..bec440c 100644 --- a/index.html +++ b/index.html @@ -49,19 +49,21 @@ - - - - - - - - - - - +

Click to exit

+ + + + + + + + + + + + + + + diff --git a/js/checking.js b/js/checking.js index 9f72c46..54566c6 100644 --- a/js/checking.js +++ b/js/checking.js @@ -6,20 +6,20 @@ 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) { return; } var color = clock.blocks[side][index].color; - for(var x =-1;x<2;x++){ - for(var y =-1;y<2;y++){ - if(Math.abs(x)==Math.abs(y)){continue;} - var curSide =(side+x+clock.sides)%clock.sides; + for (var x =-1; x<2; x++){ + for (var y =-1; y<2; y++){ + if(Math.abs(x)==Math.abs(y)) continue; + var curSide =(side+x+clock.sides) % clock.sides; var curIndex = index+y; - if(clock.blocks[curSide] === undefined){continue;} - if(clock.blocks[curSide][curIndex] !== undefined){ - if(clock.blocks[curSide][curIndex].color == color && search(deleting,[curSide,curIndex]) === false && clock.blocks[curSide][curIndex].deleted == 0 ) { + if (clock.blocks[curSide] === undefined) continue; + if (clock.blocks[curSide][curIndex] !== undefined) { + if (clock.blocks[curSide][curIndex].color == color && search(deleting,[curSide,curIndex]) === false && clock.blocks[curSide][curIndex].deleted == 0) { deleting.push([curSide,curIndex]); floodFill(clock,curSide,curIndex,deleting); } @@ -28,19 +28,19 @@ function floodFill(clock,side,index,deleting) { } } -function consolidateBlocks(clock,side,index){ - var sidesChanged =[]; - var deleting=[]; +function consolidateBlocks(clock, side, index) { + var sidesChanged = []; + var deleting = []; deleting.push([side,index]); floodFill(clock,side,index,deleting); var deleteList= deleting; - if(deleteList.length<3){return;} + if (deleteList.length<3){return;} var i; - for(i in deleteList){ + for (i in deleteList){ var arr = deleteList[i]; - if(arr !== undefined && arr.length==2) { - if(sidesChanged.indexOf(arr[0])==-1){ + if (arr !== undefined && arr.length==2) { + if (sidesChanged.indexOf(arr[0]) == -1){ sidesChanged.push(arr[0]); } clock.blocks[arr[0]][arr[1]].deleted = 1; diff --git a/js/entities.js b/js/entities.js index e61fcb9..eba10b2 100644 --- a/js/entities.js +++ b/js/entities.js @@ -148,12 +148,12 @@ 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; - } + 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 }; @@ -197,10 +197,10 @@ function Clock(sideLength) { if (gameState != 1) return; block.settled = 1; block.tint = 0.6; - var lane = this.sides - block.fallingLane;// -this.position; + 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; + 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; @@ -212,7 +212,7 @@ function Clock(sideLength) { if (block.settled) { return; } - + if (position !== undefined) { arr = tArr; if (position <= 0) { diff --git a/js/input.js b/js/input.js index 570e506..b53c10e 100644 --- a/js/input.js +++ b/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].pageXwindow.innerWidth/2){ - if (gameState != 1 && gameState != -2) { - init(); - } - MainClock.rotate(-1); - } +document.body.addEventListener('touchstart', function(e) { + if (e.changedTouches[0].pageXwindow.innerWidth/2) { + if (gameState != 1 && gameState != -2) { + init(); + } + MainClock.rotate(-1); + } }, false) + diff --git a/js/main.js b/js/main.js index f9b50f0..a75002e 100644 --- a/js/main.js +++ b/js/main.js @@ -172,122 +172,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 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) { @@ -320,10 +204,10 @@ function animLoop() { update(); render(); if (checkGameOver()) { - isGameOver--; - if (isGameOver === 0) { + // isGameOver--; + // if (isGameOver === 0) { gameState = 2; - } + // } } } else if (gameState === 0) { @@ -375,6 +259,6 @@ function checkGameOver() { return false; } -window.onblur = function (e) { +window.onblur = function(e) { if (gameState == 1) gameState = -1; }; diff --git a/js/math.js b/js/math.js index d2f8b8e..fdf254f 100644 --- a/js/math.js +++ b/js/math.js @@ -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; diff --git a/js/render.js b/js/render.js new file mode 100644 index 0000000..e395a45 --- /dev/null +++ b/js/render.js @@ -0,0 +1,32 @@ +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(); + settings.prevScale = settings.scale; +} diff --git a/js/update.js b/js/update.js new file mode 100644 index 0000000..5be1854 --- /dev/null +++ b/js/update.js @@ -0,0 +1,78 @@ +//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 Date: Sun, 25 May 2014 22:17:26 -0400 Subject: [PATCH 2/6] more comments in entities --- js/entities.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/entities.js b/js/entities.js index c6e9ed7..d46ad37 100644 --- a/js/entities.js +++ b/js/entities.js @@ -33,9 +33,9 @@ function Block(fallingLane, color, iter, distFromHex, settled) { this.distFromHex = distFromHex || settings.startDist * settings.scale ; this.incrementOpacity = function() { - if (this.deleted) { - if (this.opacity >= 1 - .075) { + //add shakes + if (this.opacity >= .925) { var tLane = this.attachedLane - MainClock.position; tLane = MainClock.sides - tLane; while (tLane < 0) { @@ -45,8 +45,10 @@ function Block(fallingLane, color, iter, distFromHex, settled) { 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; } @@ -54,6 +56,7 @@ function Block(fallingLane, color, iter, distFromHex, settled) { }; this.getIndex = function (){ + //get the index of the block in its stack var parrentArr = MainClock.blocks[this.attachedLane] for (var i = 0; i < parentArr.length; i++) { if (parentArr[i] == this) { From 6ef7f09da7df2ca42f3983d84bddede86ebb4c2a Mon Sep 17 00:00:00 2001 From: garrettdreyfus Date: Sun, 25 May 2014 22:29:34 -0400 Subject: [PATCH 3/6] you dont spell parent parrent --- js/entities.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/entities.js b/js/entities.js index d46ad37..e320ee1 100644 --- a/js/entities.js +++ b/js/entities.js @@ -57,7 +57,7 @@ function Block(fallingLane, color, iter, distFromHex, settled) { this.getIndex = function (){ //get the index of the block in its stack - var parrentArr = MainClock.blocks[this.attachedLane] + var parentArr = MainClock.blocks[this.attachedLane] for (var i = 0; i < parentArr.length; i++) { if (parentArr[i] == this) { return i; From ff2978b9adcd07cb4ae9d305264858f9fa7d43ee Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sun, 25 May 2014 22:50:13 -0400 Subject: [PATCH 4/6] refactor for days --- index.html | 2 + js/Block.js | 153 ++++++++++++++++++++++++ js/Clock.js | 153 ++++++++++++++++++++++++ js/entities.js | 308 ------------------------------------------------- 4 files changed, 308 insertions(+), 308 deletions(-) create mode 100644 js/Block.js create mode 100644 js/Clock.js diff --git a/index.html b/index.html index bec440c..2400952 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,8 @@ + + diff --git a/js/Block.js b/js/Block.js new file mode 100644 index 0000000..71bd415 --- /dev/null +++ b/js/Block.js @@ -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; + }; +} diff --git a/js/Clock.js b/js/Clock.js new file mode 100644 index 0000000..d57d1db --- /dev/null +++ b/js/Clock.js @@ -0,0 +1,153 @@ +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)'); + }; +} diff --git a/js/entities.js b/js/entities.js index 596bd81..f3a8760 100644 --- a/js/entities.js +++ b/js/entities.js @@ -1,159 +1,5 @@ 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) { - //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; - }; -} - // 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; @@ -164,157 +10,3 @@ var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.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)'); - }; -} From 7b6a91086513dbcc18e8205f6c7b44eb437bbec5 Mon Sep 17 00:00:00 2001 From: garrettdreyfus Date: Sun, 25 May 2014 23:12:47 -0400 Subject: [PATCH 5/6] added combo multiplier --- js/Clock.js | 2 ++ js/checking.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/js/Clock.js b/js/Clock.js index d57d1db..259b908 100644 --- a/js/Clock.js +++ b/js/Clock.js @@ -12,6 +12,8 @@ function Clock(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([]); diff --git a/js/checking.js b/js/checking.js index 410d01c..2f04f78 100644 --- a/js/checking.js +++ b/js/checking.js @@ -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; } From 23139401089850b700ad179ad135a186396b9894 Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sun, 25 May 2014 23:42:06 -0400 Subject: [PATCH 6/6] display score in center --- index.html | 2 +- js/render.js | 3 +++ js/update.js | 8 ++------ js/view.js | 24 +++++++++++++----------- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 2400952..6a5a777 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@ - + diff --git a/js/render.js b/js/render.js index e395a45..c07d36a 100644 --- a/js/render.js +++ b/js/render.js @@ -28,5 +28,8 @@ function render() { } MainClock.draw(); + if (gameState == 1) { + drawScoreboard(); + } settings.prevScale = settings.scale; } diff --git a/js/update.js b/js/update.js index f19c6ae..8b3b865 100644 --- a/js/update.js +++ b/js/update.js @@ -5,7 +5,7 @@ function update() { var now = Date.now(); if (importing) { - if (importedHistory[count]) { + // 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); } @@ -14,7 +14,7 @@ function update() { MainClock.rotate(importedHistory[count].rotate); } - } + // } } else if (gameState == 1) { waveone.update(); @@ -71,8 +71,4 @@ function update() { } count++; - if (score != prevScore) { - // updateScoreboard(); - prevScore = score; - } } diff --git a/js/view.js b/js/view.js index c3199cf..372b5c0 100644 --- a/js/view.js +++ b/js/view.js @@ -18,24 +18,26 @@ 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