I'm developing a 2D Top-down Game using HTML5 Canvas and a custom Game Engine. I'm implementing the Quad-intersection detection (Function below, if it helps) on different areas of the Sprites (As they're larger than Tiles in some cases), and have thought of an issue with this. I want to check these areas before moving, using the amount of pixels I will move if allowed to (Nothing blocking the character). Below if the code I use to move the Player:
move: function(delta) {
var distance = Math.floor(this.getSpeed() * Math.floor(delta / 10));
this.setMoving(false);
if(Engine.input().isPressed(Engine.keys.LEFT_ARROW)) {
this._config.x -= distance;
this.setMoving(true);
this.setDir(0);
}
if(Engine.input().isPressed(Engine.keys.RIGHT_ARROW)) {
this._config.x += distance;
this.setMoving(true);
this.setDir(1);
}
if(Engine.input().isPressed(Engine.keys.UP_ARROW)) {
this._config.y -= distance;
this.setMoving(true);
this.setDir(2);
}
if(Engine.input().isPressed(Engine.keys.DOWN_ARROW)) {
this._config.y += distance;
this.setMoving(true);
this.setDir(3);
}
this.boundaries();
}
As the distance is not 1 pixel, it will be checking a few pixels ahead of the Player for solid tiles, and if there is one X many pixels in front of them, they can't move the distance and stop.
Problem
So - let's say the distance is 3. If they're 2 pixels from a Solid Tile, they will not move those 2 pixels because of the collision detection, meaning there will be a 2 pixel gap between the Player and the tile, which will only increase the larger the Player, or Entities, speed.
Is there any way to get around this, other than having to check pixel-by-pixel for each anchor point I want to check collision on?
Collision Detection
collided: function(box1, box2) { // Basic Quad-intersection Collision
return (
( (box1.x >= box2.x && box1.x <= (box2.x + box2.width) ) ||
( (box1.x + box1.width) >= box2.x && (box1.x + box1.width) <= (box2.x + box2.width) ) ) &&
( (box1.y >= box2.y && box1.y <= (box2.y + box2.height) ) ||
( (box1.y + h1) >= box2.y && (box1.y + h1) <= (box2.y + box2.height) ) )
) ? true : false;
},