fixed merge, kinda
This commit is contained in:
commit
b191dde5e9
4 changed files with 67 additions and 9 deletions
22
entities.js
22
entities.js
|
@ -1,11 +1,25 @@
|
|||
//you can change these to sexier stuff
|
||||
var colors = [
|
||||
"black",
|
||||
"orange",
|
||||
"red",
|
||||
"blue",
|
||||
];
|
||||
|
||||
var Clock = function(sides) {
|
||||
this.position = 0;
|
||||
this.sides = sides;
|
||||
this.blocks = [];
|
||||
for(var i=0; i<sides; i++) {
|
||||
this.blocks.push([]);
|
||||
}
|
||||
}
|
||||
|
||||
var Block = function(color) {
|
||||
this.color = color;
|
||||
};
|
||||
this.addBlock = function(block) {
|
||||
this.blocks[this.position].push(block);
|
||||
}
|
||||
|
||||
this.rotate = function(steps) {
|
||||
this.position += steps;
|
||||
this.position = Math.abs(((this.position%sides)+this.position) % sides);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,15 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Wasted Time</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<center>
|
||||
<canvas id="canvas"></canvas>
|
||||
</center>
|
||||
|
||||
<script src="entities.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="math.js"></script>
|
||||
</body>
|
||||
</html>
|
35
main.js
35
main.js
|
@ -1,4 +1,6 @@
|
|||
// main thing here
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
|
@ -9,11 +11,18 @@ window.requestAnimFrame = (function(){
|
|||
};
|
||||
})();
|
||||
|
||||
var blocks = [];
|
||||
|
||||
for (var i = 0; i < 6; i++) {
|
||||
blocks.push(new Block(i, 'green'));
|
||||
}
|
||||
|
||||
(function animloop(){
|
||||
requestAnimFrame(animloop);
|
||||
render();
|
||||
})();
|
||||
|
||||
|
||||
function render() {
|
||||
requestAnimFrame(animloop);
|
||||
drawClock(10, 10, 0, 6);
|
||||
|
@ -24,13 +33,31 @@ function drawClock(x, y, sides, sideLength, theta) {
|
|||
ctx.beginPath();
|
||||
ctx.moveTo(0, sideLength);
|
||||
for (var i = 0; i < sides; i++) {
|
||||
var coords = rotatePoint(x, y, degToRadians(60));
|
||||
var coords = rotatePoint(x, y, 60);
|
||||
ctx.lineTo(coords.x, coords.y);
|
||||
ctx.moveTo(coords.x, coords.y);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function degToRadians(degrees) {
|
||||
return ((Math.PI) / 180) * degrees;
|
||||
}f
|
||||
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 = color;
|
||||
ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 70, 30);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
if (!time) {
|
||||
this.time = time;
|
||||
}
|
||||
else {
|
||||
time = 200;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
10
math.js
Normal file
10
math.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
function rotatePoint(x, y, theta) {
|
||||
var thetaRad = theta * (Math.PI / 180);
|
||||
var rotX = Math.cos(thetaRad) * x - Math.sin(thetaRad) * y;
|
||||
var rotY = Math.sin(thetaRad) * x + Math.cos(thetaRad) * y;
|
||||
|
||||
return {
|
||||
x: rotX,
|
||||
y: rotY,
|
||||
};
|
||||
}
|
Loading…
Reference in a new issue