<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>Solution 1 :
Problem :
Good morning all
I have a target that randomly shoots.
I want my div winner to appear when a shot hits the center (div
center).Thank you for helping me I have already tried with the collision but
it does not work because the shooting div appear after.
/*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);
}