मुफ़्त सिक्का फ्लिप और स्पिन व्हील

यह कैसे काम करता है

तीनों मोड — कॉइन फ़्लिप, स्पिन व्हील, और ऑप्शन पिकर — जीतने वाला परिणाम जनरेट करने के लिए ब्राउज़र के बिल्ट-इन Web Crypto API (crypto.getRandomValues) उपयोग करते हैं, फिर एनिमेशन को पूरी तरह क्लाइंट-साइड CSS transforms और requestAnimationFrame से चलाते हैं। किसी भी बिंदु पर कोई सर्वर शामिल नहीं है।

1. 1
   Web Crypto विजेता चुनता है

   कोई भी एनिमेशन शुरू होने से पहले, crypto.getRandomValues एक Uint32Array को क्रिप्टोग्राफ़िक रूप से रैंडम 32-बिट इंटीजर से भरता है। एक मॉड्यूलो ऑपरेशन इसे विकल्पों की संख्या से मैप करता है (heads/tails के लिए 2, व्हील या पिकर के लिए N), इसलिए हर परिणाम की संभावना बिल्कुल बराबर होती है।
2. 2
   परिणाम पर उतरने के लिए रोटेशन एंगल की गणना की जाती है

   सिक्के के लिए, कोड सबसे छोटा अतिरिक्त रोटेशन (वर्तमान संचित एंगल के ऊपर) गणना करता है जो सही सतह ऊपर के साथ खत्म होता है — heads 0° पर, tails 180° पर — फिर 5 पूरे स्पिन जोड़ता है ताकि यह असली उछाल जैसा दिखे। व्हील भी ऐसा ही करता है: यह एंगुलर ऑफ़सेट खोजता है जो जीतने वाली स्लाइस को पॉइंटर के नीचे लाता है, 6 पूरे रोटेशन जोड़ता है, और एक छोटा रैंडम जिटर लागू करता है ताकि पॉइंटर हमेशा स्लाइस के बिल्कुल बीच में न रुके।
3. 3
   CSS ट्रांज़िशन और requestAnimationFrame एनिमेशन चलाते हैं

   सिक्का और व्हील एक ही संचित रोटेशन वैल्यू पर लागू cubic-bezier इज़िंग कर्व के साथ CSS transform के ज़रिए एनिमेट होते हैं — एक बार एंगल सेट होने के बाद कोई प्रति-फ़्रेम JavaScript नहीं चाहिए। ऑप्शन पिकर इसके बजाय requestAnimationFrame उपयोग करता है: हर फ़्रेम, एक क्वाड्रैटिक रूप से बढ़ता अंतराल तय करता है कि हाइलाइट को आगे बढ़ाना है या नहीं, एक स्लॉट-मशीन मंदी बनाते हुए जो हमेशा पहले से तय विजेता पर रुकती है।
4. 4
   परिणाम दिखाया और सेशन हिस्ट्री में लॉग किया जाता है

   एनिमेशन पूरा होने पर (सिक्के के लिए 1.3 सेकंड, व्हील के लिए 4.3 सेकंड) एक setTimeout फायर होता है और परिणाम को स्टेट में लिखता है। कॉइन मोड heads/tails काउंट के साथ 24 फ़्लिप तक की एक चालू सेशन हिस्ट्री रखता है। prefers-reduced-motion सक्षम किए यूज़र एनिमेशन पूरी तरह छोड़ देते हैं और तुरंत परिणाम देखते हैं।

संबंधित टूल