使用jquery随机移动多个div

Question

我使用这个jQuery fiddle http://jsfiddle.net/BREvn/5/

我用这个做了一个鸟射击游戏，在每个关卡中，鸟的增加是简单的这些div，但问题是，当我增加这些时，它们每次都会在右下角的位置离开容器，.I想要的是div应该只接触容器的边界。

我的代码是

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

Answer 1

您删除了一个重要的元素

maxY = cHeight;
maxX = cWidth;

这应该是

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

此时，您允许每个图像的顶部到达容器的高度--这个小的修正意味着您将到达容器的高度减去对象的高度。

在小提琴中，这仍然包括(+填充，但这在你的例子中不是必需的)，但由于某种原因，你已经在你的代码中删除了它们！