So I have this little javascript labyrinth game I've been working on. The player controls a character using the mouse cursor. I have a semi-transparent .png bitmap for walls (all in one file), and the player.
The problem here is that I can't seem to make a working collision system.
Here's the essential part of the code:
// Calculate the distances between the cursor and the player
var xDistance = stage.getStage().mouseX - player.x;
var yDistance = stage.getStage().mouseY - player.y;
// Move the player
if (distance > 1) {
player.x += xDistance * easingAmount;
player.y += yDistance * easingAmount;
}
// Check collision for player (bounds)
var mapCollision = collisionMethod(bounds, mapLines, 1);
if (mapCollision) {
if (xDistance > 0 || xDistance < 0)
player.x -= xDistance * easingAmount;
else if (yDistance > 0 || yDistance < 0)
player.y -= yDistance * easingAmount;
}
CollisionMethod is actually ndgmr.checkPixelCollision.
The collision should slide along the walls. This collision only works when the player collides with Y-axis walls.
I am still pretty new with JS, and there's probably a better way to create collision for this kind of situation, so any kind of help or information would be greatly appreciated. Thanks!