使图像在div内随机移动 [英] make an image move inside a div randomly

问题描述

我正在创建一个简单的游戏，并且我目前停留在某个东西上，我有一个称为"box"的div，并且在游戏开始时降落伞应在div的边界内随机移动，其中的图像称为"Parachute"./p>

我的代码:

 <div id="box">


    </div>

 <script type="text/javascript">
 var ToAppend = "<img src='Parachute.gif' width='25px' height='25px' class='Parachute' />  ";
        setInterval(function () {
            for (var i = 1; i <= 2; i++) {
                $("#box").append(ToAppend);
                MoveParticles();
            }
        }, 3000);

        function MoveParticles() {
               $(".Parachute").each(function () {
                var x = Math.floor(Math.random() * 400);
                var y = Math.floor(Math.random() * 400);

                $(this).animate({ "left": x + "px" }, "slow");
                $(this).animate({ "top": y + "px" }, "slow");
            });
        }
       <script>

解决方案

您似乎是在动画#box，而不是.Parachute.

这里是一个演示，可帮助您找到正确的方向.

//let's build the chutes
for (var i = 0; i < 50; ++i) {
    $('<div/>', {
        class: 'chute'
    }).appendTo('#box');
}

//cache a few static values
var box = $('#box');
var width = box.width();
var height = box.height();
var chute = $('.chute');

//our main animation "loop"

chute.each(function foo() {

    //generate random values
    var top = (Math.random() * height) | 0;
    var left = (Math.random() * width) | 0;
    var time = Math.random() * (800 - 400) + 400 | 0;

    //animate
    //we introduce a random value so that they aren't moving together
    //after the animation, we call foo for the current element
    //to animate the current element again
    $(this).animate({
        left: left,
        top: top
    }, time, foo);
});

I'm creating a simple game and i am stuck currently at something i have a div called 'box' and an image inside it called 'Parachute' when the game start the parachute should move randomly inside the border of the div

my code :

 <div id="box">


    </div>

 <script type="text/javascript">
 var ToAppend = "<img src='Parachute.gif' width='25px' height='25px' class='Parachute' />  ";
        setInterval(function () {
            for (var i = 1; i <= 2; i++) {
                $("#box").append(ToAppend);
                MoveParticles();
            }
        }, 3000);

        function MoveParticles() {
               $(".Parachute").each(function () {
                var x = Math.floor(Math.random() * 400);
                var y = Math.floor(Math.random() * 400);

                $(this).animate({ "left": x + "px" }, "slow");
                $(this).animate({ "top": y + "px" }, "slow");
            });
        }
       <script>

解决方案

You seem to be animating #box, not .Parachute.

Here's a demo to get you in the right track.

//let's build the chutes
for (var i = 0; i < 50; ++i) {
    $('<div/>', {
        class: 'chute'
    }).appendTo('#box');
}

//cache a few static values
var box = $('#box');
var width = box.width();
var height = box.height();
var chute = $('.chute');

//our main animation "loop"

chute.each(function foo() {

    //generate random values
    var top = (Math.random() * height) | 0;
    var left = (Math.random() * width) | 0;
    var time = Math.random() * (800 - 400) + 400 | 0;

    //animate
    //we introduce a random value so that they aren't moving together
    //after the animation, we call foo for the current element
    //to animate the current element again
    $(this).animate({
        left: left,
        top: top
    }, time, foo);
});

这篇关于使图像在div内随机移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！