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>

ポイントという名前のdivを移動する際に問題が発生しました.div、ポイントを使用すると移動しません$(document).loadが、他のdivは機能します。どうすれば修正できますか？

私の2番目の質問は、div「ポイント」がdiv「プレーヤー」に触れたときにどのように確認できるかです。その後、divポイントを開始に戻し、ループを作成します。

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

2 番目の質問:

http://api.jquery.com/position/を使用すると、両方の div の位置を知ることができ、要素の幅と高さもわかっているため、各要素が占める領域を計算できます。要素が互いに接触します。

于 2013-06-17T09:27:37.797 に答える