I'm trying to make a trivia game similar to trivia crack using HTML CSS and vanilla JS. Currently, I have a pointer and I can make it spin but how do I track the pointer arrow to know where it lands on the window. If I can get the xPos and yPos, I can navigate to the correct category with just some if statements. This is the code for my pointer:
let pointerImg = document.querySelector(".pointerimg");
let number = Math.ceil(Math.random() * 1000);
pointerImg.addEventListener("click",()=> {
pointerImg.style.transform = "rotate(" + number + "deg)";
number += Math.ceil(Math.random() * 5000);
})
Assuming you know how many segments there are on the shape, why not simply look at the resulting number you're passing into the rotate function, modulo 360 and work out which segment it's pointing at?
For example, assuming 5 segments and a rotation value of 4661 degrees:
//Work out where in a 360 degree circle the arrow is pointing to knowing that it started at 0 and rotated 4661 degrees:
var deg = 4661 % 360; // 341
//Which quadrant does this land in? We'll assume that quadrant 1 starts from 0 and spans the first segment (72 degrees) in a clockwise manner and proceed accordingly.
var quadrantCount = 5;
var quadrant = Math.floor( deg / ( 360 / quadrantCount) ); // 4th index = last quadrant
//This puts us in quadrant 5. As we know this spans 288 degrees through less than 360 degrees and that deg equals 341, this is the correct answer.