title: Detect a div that appears in the area of ​another
body: <blockquote>
    <p>Good morning all</p>
    
    <p>I have a target that randomly shoots.</p>
    
    <p>I want my div winner to appear when a shot hits the center (div
    center).</p>
    
    <p>Thank you for helping me I have already tried with the collision but
    it does not work because the shooting div appear after.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*New sprinkle angles*/
  var angles = ["45deg", "75deg", "-45deg", "-75deg"];
  /*New sprinkle colors*/
  var colors = ["black" , "blue" , "gold", "darkorange"];
  
  /*Function to add a new random position, rotation and colour sprinkle*/
  function addSprinkle() {
    /*Pick angle and color*/
    var randomangle = angles[Math.floor(Math.random() * 4)];
    var randomcolor = colors[Math.floor(Math.random() * colors.length)];
  
    /*Create new sprinkle div*/
    var newsprinkle = document.createElement("div");
  
    /*Assign new div class of .sprinkletemplate */
    newsprinkle.setAttribute("id", "sprinkletemplate");
  
    /*Set random angle rotation*/
    newsprinkle.style.transform = "rotate(" + randomangle + ")";
  
    /*Set random background color*/
    newsprinkle.style.background = randomcolor;
  
    /*Set random number for Top and Left*/
    var sprinkletopnum = Math.floor(Math.random() * 100 );
    var sprinkleleftnum = Math.floor(Math.random() * 100 );
  
    /*Check if they fall in the center or corners*/
    do {
      sprinkletopnum = Math.floor(Math.random() * 100 );
      sprinkleleftnum = Math.floor(Math.random() * 100 );
    } while (
      /*Middle*/
      (sprinkleleftnum &gt;= 0 &amp;&amp;
        sprinkleleftnum &lt;= 0 &amp;&amp;
        sprinkletopnum &gt;= 0 &amp;&amp;
        sprinkletopnum &lt;= 0) ||
      /*Top Left*/
      (sprinkletopnum &lt;= 17 &amp;&amp; sprinkleleftnum &lt;= 17) ||
      /*Bottom Right*/
      (sprinkletopnum &gt;= 77 &amp;&amp; sprinkleleftnum &gt;= 77) ||
      /*Bottom Left*/
      (sprinkletopnum &gt;= 77 &amp;&amp; sprinkleleftnum &lt;= 17) ||
      /*Bottom Left*/
      (sprinkletopnum &lt;= 17 &amp;&amp; sprinkleleftnum &gt;= 77) ||
      /*Trim Bottom*/
      sprinkletopnum &gt;= 95
    );
  
    /*Change the top / left css of the new div*/
    newsprinkle.style.top = sprinkletopnum + "%";
    newsprinkle.style.left = sprinkleleftnum + "%";
  
    /*Append to #layer*/
    document.getElementById("layer").appendChild(newsprinkle);
  }</code></pre>
  </div>
  </div>
  </p>