Fixed mod arithmetic
This commit is contained in:
commit
106edd1489
5 changed files with 71 additions and 41 deletions
13
entities.js
13
entities.js
|
@ -15,11 +15,20 @@ var Clock = function(sides) {
|
|||
}
|
||||
|
||||
this.addBlock = function(block) {
|
||||
this.blocks[this.position].push(block);
|
||||
var lane = 0;
|
||||
lane += this.position + block.lane;
|
||||
lane = lane % this.sides;
|
||||
while(lane < 0) {
|
||||
lane = lane + this.sides;
|
||||
}
|
||||
this.blocks[lane].push(block);
|
||||
}
|
||||
|
||||
this.rotate = function(steps) {
|
||||
this.position += steps;
|
||||
this.position = Math.abs(((this.position%sides)+this.position) % sides);
|
||||
this.position = this.position % this.sides;
|
||||
while(this.position < 0) {
|
||||
this.position = this.position + this.sides;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
10
index.html
10
index.html
|
@ -2,18 +2,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Wasted Time</title>
|
||||
<style>
|
||||
#canvas {
|
||||
width: 1200px;
|
||||
height: 700px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<canvas id="canvas"></canvas>
|
||||
<canvas id="canvas" style='border: 1px black solid;' width='1000' height='1000'></canvas>
|
||||
</center>
|
||||
|
||||
<script src="math.js"></script>
|
||||
<script src="entities.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="math.js"></script>
|
||||
|
|
11
input.js
11
input.js
|
@ -1,2 +1,9 @@
|
|||
keypress.simple_combo("left", clock.rotate(-1));
|
||||
keypress.simple_combo("right", clock.rotate(1));
|
||||
keypress.register_combo({
|
||||
keys: "right",
|
||||
on_keyup: function(){clock.rotate(1)},
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "left",
|
||||
on_keyup: function(){clock.rotate(-1)},
|
||||
});
|
||||
|
|
73
main.js
73
main.js
|
@ -1,4 +1,3 @@
|
|||
// main thing here
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
|
@ -6,7 +5,7 @@ window.requestAnimFrame = (function(){
|
|||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function( callback ){
|
||||
function( callback ) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
@ -15,38 +14,58 @@ clock = new Clock(6);
|
|||
|
||||
var blocks = [];
|
||||
|
||||
for (var i = 0; i < 6; i++) {
|
||||
blocks.push(new Block(i, 'green'));
|
||||
}
|
||||
// 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();
|
||||
});
|
||||
// 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;
|
||||
// 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);
|
||||
};
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (!time) {
|
||||
this.time = time;
|
||||
}
|
||||
else {
|
||||
time = 200;
|
||||
}
|
||||
}
|
1
math.js
1
math.js
|
@ -8,3 +8,4 @@ function rotatePoint(x, y, theta) {
|
|||
y: rotY,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue