HTML5 + JS: collision detection for a spinning character

Question

I am working on a Collision system for my game; which is a top-down arrow, the character is always static, and everything else (Map / Level) moves around him.

The symbol also rotates so that it is always in the mouse position.

With that in mind, I can't seem to lower my head around my collision system, which should take into account the rotation of the character, right?

I just want to check if this object really “touches” my character / sprite. I am not sure that the math I use is correct.

This is my collision detection (called each update):

function detectCollisions(){ //Detect for game props if(collides(Map, TestProp)){ console.debug("Touching..."); } } function collides(a, b){ //ctxMap.setTransform(1, 0, 0, 1, -Map.x + gameWidth/2, -Map.y + gameHeight/2); //var transX = -Map.x + gameWidth/2; //var transY = -Map.y + gameHeight/2; //need to take player rotation into account too! //console.debug(ax + " " + bx + " " + b.width + " " + Player.width); //A Width /*return ax < bx + b.width && ax + Player.width > bx && ay < by + b.height && ay + Player.height > by;*/ var xOffset = Math.cos(Player.characterRotation); //+ Player.width; var yOffset = Math.sin(Player.characterRotation); //+ Player.height; return Map.x + xOffset > bx && Map.x + xOffset < bx + b.width && Map.y + yOffset > by && Map.y + yOffset < by + b.height; } 

Also, not sure if this is relevant, but this is the transformation used to move my map canvas:

 ctxMap.setTransform(1, 0, 0, 1, -Map.x + gameWidth/2, -Map.y + gameHeight/2); 

It would be very nice if someone helped me here :) Thank you!

Answer 1

I went into ludum, dared this time and did a tutorial to explain my basic code. Tutorials can be found here: http://www.philjeffes.co.uk/wordpress/?p=63

This is a circle based collision detection example - please feel free to use any code. The following code is an adaptation of this code for general use:

 function CollisionCheck(obj1,obj2){ // If the two objects are less the sum of their collision radii apart then they have collided // Note that one obj is obj (with a loc and a size) and the other is this. // Returns true if the objects are touching var dist = obj2.size + obj1.size; // The distance they must be apart to be not touching if(obj1.x-obj2.x>dist || obj1.x-obj2.x<-dist) return false; // Too far apart in x plane if(obj1.y-obj2.y>dist || obj1.y-obj2.y<-dist) return false; // Too far apart in y plane var xDist = obj1.x-obj2.x; var yDist = obj1.y-obj2.y; var hyp = Math.sqrt((xDist*xDist)+(yDist*yDist)); if(hyp<dist) return true; return false; } 

EDIT

Math.abs calls removed as indicated in the comments on vals.

Answer 2

Personally, I wouldn't worry so much about a character collision. The reason I'm talking is simple.

Let him see that you are walking close to the wall. Then you turn, following the mouse, and the sprite then overlaps the wall. What are you doing now? Either you stop the turn, which will lead to twisting movements, or you block the sprite overlap, and the player gets completely stuck until they become free again.

My preference would be to use the circle of collisions. If the player is closer than R pixels from the wall, consider it a collision and stop the player from moving. Thus, even if the player turns, the sprite will never make the player get stuck, and he can always move away from the wall.