मोफत कॉइन फ्लिप आणि स्पिन व्हील

हे कसे कार्य करते

तीनही मोड — coin flip, spin wheel आणि option picker — विजयी निकाल तयार करण्यासाठी ब्राउझरचे बिल्ट-इन Web Crypto API (crypto.getRandomValues) वापरतात, नंतर CSS transforms आणि requestAnimationFrame सह पूर्णपणे क्लायंट-साइड अॅनिमेशन चालवतात. कोणत्याही टप्प्यावर सर्व्हर सामील नाही.

1. 1
   Web Crypto विजेता निवडतो

   कोणतेही अॅनिमेशन सुरू होण्यापूर्वी, crypto.getRandomValues Uint32Array ला cryptographically random 32-bit पूर्णांकाने भरते. एक modulo ऑपरेशन ते पर्यायांच्या संख्येशी (heads/tails साठी 2, wheel किंवा picker साठी N) मॅप करते, त्यामुळे प्रत्येक निकालाची तंतोतंत समान संभाव्यता असते.
2. 2
   निकालावर उतरण्यासाठी rotation कोन मोजला जातो

   नाण्यासाठी, कोड योग्य बाजू वर येण्यासाठी सर्वात लहान अतिरिक्त rotation (सध्याच्या संचित कोनाच्या वर) मोजतो — heads 0° वर, tails 180° वर — नंतर खऱ्या पडण्यासारखे दिसण्यासाठी 5 पूर्ण फिरी जोडतो. Wheel तेच करतो: तो विजयी slice ला pointer खाली आणणारा कोणीय ऑफसेट शोधतो, 6 पूर्ण rotations जोडतो, आणि pointer नेहमी slice च्या तंतोतंत मध्यभागी थांबू नये यासाठी छोटा यादृच्छिक jitter लावतो.
3. 3
   CSS transitions आणि requestAnimationFrame अॅनिमेशन चालवतात

   नाणे आणि wheel एकाच संचित rotation मूल्यावर लावलेल्या cubic-bezier easing curve सह CSS transform द्वारे अॅनिमेट होतात — कोन सेट झाल्यावर प्रति-फ्रेम JavaScript ची गरज नाही. Option picker त्याऐवजी requestAnimationFrame वापरतो: प्रत्येक फ्रेमला, एक quadratically वाढणारा अंतराल highlight पुढे न्यावी का ते ठरवतो, नेहमी पूर्व-निर्धारित विजेत्यावर थांबणारा slot-machine deceleration तयार करत.
4. 4
   निकाल उघड होतो आणि session इतिहासात नोंदवला जातो

   अॅनिमेशन पूर्ण झाल्यावर (नाण्यासाठी 1.3 से, wheel साठी 4.3 से) setTimeout फायर होतो आणि निकाल state मध्ये लिहितो. नाणे मोड heads/tails मोजणीसह 24 फ्लिप्सपर्यंत चालणारा session इतिहास ठेवतो. prefers-reduced-motion सक्षम असलेले वापरकर्ते अॅनिमेशन पूर्णपणे वगळतात आणि निकाल तात्काळ पाहतात.

संबंधित साधने