时间戳

首页 > 解决方案 > 检测一个出现在另一个区域的div

javascript - 检测一个出现在另一个区域的div

问题描述

大家早上好

我有一个随机射击的目标。

我希望我的 div 获胜者在击中中心（div 中心）时出现。

感谢您帮助我我已经尝试过碰撞，但它不起作用，因为拍摄 div 出现在后面。

/*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 >= 0 &&
      sprinkleleftnum <= 0 &&
      sprinkletopnum >= 0 &&
      sprinkletopnum <= 0) ||
    /*Top Left*/
    (sprinkletopnum <= 17 && sprinkleleftnum <= 17) ||
    /*Bottom Right*/
    (sprinkletopnum >= 77 && sprinkleleftnum >= 77) ||
    /*Bottom Left*/
    (sprinkletopnum >= 77 && sprinkleleftnum <= 17) ||
    /*Bottom Left*/
    (sprinkletopnum <= 17 && sprinkleleftnum >= 77) ||
    /*Trim Bottom*/
    sprinkletopnum >= 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);
}

标签： javascripthtmlcss

解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Spectral+SC" rel="stylesheet">
<link rel="stylesheet" href="./cible.css" />
<script src="./cible.js"></script>

<body>
<div class="container">
    <div class="base">
    <img src="./cible.png">
    <div class="sprinklecontainer" id="layer"></div>
	<div id="center"></div>
    <div id="couleur" class="couleur" ></div>
	<div id="winner">WINNER !</div>
  </div>
</div>
</div>

<div class="buttonbox">
  <a class="button" onclick="addSprinkle()"><span class="sprinklestext">Hit</span><a>
</div>

</body>

推荐阅读