Javascript 单击所有div后是否重新启动动画？

我试图让脚本再次运行后，所有的GIF已被点击并更改为png的。一旦所有的GIF被点击，我必须刷新浏览器，以便游戏重新开始。我更希望在单击其中一个div时创建一个新div。这样，当单击一个时，就会出现一个新的，并且不断添加newDiv。任何关于如何做到这一点的想法都会有所帮助

HTML:

嘘飞
a组{
宽度：200px；
高度：200px；
位置：绝对位置；
背景图片：url（“fly.gif”）；
}
html{
背景：url（“fly background.png”）；
背景尺寸：封面；
背景重复：无重复；
保证金：0；
填充：0；
背景色：#50BBAD；
变焦：80%；
}

Javascript:

$(document).ready(function () {
newDiv();
newDiv();
newDiv();
newDiv();
newDiv(); //5
newDiv();
newDiv();
newDiv();
newDiv();
newDiv(); //10
});

function newDiv() {
var $div = $("<div class='a'>");
$(".animatedDivs").append($div);
animateDiv();


$div.click(function(){
    $div.css('background-image','url(splatter-1.png)');
    $div.css('zIndex' , '-1');
    $div.css({'position': 'absolute'});
    //$(this).data('clicked', true);
    var offset = $div.position();
    $div.stop(); 
    $div.position({left:(offset.left), right: (offset.right)});
});


function animateDiv() {
    var newq = makeNewPosition();
    var oldq = $div.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $div.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function () {
        animateDiv();
    });


};


}

function makeNewPosition() {

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh, nw];

}

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = .1;

var speed = Math.ceil(greatest / speedModifier);

return speed;

}

$（文档）.ready（函数（）{
newDiv（）；
newDiv（）；
newDiv（）；
newDiv（）；
newDiv（）；//5
newDiv（）；
newDiv（）；
newDiv（）；
newDiv（）；
newDiv（）；//10
});
函数newDiv（）{
变量$div=$（“”）；
$（“.animatedDivs”）.append（$div）；
animateDiv（）；
$div.click（函数（）{
$div.css（'background-image'，'url（splatter-1.png）'）；
$div.css（'zIndex'，'-1'）；
$div.css（{'position'：'absolute'}）；
//$（此）.data（'clicked'，true）；
变量偏移量=$div.position（）；
$div.stop（）；
$div.position（{左：（offset.left），右：（offset.right）}）；
});
函数animateDiv（）{
var newq=makeNewPosition（）；
var oldq=$div.offset（）；
var速度=计算速度（[oldq.top，oldq.left]，newq）；
$div.animate({
top:newq[0]，
左：newq[1]
}，速度，功能（）{
animateDiv（）；
});
};
}
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=$（窗口）.height（）-50；
var w=$（窗口）.width（）-50；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
返回[nh，nw]；
}
函数calcSpeed（上一个，下一个）{
var x=Math.abs（prev[1]-next[1]）；
var y=Math.abs（上一个[0]-下一个[0]）；
var最大=x>y？x:y；
var-speedModifier=.1；
var speed=Math.ceil（最大/速度修改器）；
返回速度；
}

好吧，如果您只想在单击一个div时创建一个新的div，那么您只需要从

click

函数处理程序内部调用

newDiv

函数：

$div.click(function(){
    newDiv();
    // more code
});

$div.click(function(){
    $(this).data('clicked')
    if ( allAreClicked() ) {
        // code to restart the game
    }
    // more code
});

function allAreClicked() {
    return $('.animatedDivs > div').lenght = $('.animatedDivs > div[data-cliked="true"]').lenght;
}

如标题所示，如果要在单击所有div后重新启动动画，只需检查

click

函数处理程序中是否已单击所有div：

$div.click(function(){
    newDiv();
    // more code
});

$div.click(function(){
    $(this).data('clicked')
    if ( allAreClicked() ) {
        // code to restart the game
    }
    // more code
});

function allAreClicked() {
    return $('.animatedDivs > div').lenght = $('.animatedDivs > div[data-cliked="true"]').lenght;
}

---

跳过几行获得新参数的奖励

---

变成：

div.a, div.splatted {

$(".a").removeClass("a").addClass("splatted");

和JS中的：

$(".a").remove();

变成：

div.a, div.splatted {

$(".a").removeClass("a").addClass("splatted");

---

看看这个。

真漂亮！现在有没有办法让所有的飞溅物都保持在原位？就像一旦所有的div都被点击，它们的飞溅物就会留下，然后新的就会出现？当然。。。等等，我刚加了要改变的东西…；）很不错的！！！非常感谢你！稍后我可能会有更多的问题，所以不要离题太远；）@卢伊斯帕特里塞特酒店