• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[JS] Skrypt losujący ala ruletka

VPS Starter Arubacloud
0 głosów
2,081 wizyt
pytanie zadane 27 września 2016 w JavaScript przez SzobX Nowicjusz (200 p.)
zmienione kategorie 28 września 2016 przez Arkadiusz Waluk

WItajcie pasjonaci. mam oto takie pytanie znam nawet dobrze język PHP i powoli ucze się już JS 

Chciałbym spytać jak stworzyć losowanie z oto takiej ruletki jak na zdjęciu aby była animacja kręcenia się , oraz wybierania liczby wylosowanej potrzebne będą jakies dodatowe biblioteki? .    nie chodzi mi tutaj o robienie typowej ruletki jak każdy do CS'a chce sobie ją po prostu zrobić o tak dla zabicia nudy na nudnych lekcjach  z góry dzięki za pomoc    

 

 

 

 

 

 

 

 

komentarz 27 września 2016 przez Ehlert Ekspert (212,630 p.)

Mi tu pasuje Node.js. Pamiętaj że nic wrażliwego na działanie dla user-side.

komentarz 27 września 2016 przez MichuDev Pasjonat (20,300 p.)
Nie dam ci gotowego rozwiązania. Pamiętaj, że naruszasz regulamin (punkt 2G).

PS: zacznij pisać całość od HTML i CSS.
komentarz 27 września 2016 przez SzobX Nowicjusz (200 p.)
nie chce gotowego rozwiązania chce tylko nakierowania jak sie do tego zabrać
komentarz 28 września 2016 przez Pac Plus Mądrala (5,560 p.)

Ja proponuję administratorom żeby kasowali takie wpisy i może zaczęli używać opcji banowania, bo ludzie któży tu uczęszczają rozwiązywać problemy nie mają tyle czasu żeby to filtrować.

@SzobX: Kartka papieru i rozpisujesz projekt. Jeśli masz tego typu pytania to IRC albo minimum wysiłku żeby sprawdzić jak się piszę grafikę, logikę itp. w technologi twojego wyboru. W tym przypadku, wnioskując po otagowaniu i treści to JS/C++,

komentarz 28 września 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)

Ja proponuję administratorom żeby kasowali takie wpisy i może zaczęli używać opcji banowania, bo ludzie któży tu uczęszczają rozwiązywać problemy nie mają tyle czasu żeby to filtrować.

Ciągle jako cała administracja działamy aktywnie i gdy jest potrzeba to i opcji banowania używamy (nie zawsze to widać bo o wszystkim się publicznie nie mówi gdy nie ma takiej potrzeby). Nie chcemy jej jednak nadużywać, gdy można podjąć próbę upomnienia bo może dana osoba czegoś nie wie/nie doczytała/nie zrozumiała.

A ja nie do końca rozumiem za co tyle zgłoszeń do tego tematu, nie widzę tu nigdzie bezpośredniej prośby o gotowca. Być może autor nie włożył zbyt wiele wysiłku i nie poszukał samemu, ale poza tym co tu złego? Po tagach wnioskuję, że autor jest zainteresowany JavaScriptem więc widzę tylko złą kategorię, poprawiam i proszę następnym razem zwrócić uwagę i wybrać odpowiednią.

komentarz 29 września 2016 przez Benek Szeryf (90,690 p.)

A ja nie do końca rozumiem za co tyle zgłoszeń do tego tematu (...)

Efekt domina. To samo dotyczy negatywnego oceniana odpowiedzi tylko dlatego, że ktoś nie zrozumiał sensu/nie przeczytał ze zrozumieniem/ma inne zdanie niż autor. A nie od tego są minusy na tym forum. Problemem jest to, że mało kto zna i stosuje się do netykiety.

2 odpowiedzi

+2 głosów
odpowiedź 30 września 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
edycja 30 września 2016 przez ShiroUmizake

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. 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).

komentarz 2 października 2016 przez SzobX Nowicjusz (200 p.)
Dzięki bardzo ;) widzę że znalazła się jedna normalna osoba  jeszcze raz dziękuję za tak wyczerpującą odpowiedz
0 głosów
odpowiedź 29 września 2016 przez Paweł Barszcz Użytkownik (950 p.)
Poczytaj trochę o CANVAS.

Ale jak koledzy piszą.. Najpierw weź się za front-end, potem za logiczną część :)

Podobne pytania

0 głosów
2 odpowiedzi 358 wizyt
pytanie zadane 25 stycznia 2019 w PHP przez Grzegorz Mikina Dyskutant (8,060 p.)
0 głosów
1 odpowiedź 1,602 wizyt
pytanie zadane 26 lipca 2017 w JavaScript przez Kekk Początkujący (450 p.)
–2 głosów
3 odpowiedzi 266 wizyt
pytanie zadane 1 marca 2016 w JavaScript przez BlvckFox Gaduła (4,240 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...