Question

我已经移动2个div的余量（使用变量和变量++或 - 在js中使用style属性来改变边距）就像那样：

<!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>

现在我遇到了关于移动div命名点的问题。当我使用$(document).load但另一个div工作时，div point 没有移动。我该如何解决这个问题？

我的第二个问题是我如何检查div“点”触摸div“播放器”然后我将div点返回到开始并进行循环。

Answer 1

试试这个移动点

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;
            }
        }

Answer 2

关于第二个问题：

使用http://api.jquery.com/position/，您可以知道两个div的位置，并且您也知道元素的宽度和高度，您可以计算每个元素占用的区域，然后当元素相互接触时

检查div是否接触另一个div

2 个答案: