મફત કોઇન ફ્લિપ અને સ્પિન વ્હીલ

આ કેવી રીતે કાર્ય કરે છે

ત્રણેય modes — coin flip, spin wheel, અને option picker — વિજેતા outcome જનરેટ કરવા બ્રાઉઝરના બિલ્ટ-ઇન Web Crypto API (crypto.getRandomValues) નો ઉપયોગ કરે છે, પછી CSS transforms અને requestAnimationFrame સાથે સંપૂર્ણપણે client-side એનિમેશન ચલાવે છે. કોઈ પણ સમયે કોઈ સર્વર સામેલ નથી.

1. 1
   Web Crypto વિજેતા પસંદ કરે છે

   કોઈપણ એનિમેશન શરૂ થાય તે પહેલાં, crypto.getRandomValues એક cryptographically random 32-bit integer સાથે Uint32Array ભરે છે. Modulo ઑપરેશન તેને options ની સંખ્યા સાથે મેપ કરે છે (heads/tails માટે 2, wheel કે picker માટે N), તેથી દરેક outcome ને બરાબર સમાન સંભાવના છે.
2. 2
   Rotation angle પરિણામ પર ઉતરવા માટે ગણવામાં આવે છે

   Coin માટે, કોડ સૌથી ટૂંકું વધારાનું rotation ગણે છે (વર્તમાન સંચિત angle ની ઉપર) જે સાચી face સાથે સમાપ્ત થાય છે — heads 0° પર, tails 180° પર — પછી વાસ્તવિક tumble જેવો દેખાય તે માટે 5 સંપૂર્ણ spins ઉમેરે છે. Wheel પણ એવું જ કરે છે: તે angular offset શોધે છે જે winning slice ને pointer નીચે લાવે છે, 6 સંપૂર્ણ rotations ઉમેરે છે, અને pointer હંમેશા slice ના બરાબર કેન્દ્રમાં ન રોકાય તે માટે નાનો random jitter લાગુ કરે છે.
3. 3
   CSS transitions અને requestAnimationFrame એનિમેશન ચલાવે છે

   Coin અને wheel એક સંચિત rotation મૂલ્ય પર લાગુ cubic-bezier easing curve સાથે CSS transform દ્વારા એનિમેટ થાય છે — angle સેટ થયા પછી per-frame JavaScript ની જરૂર નથી. Option picker તેના બદલે requestAnimationFrame વાપરે છે: દરેક ફ્રેમ, quadratically વધતો interval highlight આગળ વધારવો કે નહીં તે નક્કી કરે છે, જે હંમેશા pre-determined વિજેતા પર રોકાતું slot-machine deceleration બનાવે છે.
4. 4
   પરિણામ જાહેર થાય છે અને session history માં લોગ થાય છે

   એનિમેશન પૂરું થાય ત્યારે setTimeout ફાયર થાય છે (coin માટે 1.3 સેકન્ડ, wheel માટે 4.3 સેકન્ડ) અને state માં પરિણામ લખે છે. Coin mode heads/tails counts સાથે 24 flips સુધીનો ચાલુ session history રાખે છે. prefers-reduced-motion સક્ષમ વપરાશકર્તાઓ એનિમેશન સંપૂર્ણપણે છોડે છે અને તરત જ પરિણામ જુએ છે.

સંબંધિત સાધનો