အခမဲ့ အကြေးဒင်္ဂါးပစ်/ဘီးလည်စက်

မည်သို့ အလုပ်လုပ်သည်

Mode သုံးခုစလုံး — coin flip, spin wheel နှင့် option picker — သည် browser ၏ built-in Web Crypto API (crypto.getRandomValues) ကို သုံး၍ အနိုင်ရလဒ်ကို ထုတ်ပေးပြီး CSS transform များနှင့် requestAnimationFrame ဖြင့် client-side တွင် လုံးဝ animation ကို မောင်းနှင်သည်။ Server မပါဝင်ပါ။

1. 1
   Web Crypto သည် အနိုင်ရသူကို ရွေးချယ်သည်

   Animation မစတင်မီ crypto.getRandomValues သည် Uint32Array တစ်ခုကို cryptographically random 32-bit integer ဖြင့် ဖြည့်သည်။ Modulo operation တစ်ခုသည် ၎င်းကို option အရေအတွက် (heads/tails အတွက် 2၊ wheel သို့မဟုတ် picker အတွက် N) သို့ map လုပ်သဖြင့် ရလဒ်တိုင်းသည် တူညီသော ဖြစ်နိုင်ချေရှိသည်။
2. 2
   Rotation angle ကို ရလဒ်ပေါ်တွင် ကျရောက်စေရန် တွက်ချက်ထားသည်

   Coin အတွက် code သည် (လက်ရှိစုပေါင်း angle အပေါ်) အမှန်ကန်ဆုံးဖက်ဖြင့် အဆုံးသတ်မည့် အနည်းဆုံး additional rotation ကို တွက်ချက်ပြီး — heads သည် 0°၊ tails သည် 180° — real tumble တစ်ခုကဲ့သို့ ဖြစ်စေရန် full spin 5 ခု ထပ်ထည့်သည်။ Wheel သည် တူညီစွာ ပြုလုပ်သည် — အနိုင်ရ slice ကို pointer အောက်သို့ ယူဆောင်လာမည့် angular offset ကို ရှာပြီး full rotation 6 ခု ထပ်ထည့်ကာ pointer သည် slice ၏ အလယ်တွင် အမြဲမရပ်စေရန် ကျပန်း jitter အနည်းငယ် အသုံးချသည်။
3. 3
   CSS transition နှင့် requestAnimationFrame သည် animation ကို မောင်းနှင်သည်

   Coin နှင့် wheel သည် စုပေါင်း rotation တန်ဖိုးတစ်ခုတည်းပေါ် cubic-bezier easing curve ပါသော CSS transform မှတစ်ဆင့် animate လုပ်သည် — angle သတ်မှတ်ပြီးသည်နှင့် frame-per-frame JavaScript မလိုအပ်ပါ။ Option picker သည် requestAnimationFrame ကို အစား သုံးသည် — frame တိုင်းတွင် quadratically ကြီးထွားသော interval တစ်ခုသည် highlight ကို ရှေ့ဆက်မည်လား ဆုံးဖြတ်ပေးသည်၊ ကြိုတင်သတ်မှတ်ထားသော အနိုင်ရသူပေါ်တွင် အမြဲ ရပ်တန့်သွားသော slot-machine deceleration ကို ဖန်တီးပေးသည်။
4. 4
   ရလဒ်ကို ဖော်ထုတ်ပြီး session history ထဲသို့ ရေးသွင်းသည်

   Animation ပြီးဆုံးသောအခါ (coin အတွက် 1.3 စက္ကန့်၊ wheel အတွက် 4.3 စက္ကန့်) setTimeout တစ်ခု ငြင်းသွားပြီး ရလဒ်ကို state သို့ ရေးသည်။ Coin mode သည် flip 24 ခုအထိ heads/tails count များပါသော session history ကို ဆက်လက် ထားရှိသည်။ prefers-reduced-motion ဖွင့်ထားသူများသည် animation ကို လုံးဝ ကျော်ပြီး ရလဒ်ကို ချက်ချင်း မြင်ရသည်။

ဆက်နွှယ်သော ကိရိယာများ