I'm working on a simple game to refresh my canvas knowledge. I decided to built the game entirly in JavaScript, which isn't easy to do due to the fact it isn't designed for that purpose. There are no nice little helpers like drawing, object rendering, and most importantly collision detection. I've decided it would probably be easier to use an engine, but since you all know I hate using libraries or engines unless really necessary, I've decided to go about doing all of the code entirely myself from scratch. After a bit of playing around, and some memories from maths lessons in school I figured out how to do collision detection in raw JavaScript code, which I'm going to share with you
First of all, I'd like to point out that since JavaScript is nothing like Actionscript in the sense that there isn't a stage, I am using complete code logic to move my objects around, then rendering them separately by drawing them out onto the canvas using virtual coordinates as reference points. I'm going to write a lot more tutorials on game development with JavaScript very soon, as a whole series; but for now, here is the collision code.
if (
obj1.x <= obj2.x + ((obj1.width + obj2.width) / 2)
&& obj1.x >= obj2.x - ((obj1.width + obj2.width) / 2)
&& obj1.y >= obj2.y - ((obj1.height + obj2.height) / 2)
&& obj1.y >= obj2.y - ((obj1.height + obj2.height) / 2)
) {
console.log('Hit!');
}I'd like to point out that the above code only works on rectangular based objects, but if done right, it's pixel perfect. Feel free to suggest any improvements, or ask for any more help to do with JavaScript Game Development.