1

我有这个代码：

            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;
            var touch = false;
            var flagtouch;
            $(document).ready(function () {
                flagtouch = setInterval(function () {
                    movePoint(nump);

                }, 10);
            });
            function movePoint() {
                document.getElementById('point').style.margin = nump + 'px 615px 0px';
                touch = chekTouch($('#point'), $('#player'))   // check whether the divs touches and return true if touched
                if (touch) {
                    $('.point').ready(function () {
                        var docWidth = $(document).width();
                        var $div = $('.point');
                        var divWidth = $div.width();
                        var widthMax = docWidth - divWidth;
                        $div.css({
                            marginLeft: Math.floor(Math.random() * widthMax),
                            marginTop: 150,
                        });
                    });
                }
                else {
                    nump++;
                }
            }

            function chekTouch($div1, $div2) {
                var x1 = $div1.offset().left;
                var y1 = $div1.offset().top;
                var h1 = $div1.outerHeight();
                var w1 = $div1.outerWidth();
                var b1 = y1 + h1;
                var r1 = x1 + w1;
                var x2 = $div2.offset().left;
                var y2 = $div2.offset().top;
                var h2 = $div2.outerHeight();
                var w2 = $div2.outerWidth();
                var b2 = y2 + h2;
                var r2 = x2 + w2;

                if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
                return true;
            }

现在，我得到了这个触摸功能，当 div点触摸 div播放器时，他以随机方式执行 marginLeft 并将 marginTop 设置为 0px。

所以它的工作但只有 1 个问题，随机并没有停止工作，当 div 彼此物理接触时他会继续移动。

我的问题是我怎样才能让随机边距只有在他触摸 div 时才起作用？

谢谢！

4

2 回答 2

2

// - 这是因为您使用的是 setInterval，它每 10 毫秒播放一次

编辑：

对不起，我误解了你的意思，

在它接触之后，你应该像这样清除间隔：

clearInterval(flagtouch);

然后循环将停止

演示

于 2013-06-18T09:31:10.090 回答
1

中movePoint()，在设置随机设置的边距 whentouch为true后，您仍然在每个间隔设置边距document.getElementById('point').style.margin = nump + 'px 615px 0px';，但不要增加nump，因此之后touch将始终为true。

于 2013-06-18T09:37:40.510 回答