বিনামূল্যে কয়েন ফ্লিপ ও স্পিন হুইল

কিভাবে কাজ করে

তিনটি মোডই — কয়েন টস, স্পিন হুইল ও অপশন পিকার — বিজয়ী ফলাফল তৈরিতে ব্রাউজারের বিল্ট-ইন Web Crypto API (crypto.getRandomValues) ব্যবহার করে, তারপর CSS transform ও requestAnimationFrame দিয়ে পুরোপুরি ক্লায়েন্ট-সাইডে অ্যানিমেশন চালায়। কোনো পর্যায়ে সার্ভার জড়িত নয়।

1. 1
   Web Crypto বিজয়ী বাছাই করে

   অ্যানিমেশন শুরুর আগে crypto.getRandomValues একটি Uint32Array-কে ক্রিপ্টোগ্রাফিকভাবে র‍্যান্ডম 32-bit পূর্ণসংখ্যা দিয়ে ভরে। একটি modulo অপারেশন সেটিকে অপশনের সংখ্যায় (হেড/টেইলের জন্য 2, হুইল বা পিকারের জন্য N) মেলায়, তাই প্রতিটি ফলাফলের সম্ভাবনা ঠিক সমান।
2. 2
   ফলাফলে থামতে ঘূর্ণনের কোণ হিসাব হয়

   কয়েনের জন্য কোডটি (বর্তমান মোট কোণের উপর) সবচেয়ে ছোট অতিরিক্ত ঘূর্ণন হিসাব করে যাতে সঠিক দিক উপরে থাকে — হেড 0°, টেইল 180° — তারপর আসল উল্টানোর মতো দেখাতে 5টি পূর্ণ ঘূর্ণন যোগ করে। হুইলও একই করে: বিজয়ী অংশকে পয়েন্টারের নিচে আনার কৌণিক অফসেট খুঁজে 6টি পূর্ণ ঘূর্ণন যোগ করে, এবং সামান্য র‍্যান্ডম কাঁপুনি দেয় যাতে পয়েন্টার সবসময় অংশের ঠিক মাঝখানে না থামে।
3. 3
   CSS transition ও requestAnimationFrame অ্যানিমেশন চালায়

   কয়েন ও হুইল একটি মাত্র জমা ঘূর্ণন মানে cubic-bezier easing কার্ভসহ CSS transform দিয়ে অ্যানিমেট হয় — কোণ সেট হওয়ার পর প্রতি-ফ্রেম JavaScript লাগে না। অপশন পিকার এর বদলে requestAnimationFrame ব্যবহার করে: প্রতি ফ্রেমে বর্গাকারে বাড়তে থাকা একটি ব্যবধান ঠিক করে হাইলাইট সরবে কি না, ফলে স্লট মেশিনের মতো ধীর হয়ে সবসময় আগে থেকে নির্ধারিত বিজয়ীতে থামে।
4. 4
   ফলাফল দেখানো হয় ও সেশন ইতিহাসে রাখা হয়

   অ্যানিমেশন শেষ হলে (কয়েনে 1.3 s, হুইলে 4.3 s) একটি setTimeout ফলাফল state-এ লেখে। কয়েন মোড হেড/টেইলের সংখ্যাসহ সর্বোচ্চ 24টি টসের চলমান সেশন ইতিহাস রাখে। prefers-reduced-motion চালু থাকলে অ্যানিমেশন পুরোপুরি বাদ যায় এবং ফলাফল সঙ্গে সঙ্গে দেখা যায়।

সম্পর্কিত টুলস