I am trying to program a web game in Jquery with the GameQuery plugin, problem is the GameQuery plugin has no support for per pixel collision detection only collision detection with bounding boxes. Is it possible to implement per pixel collision detection in javascript/Jquery?
I have a world map with countries and a player which is moved using the arrow keys, I want to be able to tell which country the player is in at any time and the countries are irregular shapes.
The images are just pngs with solid colours for the country and transparency for the rest.
It is not possible.
You have, however, a not very complicated alternative: use polygon-based collision.
Use an image to present the countries to the user, but use a polygon internally.
You may find a very complete explanation about how to implement this on this forum entry (you may have to scroll down a bit, until you see the images). The guy asking the question there wanted to do more or less the same as you want todo (mouse position instead of character position).
Regards!
Or attack it from a different angle...so to speak...
Vectors may be your key, cool stuff happening at http://www.raphaeljs.com
maybe some sort of combo/integration could work?