Revamped collision system

This commit is contained in:
meadowstream 2014-05-17 14:25:22 -04:00
parent 72325517cc
commit bda88c3531
2 changed files with 72 additions and 60 deletions

View file

@ -6,6 +6,47 @@ var colors = [
"blue", "blue",
]; ];
function Block(lane, color, distFromHex, settled) {
this.settled = (settled == undefined) ? 0 : 1;
this.height = 20;
this.width = 65;
this.lane = lane;
this.angle = 90 - (30 + 60 * lane);
if (this.angle < 0) {
this.angle += 360;
}
this.color = color;
if (distFromHex) {
this.distFromHex = distFromHex;
}
else {
this.distFromHex = 300;
}
this.draw = function() {
this.width = 2 * this.distFromHex / Math.sqrt(3) + 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);
ctx.fillStyle="#FF0000";
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(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();
};
}
var Clock = function(sideLength) { var Clock = function(sideLength) {
this.position = 0; this.position = 0;
this.sides = 6; this.sides = 6;
@ -31,12 +72,12 @@ var Clock = function(sideLength) {
this.blocks[lane].push(block); this.blocks[lane].push(block);
}; };
this.doesBlockCollide = function(block, iter) { this.doesBlockCollide = function(block, iter, index) {
if (block.settled) return; if (block.settled) return;
var arr = this.blocks[(block.lane + this.position % this.sides) % this.sides]; var arr = this.blocks[(block.lane + this.position % this.sides) % this.sides];
if (arr.length > 0) { var thisIn = index === undefined ? arr.length - 1 : index - 1;
debugger; if (arr.length > 0 || thisIn > 0) {
if (block.distFromHex + iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) { if (block.distFromHex + iter - arr[thisIn].distFromHex - arr[thisIn].height <= 0) {
this.addBlock(block); this.addBlock(block);
} }
} }
@ -53,7 +94,7 @@ var Clock = function(sideLength) {
this.position += steps; this.position += steps;
this.position = this.position % this.sides; this.position = this.position % this.sides;
while(this.position < 0) { while(this.position < 0) {
this.position = this.position + this.sides; this.position = this.position + this.sides;
} }
this.angle = 30 + this.position * 60; this.angle = 30 + this.position * 60;
}; };

81
main.js
View file

@ -2,7 +2,7 @@ var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
window.requestAnimFrame = (function(){ window.requestAnimFrame = (function(){
return window.requestAnimationFrame || return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||
function( callback ) { function( callback ) {
@ -23,13 +23,32 @@ var iter = 1/100;
function Render() { function Render() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
blocks.forEach(function(o){ var objectsToRemove = [];
MainClock.doesBlockCollide(o, iter); MainClock.blocks.forEach(function(hexBlocks){
if (!o.settled) { for (var i = 0; i < hexBlocks.length; i++) {
o.distFromHex -= iter; MainClock.doesBlockCollide(hexBlocks[i], iter, i);
if (!hexBlocks[i].settled) {
hexBlocks[i].distFromHex -= iter;
}
hexBlocks[i].draw();
} }
o.draw();
}); });
for (var i in blocks) {
MainClock.doesBlockCollide(blocks[i], iter);
if (!blocks[i].settled) {
blocks[i].distFromHex -= iter;
} else {
objectsToRemove.push(blocks[i]);
}
blocks[i].draw();
}
objectsToRemove.forEach(function(o){
arr.splice(o,1);
});
MainClock.draw(); MainClock.draw();
requestAnimFrame(Render); requestAnimFrame(Render);
} }
@ -45,7 +64,7 @@ function drawPolygon(x, y, sides, radius, theta) {
var oldX = 0; var oldX = 0;
var oldY = radius; var oldY = radius;
for (var i = 0; i < sides; i++) { for (var i = 0; i < sides; i++) {
var coords = rotatePoint(oldX, oldY, 360 / sides); var coords = rotatePoint(oldX, oldY, 360 / sides);
ctx.lineTo(coords.x + x, coords.y + y); ctx.lineTo(coords.x + x, coords.y + y);
ctx.moveTo(coords.x + x, coords.y + y); ctx.moveTo(coords.x + x, coords.y + y);
oldX = coords.x; oldX = coords.x;
@ -54,52 +73,4 @@ function drawPolygon(x, y, sides, radius, theta) {
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
}
function Block(lane, color, distFromHex, settled) {
this.settled = (settled == undefined) ? 0 : 1;
this.height = 20;
this.width = 65;
this.lane = lane;
this.angle = 90 - (30 + 60 * lane);
if (this.angle < 0) {
this.angle += 360;
}
this.color = color;
if (distFromHex) {
this.distFromHex = distFromHex;
}
else {
this.distFromHex = 300;
}
this.draw = function() {
this.width = 2 * this.distFromHex / Math.sqrt(3) + 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);
ctx.fillStyle="#FF0000";
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(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();
};
} }