Nie rozumiem do końca tego hejtu. Kolega nie ma zielonego pojęcia jak to napisać i prosi tylko naprowadzenie jak to stworzyć.
Rozwiązań jest parenaście tego problemu. Od tych najłatwiejszych choć nie do końca najlepszych (CSS i JS),zakładając że obrazek jest gotowy, a strzałka (ta która ma wskazywać wynik ) jest osobnym elementem blokowym. Do tych trudniejszych stosujących np: SVG (każdy element obrazka jest obiektem) lub Canvas. Po krótce opisze ten najłatwiejszy sposób (obrazek i strzałka to są dwa osobne elementy)
Jeżeli chcemy coś napisać , musimy znależć problem/ problemy, które staną nam na programistycznej drodze.
1. Jak wprowadzić obrazek w ruch dookoła siebie? (Do tego jest pewna właściwość z CSS)
2. Jeżeli już wprowadzimy w ruch, jak spowodować losowy ruch (losowe przesunięcie) -> tu trochę będzie matematyki.
To zaczynajmy.
1.. By wprowadzić w ruch nasze koło użyjemy taką właściwość elementcie z pakietu transform. -> rotate. Link: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate.
2. Tworzymy odpowiednie zdarzenie (click) a do tego funkcje, która obsłuży to zdarzenie.
document.getElementById("button).addEventListener('click', run, false);
3. Przechodzimy do kolejnego problemu. Jak wybrać losowy ruch.
4.Jest kilka rozwiązań , możemy bawić dzikie kombinowanie z keyframes, modyfikując z poziomu JS (nie polecam, ale jest na to metoda), próbować to zrobić, używając np; reactJS (dla początkujących nie polecam). Ja tu uzyje, style , ale poziomu JS, korzystając z takiej właściwości
document.getElementById("rulete").style.transform = " rotate()";
5. Ale jak dokładnie policzyć ile będzie wynosić rotacja? I tu będzie trochę matematyki.
6.Maksymalny obrót jaki może wynieść to 360 stopni. Pól mamy 15. Czyli pojedynczy obrót to 360/15 = 24 stopnie.
7. Wiemy ile wynosi jeden obrót . Mamy maksymalnie 15 pól . Do losowanie liczb, możemy użyć to:
var RandomFieldNumber = Math.floor((Math.random() * 15) + 1);
UWAGA! Nie jest to najlepszy system losowośći (dosyć łatwo przewidywalny). Jak chcesz uzyć, coś lepszego to np: cryptoJS,
Co tu się stało ? Pierw wylosowaliśmy liczbę zakresu od 0 do 1 (narazie tyle Ci wystarczy), następnie pomnożyliśmy razy 15 , wynik ten zaokrągliśmy i dodaliśmy 1.
8.Wiemy ile wynosi pojedynczy obrót koła , jak wylosować liczbę. To spróbujmy stworzyć animacje obrotu koła. Użyjemy tutaj setInterval (może być również setTimeout jak to woli).
IDRouleteInterval = setInterval((function{ ( randomNumberField, IDRouleteInterval) moveRoulete(randomNumberField, IDRouleteInterval)}) , 100);
9. Przekazaliśmy ile pól ma się obrócić koło. I ma to robić dokładnie co 100 ms. Wprowadżmy teraz w je w ruch.
function moveRouelete (paramNumber, IDRouleteInterval ){
var rouleteObject = document.getElementById("roulete);
ObserveState(paramNumber, IDRouleteInterval, rouleteObject);
if (ObserveState ())
{
return;
}
else
{
var nowRotate = rouleteObject.style.transform; // Powinno pokazać obecny obrót.
var newRotate = rouleteObject.style.transform = new String ( "(rotate" + (nowRotate + 24)+ "deg)"));
}
// Tak mamy pewnośc, że na to 100% przełoży wszystko na ciąg znaków);
}
function ObserveState (paramNumber, IDRouleteInterval){
if (paramNumber * 24 === rouleteObject.style.transform){
clearInterval (IDRouleteInterval);
return true;
}
return false;
}
9. Oczywiście potem wypadało by zrobić jakiś reset. oraz wyświetlenie liczby :). Ale tego już Ci nie opisze , sam do tego dojdż :).
Tak jak na dole wspominali warto by użyć tu nodeJS , z dwóch powodów losowanie liczby (powiedzmy co sprytniejszy zawodnik mógłby zepsuć mechanizm losowania) oraz drugi do budowy modułowej. Gdyż to trochę spaghetii code.
Mówię z góry , że nie jest to najlepsze rozwiązanie i niezgodne z dobrymi praktykami, ale najłatwiejsze do zaimplementowania. Powodzenia :)/
No i najważniejsze! Używaj stacka. Stack jest twoim panem, nieskończoną księga wiedzy, drogowskazem do celu (m.i.n tak zdałem z BASH, nie mając pojęcia o nim xD, a napewno nie robiąc nic w nim nigdy. A jeżeli czegoś nie ma na Stacku. To albo jest to niemożliwe albo nikt tego nie robił
PS: Tak z ciekawości jakim sposobem window.setInterval zapisuje id interwału. Czy to tablica? (Powiedzmy, chcemy wywołować clearInterval ale z obiektu Window).