Greetings everyone!
I have a target that shoots randomly.
I'm trying to make my "winner" div appear when a shot hits the center of the target.
I really appreciate any help, I've already attempted collision detection but it doesn't work since the shooting div appears later.
/*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);
}