Search the Community

Well, I just wanted to give back a little bit to this great community. I've combined two pieces of code to obtain very easy pixel level collision detection. It may not be "perfect" but it seems fairly accurate. Another post on the forum reference jQuery-Collision plugin, which is really efficient at providing fast rectangular detection. It of course, suffers when your images do not resemble boxes. I found this great little piece of code that does pixel level collision detection on canvas objects. Combining the two gives us a nice two layered approach to first determine if objects bounding boxes collide, then get nit-picky about the pixels. So, include both files above, drop a canvas layered below your jQuery objects with the same width & height as your stage and do the following in your game loop/update function: var breakable = player.collision( ".asteroid" ); // jquery-collision if(breakable!==null&&breakable!==undefined&&breakable.length!==0){ // first test bounding box // draw player and enemy on underlying ctx canvas context2D ctx.drawImage(player.get(0), player.position().left, player.position().top); var roid = $(".asteroid"); ctx.drawImage(roid.get(0), roid.position().left, roid.position().top); // get imageData from just the areas we need to check var imgD1 =ctx.getImageData(int(player.position().left), int(player.position().top), int(player.width()), int(player.height())); var imgD2 =ctx.getImageData(roid.position().left,roid.position().top,roid.width(), roid.height()); // now test pixel collisions if(isPixelCollision(imgD1 , player.position().left,player.position().top, imgD2, roid.position().left, roid.position().top, false )){ collide(hitTests[i].id); } ClearCanvas(); // ctx.clearRect(), so we don't leave images behind } I took this from my code, but I think the idea is pretty clear. Combining existing code gives us a pretty decent collision detection. Also, I have found that using the layered canvas allows me to draw some nice effects behind my jQuery objects while still using DOM elements to create a game. I've found that some mobile devices have trouble with straight canvas games so I think this allows me to "turn off" certain effects fairly easy. Hopefully this helps someone while creating a demo / proof-of-concept without spending a ton of time on things like collision detection. At some point, I'll get this in a nice blog post. Cheers, Andrew