ఉచిత కాయిన్ ఫ్లిప్ & స్పిన్ వీల్

ఇది ఎలా పనిచేస్తుంది

మూడు మోడ్‌లు — నాణెం ఎగరేయడం, స్పిన్ వీల్, మరియు ఎంపిక పికర్ — గెలిచే ఫలితాన్ని సృష్టించడానికి బ్రౌజర్ అంతర్నిర్మిత Web Crypto API (crypto.getRandomValues) ఉపయోగిస్తాయి, తర్వాత CSS transforms మరియు requestAnimationFrameతో యానిమేషన్‌ను పూర్తిగా క్లయింట్-సైడ్‌లో నడుపుతాయి. ఏ దశలోనూ సర్వర్ ప్రమేయం లేదు.

1. 1
   Web Crypto విజేతను ఎంచుకుంటుంది

   ఏ యానిమేషన్ ప్రారంభమయ్యే ముందైనా, crypto.getRandomValues క్రిప్టోగ్రాఫిక్‌గా యాదృచ్ఛిక 32-bit పూర్ణాంకంతో Uint32Arrayను నింపుతుంది. మాడ్యులో ఆపరేషన్ దాన్ని ఎంపికల సంఖ్యకు మ్యాప్ చేస్తుంది (బొమ్మ/బొరుసుకు 2, వీల్ లేదా పికర్‌కు N), కాబట్టి ప్రతి ఫలితానికి ఖచ్చితంగా సమాన సంభావ్యత ఉంటుంది.
2. 2
   ఫలితంపై ఆగేలా భ్రమణ కోణం లెక్కించబడుతుంది

   నాణెం కోసం, కోడ్ సరైన ముఖం పైకి ఉండేలా ముగిసే అతి చిన్న అదనపు భ్రమణాన్ని (ప్రస్తుత సంచిత కోణంపై) లెక్కిస్తుంది — బొమ్మ 0° వద్ద, బొరుసు 180° వద్ద — తర్వాత నిజమైన దొర్లడంలా కనిపించేలా 5 పూర్తి తిరుగుళ్లు జోడిస్తుంది. వీల్ కూడా అదే చేస్తుంది: గెలిచే ముక్కను పాయింటర్ కిందకు తెచ్చే కోణీయ ఆఫ్‌సెట్ కనుగొని, 6 పూర్తి భ్రమణాలు జోడించి, పాయింటర్ ఎప్పుడూ ముక్క మధ్యలోనే ఆగకుండా చిన్న యాదృచ్ఛిక కదలిక వర్తింపజేస్తుంది.
3. 3
   CSS transitions మరియు requestAnimationFrame యానిమేషన్‌ను నడుపుతాయి

   నాణెం మరియు వీల్ ఒకే సంచిత భ్రమణ విలువకు cubic-bezier ఈజింగ్ కర్వ్ వర్తింపజేసిన CSS transform ద్వారా యానిమేట్ అవుతాయి — కోణం సెట్ అయిన తర్వాత ప్రతి-ఫ్రేమ్ JavaScript అవసరం లేదు. ఎంపిక పికర్ బదులుగా requestAnimationFrame ఉపయోగిస్తుంది: ప్రతి ఫ్రేమ్‌లో, వర్గ రీతిలో పెరిగే విరామం హైలైట్‌ను ముందుకు జరపాలో లేదో నిర్ణయిస్తుంది, ఎల్లప్పుడూ ముందే నిర్ణయించిన విజేతపై ఆగే స్లాట్-మెషిన్ మందగమనాన్ని ఇస్తుంది.
4. 4
   ఫలితం వెల్లడించబడి సెషన్ చరిత్రలో నమోదవుతుంది

   యానిమేషన్ పూర్తయినప్పుడు (నాణేనికి 1.3 s, వీల్‌కు 4.3 s) setTimeout ప్రారంభమై ఫలితాన్ని stateకు రాస్తుంది. నాణెం మోడ్ బొమ్మ/బొరుసు లెక్కలతో 24 వరకు ఎగరేతల సెషన్ చరిత్రను నిర్వహిస్తుంది. prefers-reduced-motion ఆన్‌లో ఉన్న వినియోగదారులు యానిమేషన్‌ను పూర్తిగా దాటవేసి ఫలితాన్ని వెంటనే చూస్తారు.

సంబంధిత సాధనాలు