I'm having trouble getting collision detection into my 2D WebGL game. I'd appreciate any help! I'm probably doing it badly, as I'm still learning! Here's the code for my player class:
Player.prototype = new Quad();
Player.prototype.constructor = Player;
function Player(width, height, xPos, yPos) {
this.width = width;
this.height = height;
this.xPos = xPos;
this.yPos = yPos;
this.xVel = 0;
this.yVel = 0;
this.falling = true;
this.onCloud = false;
this.horCol = false;
this.update = function(delta) {
this.xPos += (this.xVel * delta) / 1000.0;
this.yPos += (this.yVel * delta) / 1000.0;
if (keydown.left && !this.onCloud) {
this.xVel += -2;
} else if (keydown.right && !this.onCloud) {
this.xVel += 2;
} else if (keydown.left && this.onCloud) {
this.xVel += -6;
} else if (keydown.right && this.onCloud) {
this.xVel += 6;
}
if (this.onCloud) {
this.yPos -= (this.yVel * delta) / 1000.0;
this.yVel = 0;
} else if (this.horCol) {
this.xPos -= (this.xVel * delta) / 1000.0;
this.xVel = 0;
this.horCol = false;
} else {
this.yVel += -2;
}
console.log("isOnCloud: " + this.onCloud + "\nIsHorColling: " + this.horCol);
}
this.checkCollision = function(cloud) {
if (this.collides(this, cloud)) {
this.onCloud = true;
return true;
} else {
this.onCloud = false;
return false;
}
}
this.collides = function(a, b) {
return a.xPos < b.xPos + b.width &&
a.xPos + a.width > b.xPos &&
a.yPos < b.yPos + b.height &&
a.yPos + a.height > b.yPos;
}
}
And here's the updateWorld() function that is run in the main loop:
function updateScene() {
var startTime = (new Date).getTime();
if(lastUpdate) {
var dt = startTime - lastUpdate;
sky.update(dt);
for(var i = 0.0; i < sky.clouds.length; i++) {
if(player.checkCollision(sky.clouds[i])) {
break;
} else {
continue;
}
}
player.update(dt);
}
lastUpdate = startTime;
}The trouble is, I can't figure out a reliable way to differentiate horzontal/vertical collisions. The guy is falling, but he can land on the clouds, but when he hits the side of one I don't want it to be counted as on the cloud! Currently he just slides through, whereas he should be stopped and continue falling. Am I thinking about this the wrong way?
Thanks
EDIT: Here's a git repo I threw up in case you need/want to know anything else: https://github.com/Awevation/Falling