sort of fixing collision detection
This commit is contained in:
meadowstream
parent
c72aca0a57
commit
dafc21cd2b
2 changed files with 47 additions and 93 deletions
56
entities.js
56
entities.js
|
|
@ -23,16 +23,17 @@ function Block(lane, color, distFromHex, settled) {
|
|||
this.distFromHex = distFromHex;
|
||||
}
|
||||
else {
|
||||
this.distFromHex = 300;
|
||||
this.distFromHex = 470;
|
||||
}
|
||||
this.draw = function() {
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3) + this.height;
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthswag = this.width + this.height + 5;
|
||||
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);
|
||||
var p3 = rotatePoint(this.widthswag/2, -this.height/2, this.angle);
|
||||
var p4 = rotatePoint(-this.widthswag/2, -this.height/2, this.angle);
|
||||
|
||||
ctx.fillStyle="#FF0000";
|
||||
ctx.fillStyle=this.color;
|
||||
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);
|
||||
|
||||
|
|
@ -45,6 +46,7 @@ function Block(lane, color, distFromHex, settled) {
|
|||
ctx.closePath();
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
var Clock = function(sideLength) {
|
||||
|
|
@ -64,22 +66,29 @@ var Clock = function(sideLength) {
|
|||
this.addBlock = function(block) {
|
||||
block.settled = 1;
|
||||
var lane = 0;
|
||||
lane += this.position + block.lane;
|
||||
lane = lane % this.sides;
|
||||
lane += this.position - block.lane;
|
||||
while(lane < 0) {
|
||||
lane = lane + this.sides;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
// consolidateBlocks(this,lane,this.blocks.length-1);
|
||||
};
|
||||
|
||||
this.doesBlockCollide = function(block, iter, index) {
|
||||
this.doesBlockCollide = function(block, iter) {
|
||||
if (block.settled) return;
|
||||
var arr = this.blocks[(block.lane + this.position % this.sides) % this.sides];
|
||||
var thisIn = index === undefined ? arr.length - 1 : index - 1;
|
||||
|
||||
var lane = block.lane - this.position;
|
||||
|
||||
while (lane < 0) {
|
||||
lane += 6;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
|
||||
var arr = this.blocks[lane];
|
||||
if (arr.length > 0) {
|
||||
if (block.distFromHex + iter - arr[thisIn].distFromHex - arr[thisIn].height <= 0) {
|
||||
if (block.distFromHex + iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
|
|
@ -93,22 +102,19 @@ var Clock = function(sideLength) {
|
|||
};
|
||||
|
||||
this.rotate = function(steps) {
|
||||
var oldPosition = this.position;
|
||||
this.position += steps;
|
||||
while (this.position < 0) {
|
||||
this.position += 6;
|
||||
}
|
||||
|
||||
this.position = this.position % this.sides;
|
||||
while(this.position < 0) {
|
||||
this.position = this.position + this.sides;
|
||||
}
|
||||
for(var i=0; i<this.blocks.length; i++) {
|
||||
for(var j=0; j<this.blocks[i].length; j++) {
|
||||
this.blocks[i][j].lane += (this.position - oldPosition);
|
||||
this.blocks[i][j].lane = this.blocks[i][j].lane % this.sides;
|
||||
while(this.blocks[i][j].lane < 0) {
|
||||
this.blocks[i][j].lane += this.sides;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.angle = 30 + this.position * 60;
|
||||
this.blocks.forEach(function(blocks){
|
||||
blocks.forEach(function(block){
|
||||
block.angle = block.angle - steps * 60;
|
||||
});
|
||||
})
|
||||
|
||||
this.angle = this.angle + steps * 60;
|
||||
};
|
||||
|
||||
this.draw = function() {
|
||||
|
|
|
|||
84
main.js
84
main.js
|
|
@ -1,6 +1,5 @@
|
|||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
ct = 0;
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
|
|
@ -24,38 +23,38 @@ var colors = ["green", "red"];
|
|||
function Render() {
|
||||
var now = Date.now();
|
||||
if(now - lastGen > nextGen) {
|
||||
blocks.push(new Block(randInt(0, 5), colors[randInt(0, colors.length-1)]));
|
||||
if (doRand) {
|
||||
blocks.push(new Block(randInt(0, 6), colors[randInt(0, colors.length-1)]));
|
||||
}
|
||||
lastGen = Date.now();
|
||||
nextGen = randInt(500, 1500);
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
var objectsToRemove = [];
|
||||
MainClock.blocks.forEach(function(hexBlocks){
|
||||
for (var i = 0; i < hexBlocks.length; i++) {
|
||||
MainClock.doesBlockCollide(hexBlocks[i], iter, i);
|
||||
if (!hexBlocks[i].settled) {
|
||||
hexBlocks[i].distFromHex -= iter;
|
||||
}
|
||||
|
||||
hexBlocks[i].draw();
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, iter);
|
||||
block.draw();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (var i in blocks) {
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i], iter);
|
||||
if (!blocks[i].settled) {
|
||||
blocks[i].distFromHex -= iter;
|
||||
} else {
|
||||
objectsToRemove.push(blocks[i]);
|
||||
}
|
||||
else {
|
||||
objectsToRemove.push(i);
|
||||
}
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
objectsToRemove.forEach(function(o){
|
||||
blocks.splice(o,1);
|
||||
blocks.splice(o, 1);
|
||||
});
|
||||
ct++;
|
||||
MainClock.draw();
|
||||
}
|
||||
|
||||
|
|
@ -79,55 +78,4 @@ function drawPolygon(x, y, sides, radius, theta) {
|
|||
ctx.closePath();
|
||||
ctx.fill();
|
||||
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.angle = 90 - (30 + 60 * this.lane);
|
||||
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthswag = this.width + this.height + 5;
|
||||
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.widthswag/2, -this.height/2, this.angle);
|
||||
var p4 = rotatePoint(-this.widthswag/2, -this.height/2, this.angle);
|
||||
|
||||
ctx.fillStyle=this.color;
|
||||
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