Estoy tratando de hacer un juego de trivia similar a trivia crack usando HTML CSS y vanilla JS. Actualmente, tengo un puntero y puedo hacerlo girar, pero ¿cómo sigo la flecha del puntero para saber dónde aterriza en la ventana? Si puedo obtener xPos e yPos, puedo navegar a la categoría correcta con solo algunas declaraciones if. Este es el código de mi puntero:
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); })Suponiendo que sabe cuántos segmentos hay en la forma, ¿por qué no simplemente mirar el número resultante que está pasando a la función de rotate , módulo 360 y averiguar a qué segmento está apuntando?
Por ejemplo, suponiendo 5 segmentos y un valor de rotación de 4661 grados:
//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.