How can I get an Element based on position? (collision detection)

[Ratcoon2]

example...

Div1 (moves with arrow keys and is the top layer)
Div2 (bottom layer)

what I want to try to do is the following:

when Div1 moves over Div2 (if Div1's position = Div2's position) execute code.

the problem I have is I know how to do it as listed above if I know the ID or Div2,3,4 etc, but all the Div's except for Div1 are going to be dynamically generated.

here is a better example: Checkers.

the border is created dynamically (red/black squares)
Now if I move a object above a red square - is there a way using javascript to say detect that the square I moved to is red?

I will know Div1's positioning, but need to know when's it's positioning matching another Div - how to pull that Div's ID or other info.

[Dormilich]

the problem I have is I know how to do it as listed above if I know the ID or Div2,3,4 etc, but all the Div's except for Div1 are going to be dynamically generated.

that doesn’t matter. you can always store the reference to those created div objects (I mean, what other thing do you do with an id than using it to get the div object?)

to detect, whether the square is red or black, that depends on how you determine the position. (e.g. in a mouseup event, the event should occur in the div as well)

[Ratcoon2]

maybe a better example is needed.

Here is a code example:

for (i=0;i<10;i++)
{
if (i==5)
{
document.write('<br>');
}
document.write('<div class="bgdiv" style="width=32px;height=32px;">'+i+'>');
}
 

so now I have a 5x2 set of 32px divs with each having the div number as the innerHTML, on top of that (z-index:100) I have another div that moves based on the arrow keys. as the top div moves I need to be able to find out which of the generated divs is below it.

so if the top div is moved (by the arrow keys, if it were a game this would be the player) to position 96, 64 (which would be on top of div#7) how do I pull the innerHTML of that div with only knowing the position of the player div?

I know this may sound really confusing - let me know if you need more information.

[Dormilich]

so now I have a 5x2 set of 32px divs with each having the div number as the innerHTML, on top of that (z-index:100)

wouldn’t it be easier to use a table?

I have another div that moves based on the arrow keys. as the top div moves I need to be able to find out which of the generated divs is below it.

that means you change the top/left position by pressing the arrow keys?

[Ratcoon2]

wouldn’t it be easier to use a table?

I could do with a table for the 32px divs - can change that.

that means you change the top/left position by pressing the arrow keys?

yes, the top/left position changes based on arrow keys (example left arrow moves -8px) and would want to be able to find out when moved -8px left is it now above box 152 or box 151 still since the boxes are 32px

pretty much if I had the ability to use the X,Y of the moving object and get the other objects located at that X,Y then I can make it work.


UPDATE:
found my fix.

function getPosition(playerX,playerY)
{
objectCounter=document.getElementsByTagName('td');
detectCollision=false;
for (i=0;i<objectCounter.length;i++)
{
    if (playerX==objectCounter[i].offsetLeft && playerY==objectCounter[i].offsetTop)
    {
        document.getElementById('guiDebug').innerHTML=objectCounter[i].id;
        document.getElementById('guiDebug').innerHTML+='<br>'+objectCounter[i].offsetLeft;
        document.getElementById('guiDebug').innerHTML+=', '+objectCounter[i].offsetTop;
        document.getElementById('guiDebug').innerHTML+='<br>'+objectCounter[i].value;
        if (objectCounter[i].value=="Wall")
        {
            detectCollision=true;
        }
    }
}
return detectCollision;
}