Grow your CSS skills. Land your dream job.

Collision Detection in JS

  • # March 10, 2010 at 11:31 am

    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!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".