2

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

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

现在我遇到了关于移动名为 point 的 div 的问题。当我使用 div 时，point没有移动，$(document).load但其他 div 可以工作。我该如何解决？

我的第二个问题是如何检查 div "point" 何时触摸 div "player" 然后我将 div point 返回到开始并进行循环。

4

2 回答 2

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;
            }
        }
于 2013-06-17T09:45:02.517 回答
0

对于第二个问题：

通过http://api.jquery.com/position/可以知道两个 div 的位置，也知道元素的宽高，可以计算出每个元素所占的区域，然后当元素相互接触。

于 2013-06-17T09:27:37.797 回答