added collision detection

This commit is contained in:
meadowstream 2014-05-17 13:55:02 -04:00
parent b4877c3e97
commit 5bc78e8081
3 changed files with 38 additions and 15 deletions

View file

@ -1,9 +1,9 @@
//you can change these to sexier stuff
var colors = [
"black",
"orange",
"red",
"blue",
"black",
"orange",
"red",
"blue",
];
var Clock = function(sideLength) {
@ -12,7 +12,7 @@ var Clock = function(sideLength) {
this.blocks = [];
this.angle = 30;
this.sideLength = sideLength;
this.strokeColor = 'black';
this.strokeColor = 'blue';
this.x = canvas.width / 2;
this.y = canvas.height / 2;
@ -21,6 +21,7 @@ var Clock = function(sideLength) {
}
this.addBlock = function(block) {
block.settled = 1;
var lane = 0;
lane += this.position + block.lane;
lane = lane % this.sides;
@ -28,7 +29,25 @@ var Clock = function(sideLength) {
lane = lane + this.sides;
}
this.blocks[lane].push(block);
}
};
this.doesBlockCollide = function(block, iter) {
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) {
this.addBlock(block);
}
}
else {
if (block.distFromHex - (this.sideLength/2) * Math.sqrt(3) <= 0) {
this.addBlock(block);
}
}
};
this.rotate = function(steps) {
this.position += steps;
@ -37,11 +56,11 @@ var Clock = function(sideLength) {
this.position = this.position + this.sides;
}
this.angle = 30 + this.position * 60;
}
};
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();
@ -61,5 +80,5 @@ var Clock = function(sideLength) {
// ctx.fill();
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
};
}

View file

@ -5,14 +5,14 @@
</head>
<body>
<center>
<canvas id="canvas" width = '700' height = '700'></canvas>
<canvas id="canvas" width = '700' height = '700' style = 'background-color:rgb(23, 23, 23)'></canvas>
</center>
<script src="math.js"></script>
<script src="entities.js"></script>
<script src="main.js"></script>
<script src="math.js"></script>
<script src="keypress.min.js"></script>
<script src="input.js"></script>
<script src="checking.js"></script>
<script src="main.js"></script>
</body>
</html>

12
main.js
View file

@ -14,18 +14,21 @@ var clock = new Clock(6);
var blocks = [];
for (var i = 0; i < 12; i++) {
for (var i = 0; i < 6; i++) {
blocks.push(new Block(i, 'green'));
}
var MainClock = new Clock(65);
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;
}
o.draw();
o.distFromHex -= 1/100;
// o.angle += 1/100;
});
MainClock.draw();
requestAnimFrame(Render);
@ -53,7 +56,8 @@ function drawPolygon(x, y, sides, radius, theta) {
ctx.stroke();
}
function Block(lane, color, distFromHex) {
function Block(lane, color, distFromHex, settled) {
this.settled = (settled == undefined) ? 0 : 1;
this.height = 20;
this.width = 65;
this.lane = lane;