接受回答

Question

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

HTML：

<!DOCTYPE html>
<html>

<head>

<title>Shoo Fly</title>

<style>

div.a {
width: 200px;
height:200px;
position:absolute;
background-image: url("fly.gif");
   }

html {
  background: url("fly-background.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding:0;
  background-color: #50BBAD;
  zoom: 80%;
  }

 </style>

 <script src="jquery-3.1.1.js"></script>
 <script src="please-work.js"></script>


 </head>

 <body>

 <div class="animatedDivs"></div>


</body>

</html>

使用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;

}

Answer 1

好吧，如果你想要的只是在点击一个div时创建一个新的div，你只需要从newDiv函数处理程序中调用你的click函数：

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

如果，如标题所示，您想在点击所有div后重新启动动画，只需检查是否已在click函数处理程序中单击所有div：

$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;
}

Answer 2

奖金
跳过几行并获得新的参数。

var init = function(x){
    for(i=0;i<x;i++){
       newDiv();
    };

// Onload initialisation
init(10);                 // OKAY! div amount as argument??
                          //       So possibly a incrental or random amount?
                          //
                          //       Thanks SO!

<小时/>

接受回答

我命名了你的函数，以便能够从代码中的其他地方再次调用它。

然后我添加了一个循环来检查是否所有图像都被点击了......
每次点击活动。

我也改变了你的图像来源......但这只是我的演示。

以下是this CodePen中的整个代码：

$(document).ready(function () {

  // Named the init fonction
  var init = function(){
    newDiv();
    newDiv();
    newDiv();
    newDiv();
    newDiv(); //5
    newDiv();
    newDiv();
    newDiv();
    newDiv();
    newDiv(); //10
  };

  // Onload initialisation
  init();





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


    $div.click(function(){
      console.log("Image clicked");

      $div.css('background-image','url(https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAATsAAAAJDM0N2NjNzkxLWEyOGYtNDE5MS05OGQxLTRkMzFkMDA3ZmZjNw.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)});

      // ===================================
      // Check if all images are clicked.
      var allClicked=true;
      $(".a").each(function(){
        if( $(this).css("z-index")!="-1" ){
          allClicked=false;
        }
      });
      console.log( allClicked );      // Is true when all images are clicked.

      if(allClicked){
        console.log("restarting!");
        $(".a").remove();

        // Re-init the game
        init();
      }
      // ===================================

    });


    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;

  }

});

<小时/> 的修改

保持＆＃34; splats＆＃34;在那里加载一些新的移动div，只需改变两行：

在CSS中：

div.a {

变为：

div.a, div.splatted {

在JS中：

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

变为：

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

请参阅此CodePen v2。

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

2 个答案:

接受回答