Random moving divs via jQuery, HTML, CSS
I am creating a game where you have to follow particles (divs) and click on them to "eat" them. The issue I am having currently is that I can't find a w开发者_开发百科ay to clone each div and give it a random X and Y coordinate value to position it.
Here is my code:
var x = e.pageX;
var y = e.pageY;
function reposition(div, x, y, randomMode) {
if(randomMode == 1) {
x = Math.floor(Math.random() * 990);
y = Math.floor(Math.random() * 560);
}
$(div).animate({"left": x + "px"}, "slow");
$(div).animate({"top": y + "px"}, "slow");
}
// need to find some way to duplicate the divs and move them in random directions
setInterval(function() {
for(var i = 1; i < 4; i++) {
reposition("#grabItem", 0, 0, 1);
}
}, 2000);
//select all grab items, and since there will be multiple particles
//use a class to mark them, not an ID. This line is to capture all
//particles existing in the markup, that are not dynamically added later
var $particles = $('.grabItem');
//set your container that has all the particles
var $container = $('body');
//every two seconds add a new particle at random location
setInterval(function() {
for(var i = 1; i < 4; i++) {
$particles.add(CreateParticle());
MoveParticles();
}
}, 2000);
//creates a new particle and adds to the canvas
function CreateParticle(){
return $('<div/>').addClass('grabItem').appendTo($container);
}
//randomly moves all the particles around
function MoveParticles() {
$particles.each(function() {
var x = Math.floor(Math.random() * 990);
var y = Math.floor(Math.random() * 560);
$(div).animate({"left": x + "px"}, "slow");
$(div).animate({"top": y + "px"}, "slow");
});
}
That will add a new particle at a random location every two seconds and move all existing particles around (including the new one). If you need an exact clone method check out jQuery's .clone() method.
There exists a Clone method in jQuery, is it what you are looking for?
精彩评论