Revamped collision system
This commit is contained in:
parent
72325517cc
commit
bda88c3531
2 changed files with 72 additions and 60 deletions
49
entities.js
49
entities.js
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
77
main.js
77
main.js
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -55,51 +74,3 @@ function drawPolygon(x, y, sides, radius, theta) {
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
Loading…
Reference in a new issue