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

noah is kewl

Browse source
This commit is contained in:
Michael Yang 2014-05-17 12:50:12 -04:00
parent 258e961548
commit 4666d2c129
3 changed files with 43 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
entities.js
View file

@ -1,16 +1,22 @@
//you can change these to sexier stuff
var colors = [
"black",
"orange",
"red",
"blue",
"black",
"orange",
"red",
"blue",
];
var Clock = function(sides) {
var Clock = function(sideLength) {
this.position = 0;
this.sides = sides;
this.sides = 6;
this.blocks = [];
for(var i=0; i<sides; i++) {
this.angle = 30;
this.sideLength = sideLength;
this.strokeColor = 'black';
this.x = canvas.width / 2;
this.y = canvas.height / 2;
for(var i=0; i< this.sides; i++) {
this.blocks.push([]);
}
@ -19,7 +25,31 @@ var Clock = function(sides) {
}
this.rotate = function(steps) {
this.position += steps;
this.positione += steps;
this.position = Math.abs(((this.position%sides)+this.position) % sides);
}
this.draw = function() {
this.drawPolygon(this.x, this.y, this.sides, this.sideLength, this.angle);
}
this.drawPolygon = function(x, y, sides, radius, theta) { // can make more elegant, reduce redundancy, fix readability
ctx.beginPath();
var coords = rotatePoint(0, radius, theta);
ctx.moveTo(coords.x + x, coords.y + y);
var oldX = coords.x;
var oldY = coords.y;
for (var i = 0; i < sides; i++) {
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;
// console.log(coords);
}
ctx.closePath();
// ctx.fill();
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
}

2
index.html
View file

@ -5,7 +5,7 @@
</head>
<body>
<center>
<canvas id="canvas" width = '700' height = '700' style='background-color:rgba(23,23,23, 1)'></canvas>
<canvas id="canvas" width = '700' height = '700'></canvas>
</center>
<script src="math.js"></script>
<script src="entities.js"></script>

64
main.js
View file

@ -10,20 +10,21 @@ window.requestAnimFrame = (function(){
};
})();
// var blocks = [];
var blocks = [];
<<<<<<< HEAD
for (var i = 0; i < 12; i++) {
blocks.push(new Block(i, 'green'));
}
var MainClock = new Clock(65);
function Render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blocks.forEach(function(o){
o.draw();
o.distFromHex -= 1/100;
});
MainClock.draw();
requestAnimFrame(Render);
}
@ -70,60 +71,3 @@ function Block(lane, color, distFromHex) {
};
}
=======
// for (var i = 0; i < 6; i++) {
// blocks.push(new Block(i, 'green'));
// }
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;
// console.log(coords);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function Render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// blocks.forEach(function(o){
// o.draw();
// });
drawPolygon(100, 100, 6, 100, 0);
requestAnimFrame(Render);
}
// function Block(lane, color, time) {
// this.lane = lane;
// this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane;
// this.color = color;
// this.draw = function() {
// ctx.translate(canvas.width / 2, canvas.height / 2);
// ctx.rotate(this.angle);
// ctx.fillStyle = '#000';
// ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30);
// ctx.restore();
// ctx.fillRect(200, 200, 200, 200);
// };
// if (!time) {
// this.time = time;
// }
// else {
// time = 200;
// }
// }
>>>>>>> cf79fbefde53e6994623e30795f806aa8efdb4d9