So, I was trying to build a sample game using Web technologies, for no other reason but the fact that I love computer games.
Now, I need to see if two objects are collided (maybe the bullet with the enemy or mario with the mushroom). I searched google and found nothing so, tried to do it myself and came up with this. I made a very simple code piece which can do that:
Code:
body {padding: 0; margin: 0;}
#box1 {width: 200px; height: 200px; background: #123; cursor: pointer; position: relative; top: 100px; left: 300px;}
#box2 {width: 200px; height: 200px; background: #876; cursor: pointer; position: relative; top: 110px; left: 650px;}
It checkes the edges and it works fine with square-like objects. So, here's my questions:
1. How can I detect which side these objects have collision?
2. Can we have this work with non-squares? (really not necessary, I imagine it consume alot of resources.)
3. How to optimize it?
Thanks guys!
