diff --git a/entities.js b/entities.js index d62a3e7..ab16932 100644 --- a/entities.js +++ b/entities.js @@ -6,6 +6,47 @@ var colors = [ "blue", ]; + +function Block(lane, color, distFromHex, settled) { + this.settled = (settled == undefined) ? 0 : 1; + this.height = 20; + this.width = 65; + this.lane = lane; + this.angle = 90 - (30 + 60 * lane); + if (this.angle < 0) { + this.angle += 360; + } + + this.color = color; + + if (distFromHex) { + this.distFromHex = distFromHex; + } + else { + this.distFromHex = 300; + } + this.draw = function() { + this.width = 2 * this.distFromHex / Math.sqrt(3) + this.height; + 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.width/2, -this.height/2, this.angle); + var p4 = rotatePoint(-this.width/2, -this.height/2, this.angle); + + ctx.fillStyle="#FF0000"; + var baseX = canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2); + var baseY = canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2); + + ctx.beginPath(); + ctx.moveTo(Math.round(baseX + p1.x), Math.round(baseY + p1.y)); + ctx.lineTo(Math.round(baseX + p2.x), Math.round(baseY + p2.y)); + ctx.lineTo(Math.round(baseX + p3.x), Math.round(baseY + p3.y)); + ctx.lineTo(Math.round(baseX + p4.x), Math.round(baseY + p4.y)); + ctx.lineTo(Math.round(baseX + p1.x), Math.round(baseY + p1.y)); + ctx.closePath(); + ctx.fill(); + }; +} + var Clock = function(sideLength) { this.position = 0; this.sides = 6; @@ -31,12 +72,12 @@ var Clock = function(sideLength) { this.blocks[lane].push(block); }; - this.doesBlockCollide = function(block, iter) { + this.doesBlockCollide = function(block, iter, index) { if (block.settled) return; var arr = this.blocks[(block.lane + this.position % this.sides) % this.sides]; - if (arr.length > 0) { - debugger; - if (block.distFromHex + iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) { + var thisIn = index === undefined ? arr.length - 1 : index - 1; + if (arr.length > 0 || thisIn > 0) { + if (block.distFromHex + iter - arr[thisIn].distFromHex - arr[thisIn].height <= 0) { this.addBlock(block); } } @@ -53,7 +94,7 @@ var Clock = function(sideLength) { this.position += steps; this.position = this.position % this.sides; while(this.position < 0) { - this.position = this.position + this.sides; + this.position = this.position + this.sides; } this.angle = 30 + this.position * 60; }; diff --git a/main.js b/main.js index f4fdb42..e433c1e 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ) { @@ -23,13 +23,32 @@ var iter = 1/100; function Render() { ctx.clearRect(0, 0, canvas.width, canvas.height); - blocks.forEach(function(o){ - MainClock.doesBlockCollide(o, iter); - if (!o.settled) { - o.distFromHex -= iter; + var objectsToRemove = []; + MainClock.blocks.forEach(function(hexBlocks){ + for (var i = 0; i < hexBlocks.length; i++) { + MainClock.doesBlockCollide(hexBlocks[i], iter, i); + if (!hexBlocks[i].settled) { + hexBlocks[i].distFromHex -= iter; + } + + hexBlocks[i].draw(); } - o.draw(); }); + + for (var i in blocks) { + MainClock.doesBlockCollide(blocks[i], iter); + if (!blocks[i].settled) { + blocks[i].distFromHex -= iter; + } else { + objectsToRemove.push(blocks[i]); + } + blocks[i].draw(); + } + + objectsToRemove.forEach(function(o){ + arr.splice(o,1); + }); + MainClock.draw(); requestAnimFrame(Render); } @@ -45,7 +64,7 @@ function drawPolygon(x, y, sides, radius, theta) { var oldX = 0; var oldY = radius; for (var i = 0; i < sides; i++) { - var coords = rotatePoint(oldX, oldY, 360 / sides); + var coords = rotatePoint(oldX, oldY, 360 / sides); ctx.lineTo(coords.x + x, coords.y + y); ctx.moveTo(coords.x + x, coords.y + y); oldX = coords.x; @@ -54,52 +73,4 @@ function drawPolygon(x, y, sides, radius, theta) { ctx.closePath(); ctx.fill(); ctx.stroke(); -} - -function Block(lane, color, distFromHex, settled) { - this.settled = (settled == undefined) ? 0 : 1; - this.height = 20; - this.width = 65; - this.lane = lane; - this.angle = 90 - (30 + 60 * lane); - if (this.angle < 0) { - this.angle += 360; - } - - this.color = color; - - if (distFromHex) { - this.distFromHex = distFromHex; - } - else { - this.distFromHex = 300; - } - this.draw = function() { - this.width = 2 * this.distFromHex / Math.sqrt(3) + this.height; - 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.width/2, -this.height/2, this.angle); - var p4 = rotatePoint(-this.width/2, -this.height/2, this.angle); - - ctx.fillStyle="#FF0000"; - var baseX = canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2); - var baseY = canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2); - - ctx.beginPath(); - ctx.moveTo(Math.round(baseX + p1.x), Math.round(baseY + p1.y)); - ctx.lineTo(Math.round(baseX + p2.x), Math.round(baseY + p2.y)); - ctx.lineTo(Math.round(baseX + p3.x), Math.round(baseY + p3.y)); - ctx.lineTo(Math.round(baseX + p4.x), Math.round(baseY + p4.y)); - ctx.lineTo(Math.round(baseX + p1.x), Math.round(baseY + p1.y)); - ctx.closePath(); - ctx.fill(); - - // ctx.strokeStyle = '#322' - // ctx.beginPath(); - // ctx.moveTo(canvas.width/2, canvas.height/2); - // ctx.lineTo(canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height), canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height)); - // ctx.closePath(); - // ctx.stroke(); - }; - } \ No newline at end of file