wbrawner/hextris
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changed blocks to trapezoids

Browse source
This commit is contained in:
Noah Moroze 2014-05-17 14:02:09 -04:00
commit 3ebe08d047
2 changed files with 38 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
entities.js
View file

@ -27,7 +27,7 @@ var Clock = function(sideLength) {
while(lane < 0) {
lane = lane + this.sides;
}
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length + block.height/2;
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
this.blocks[lane].push(block);
}

50
main.js
View file

@ -10,7 +10,7 @@ window.requestAnimFrame = (function(){
};
})();
clock = new Clock(6);
var clock = new Clock(6);
var blocks = [];
@ -30,6 +30,7 @@ function Render() {
blocks.forEach(function(o){
o.draw();
o.distFromHex -= 1/100;
// o.angle += 1/100;
});
MainClock.draw();
requestAnimFrame(Render);
@ -40,6 +41,23 @@ function Render() {
Render();
})();
function drawPolygon(x, y, sides, radius, theta) {
ctx.beginPath();
ctx.moveTo(x, y + radius);
var oldX = 0;
var oldY = radius;
for (var i = 0; i < sides; i++) {
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;
oldY = coords.y;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function Block(lane, color, distFromHex) {
this.height = 20;
this.width = 65;
@ -60,26 +78,32 @@ function Block(lane, color, distFromHex) {
this.draw = function() {
this.angle = 90 - (30 + 60 * this.lane);
this.width = 2 * this.distFromHex / Math.sqrt(3);
this.widthswag = this.width + 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);
var p3 = rotatePoint(this.widthswag/2, -this.height/2, this.angle);
var p4 = rotatePoint(-this.widthswag/2, -this.height/2, this.angle);
ctx.fillStyle="#FF0000";
var baseX = canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex);
var baseY = canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex);
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(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.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();
};
}
Render();