CODEWITHSUNDEEP
javascripthtmlcss
copypaste
copypaste

Reputation: 175

Check if a div touches another div

I've made margin of 2 divs move (using variable and variable++ or -- with style attribute in js to change margin) Like that:

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                position: absolute;
                background: #f00;
            }
            .point{
                position: absolute;
                width: 15px;
                height: 15px;
                background: #fff;
                border-radius: 10px;
                margin: 0px 0 0;
            }
            .player{
                position: absolute;
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 550px 550px 0px;
            }
        </style>
        <script>
            var num = 550;
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow              
                    case 37: num = num-- - 15;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
                        break;
                    // Right Arrow              
                    case 39: num = 15 + num++;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
                        break;
                }
            });
            var nump = 0;
            $(document).load(function () {
                nump++;
                document.getElementById('point').style.margin = nump + 'px 0px 0px';
            });
        </script>
    </head>
    <body>
        <div class="point" id="point"></div>
        <div class="player" id="player"></div>
    </body>
</html>

Now I got problem about moving div named point.The div, point is not moving when I use $(document).load but the other div works. How can I fix that?

My second question is how can i check when div "point" touch div "player" then i'll return div point to the start and make a loop.

Upvotes: 2

Views: 3496

Answers (2)

Shinov T
Shinov T

Reputation: 862

try this to move the point

var nump = 0;
        var touch = false;
        var flagtouch;
        $(document).ready(function () {
        flagtouch = setInterval(function(){
            movePoint(nump);
        },1000);        
        });
        function  movePoint()
        {
            document.getElementById('point').style.margin = nump + 'px 0px 0px';
            touch = chekTouch();   // check whether the divs touches and return true if touched
            if(touch)
            {
              clearInterval(flagtouch);
            }
            else
            {
            nump = nump+5;
            }
        }

Upvotes: 1

Alwaison
Alwaison

Reputation: 1

For the second question:

With http://api.jquery.com/position/, you can known the position of both divs, and as you know too the width and height of the elements, you can calculate the region occupied by each element, and then when the elements touch each other.

Upvotes: 0

Related Questions