Javascript: Check collision between two divs

Question

Is there any way to check, if DIV with name for example "character" is overlaping DIV with name "ground" ?

I want to do this with clean Javascript, I know that jQuery is better, but that's what I don't want. I saw this post: check collision between certain divs? , but it does not return anything.

Thanks for help.

Answer 1

First, I'd suggest you check out the HTML5 canvas element, as by the sounds of it, you want to make a game, and the canvas is great for that ;)

But, to answer your question, you could create or get div elements with document.createElement() or getElementById() respectively, and get their style properties either by getting their JS-set values (element.style) or use getComputedStyle if you'd prefer to set initial values in CSS.

Make sure that, however you get these CSS properties, they'll need to be parsed into something that JS can digest. For integer-based positions, parseInt() usually does the trick.

Next, you do the math. In this case, you'd want to see if the character div's top, plus its height, is greater than the top position of the ground. If it is, it has collided.

To set the style back to the div, you can just set the style property.

Here's an example (copied from this fiddle):

var character = document.getElementById("character");
var ground    = document.getElementById("ground");

//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";

//For every 33ms (about 30fps)
setInterval(function(){
    
    //Get the height and position of the player
    var charTop    = parseInt(character.style.top),
        charHeight = parseInt(character.style.height);
    
    //and the top of the ground
    var groundTop = parseInt(ground.style.top);
    
    //linear gravity? Why now?
    charTop += 5;
    
    //If the character's bottom is hitting the ground,
    //Stop moving
    if(charTop + charHeight > groundTop) {
        charTop = groundTop - charHeight;    
    }
    
    //Set the character's final position    
    character.style.top = charTop + "px";
},33);

#character {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50px;
    background-color: #F00;
}

#ground {
    position: absolute;
    width: 300px;
    height: 60px;
    left: 0px;
    background-color: #A66;
}

<div id="character"></div>
<div id="ground"></div>

One more thing: While there are convoluted ways to get element positions when elements use different positioning properties (ex: the player uses top/left coordinates, where the ground uses bottom), it's a lot harder to manage.