Перемещать несколько делений случайным образом, используя jquery

Question

Перемещать несколько делений случайным образом, используя jquery

0

Я использую эту скрипту jQuery http://jsfiddle.net/BREvn/5/

Я делаю игру с птичьей стрельбой с этим на каждом уровне роста птиц, которые являются просто этими div, но проблема в том, когда я увеличиваю их, все они выходят из контейнера каждый раз в нижнем правом положении. Я хочу, чтобы divs касались только границ контейнера.

мой код

<!DOCTYPE html>
<html>
<head>
 <script src="/js/jquery-2.0.2.min.js"></script>
<style>
div#container {height:50%;
                   width:50%;
       border:2px solid white;           



    }
    .a {
width: 120px;
height:120px;

position:relative;

}
</style>

 <script type="text/javascript">
 function randomFromTo(from, to) {
                return Math.floor(Math.random() * (to - from + 1) + from);
            }

            function moveRandom(obj) {
                /* get container position and size
                 * -- access method : cPos.top and cPos.left */
                var cPos = $('#container').offset();
                var cHeight = $('#container').height();
                var cWidth = $('#container').width();

                // get box padding (assume all padding have same value)
                var pad = parseInt($('#container').css('padding-top').replace('px', ''));

                // get movable box size
                var bHeight = obj.height();
                var bWidth = obj.width();

                // set maximum position
                maxY = cHeight ;
                maxX = cWidth;

                // set minimum position
                minY = cPos.top + pad;
                minX = cPos.left + pad;

                // set new position         
                newY = randomFromTo(minY, maxY);
                newX = randomFromTo(minX, maxX);

                obj.animate({
                    top: newY,
                    left: newX
                }, 1000, function () {
                    moveRandom(obj);
                });
            }



            $('.a').each(function () {
                moveRandom($(this));
            });
</script>
</head>
<body>



<div id="container">
        <img src="graphics-birds-917288.gif" class='a'/>
        <img src="graphics-birds-917288.gif" class='a'  />
        <img src="graphics-birds-917288.gif" class='a' />
        <img src="graphics-birds-917288.gif" class='a' />
        <img src="graphics-birds-917288.gif" class='a' />
    </div>
</body>
</html>

user3160438 04 янв. 2014, в 19:52

Источник

2

Мне еще предстоит засвидетельствовать движение красного ящика за пределами серого ящика.
j08691 04 янв. 2014, в 18:03
0

Когда вы увеличиваете что?
ariel 04 янв. 2014, в 18:04
2

они хорошо выглядят в скрипке.
Eisa Adil 04 янв. 2014, в 18:04

Показать ещё 1 комментарий

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Мне еще предстоит засвидетельствовать движение красного ящика за пределами серого ящика.

Graham Ritchie · Answer 1 · 2014-01-04T16-14-00.000Z

Вы удалили важный элемент

maxY = cHeight;
maxX = cWidth;

это должно быть

maxY = cPos.top + cHeight - bHeight;
maxX = cPos.left + cWidth - bWidth;

В настоящий момент вы разрешаете TOP каждого изображения перейти на высоту контейнера - эта небольшая коррекция означает, что вы перейдете на высоту контейнера MINUS высоту объекта

В скрипке это все еще включено (+ дополнение, но это не обязательно с вашим примером), но вы по какой-то причине удалили их в свой код!

Извините, но я добавил, что все еще идет из коробки в правом нижнем углу.