இலவச நாணயம் சுழற்று & ஸ்பின் வீல்

இது எவ்வாறு செயல்படுகிறது

மூன்று பயன்முறைகளும் — நாணயம் சுண்டுதல், சக்கரம் சுழற்றுதல், விருப்பத் தேர்வு — வெற்றி முடிவை உருவாக்க உலாவியின் உள்ளமைந்த Web Crypto API (crypto.getRandomValues) ஐப் பயன்படுத்தி, CSS transforms மற்றும் requestAnimationFrame மூலம் முழுவதும் client-side இல் animation ஐ இயக்குகின்றன. எந்த நிலையிலும் சர்வர் ஈடுபடுவதில்லை.

1. 1
   Web Crypto வெற்றியாளரைத் தேர்ந்தெடுக்கிறது

   எந்த animation உம் தொடங்கும் முன், crypto.getRandomValues ஒரு Uint32Array ஐ கிரிப்டோகிராஃபிக் சீரற்ற 32-bit முழு எண்ணால் நிரப்புகிறது. modulo செயல்பாடு அதை விருப்பங்களின் எண்ணிக்கைக்குப் (தலை/பூவுக்கு 2, சக்கரம் அல்லது தேர்வுக்கு N) பொருத்துகிறது; எனவே ஒவ்வொரு முடிவுக்கும் சரியாகச் சம நிகழ்தகவு.
2. 2
   முடிவில் நிற்கச் சுழற்சிக் கோணம் கணக்கிடப்படுகிறது

   நாணயத்துக்கு, குறியீடு சரியான முகம் மேலே வரும்படி (தலை 0°, பூ 180°) முடியும் குறுகிய கூடுதல் சுழற்சியை (தற்போதைய ஒட்டுமொத்தக் கோணத்துக்கு மேல்) கணக்கிட்டு, உண்மையான புரளல் போல் தெரிய 5 முழுச் சுழற்சிகளைச் சேர்க்கிறது. சக்கரமும் அதையே செய்கிறது: வெற்றித் துண்டைச் சுட்டிக்குக் கீழ் கொண்டுவரும் கோண ஈட்டைக் கண்டறிந்து, 6 முழுச் சுழற்சிகளைச் சேர்த்து, சுட்டி எப்போதும் துண்டின் நடுவில் நிற்காமல் இருக்கச் சிறிய சீரற்ற அசைவைப் பயன்படுத்துகிறது.
3. 3
   CSS transitions மற்றும் requestAnimationFrame animation ஐ இயக்குகின்றன

   நாணயமும் சக்கரமும் ஒற்றை ஒட்டுமொத்தச் சுழற்சி மதிப்பில் cubic-bezier easing வளைவுடன் CSS transform மூலம் அசைகின்றன — கோணம் அமைக்கப்பட்டதும் ஃப்ரேம்-வாரி JavaScript தேவையில்லை. விருப்பத் தேர்வு requestAnimationFrame ஐப் பயன்படுத்துகிறது: ஒவ்வொரு ஃப்ரேமிலும், இருமடியாக வளரும் இடைவெளி highlight ஐ முன்னகர்த்தலாமா எனத் தீர்மானிக்கிறது; எப்போதும் முன்கூட்டியே தீர்மானிக்கப்பட்ட வெற்றியாளரில் நிற்கும் slot-machine வேகக் குறைப்பை உருவாக்குகிறது.
4. 4
   முடிவு வெளிப்படுத்தப்பட்டு அமர்வு வரலாற்றில் பதிவுசெய்யப்படுகிறது

   animation முடிந்ததும் (நாணயத்துக்கு 1.3 வி, சக்கரத்துக்கு 4.3 வி) setTimeout இயங்கி முடிவை state இல் எழுதுகிறது. நாணயப் பயன்முறை தலை/பூ எண்ணிக்கைகளுடன் 24 சுண்டல்கள் வரை அமர்வு வரலாற்றை வைத்திருக்கிறது. prefers-reduced-motion இயக்கிய பயனர்கள் animation ஐ முழுவதும் தவிர்த்து முடிவை உடனே காண்பார்கள்.

தொடர்புடைய கருவிகள்