Nov 20, 2022

# Solution 1 :

``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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">
</div>

</body>``````

# 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*/
/*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);
}``````