قلب العملة وعجلة الحظ مجانًا

كيف يعمل

الأوضاع الثلاثة — رمي العملة، والعجلة الدوّارة، ومنتقي الخيارات — تستخدم Web Crypto API المدمجة في المتصفح (crypto.getRandomValues) لتوليد النتيجة الفائزة، ثم تشغّل الرسوم المتحركة بالكامل على جانب العميل بتحويلات CSS وrequestAnimationFrame. لا يشارك أي خادم في أي مرحلة.

1. 1
   Web Crypto تختار الفائز

   قبل بدء أي حركة، يملأ crypto.getRandomValues مصفوفة Uint32Array بعدد صحيح عشوائي تشفيريًا من 32 بت. وتربطه عملية باقي القسمة بعدد الخيارات (2 للوجه/الظهر، وN للعجلة أو المنتقي)، فيكون لكل نتيجة احتمال متساوٍ تمامًا.
2. 2
   تُحسب زاوية الدوران لتستقر على النتيجة

   بالنسبة للعملة، يحسب الكود أقصر دوران إضافي (فوق الزاوية التراكمية الحالية) ينتهي بالوجه الصحيح للأعلى — الوجه عند 0° والظهر عند 180° — ثم يضيف 5 دورات كاملة لتبدو كأنها تتقلب فعلًا. والعجلة تفعل الشيء نفسه: تجد الإزاحة الزاوية التي تضع الشريحة الفائزة تحت المؤشر، وتضيف 6 دورات كاملة، وتطبق اهتزازًا عشوائيًا صغيرًا حتى لا يتوقف المؤشر دائمًا في منتصف الشريحة تمامًا.
3. 3
   انتقالات CSS وrequestAnimationFrame تشغّل الحركة

   تتحرك العملة والعجلة عبر CSS transform مع منحنى تسهيل cubic-bezier مطبّق على قيمة دوران تراكمية واحدة — لا حاجة إلى JavaScript لكل إطار بمجرد ضبط الزاوية. أما منتقي الخيارات فيستخدم requestAnimationFrame بدلًا من ذلك: في كل إطار، تحدد فترة متنامية تربيعيًا ما إذا كان التمييز سينتقل، فينتج تباطؤًا يشبه آلة القمار ويتوقف دائمًا على الفائز المحدد مسبقًا.
4. 4
   تُكشف النتيجة وتُسجَّل في سجل الجلسة

   يُطلق setTimeout عند اكتمال الحركة (1.3 ث للعملة، 4.3 ث للعجلة) ويكتب النتيجة في الحالة. يحتفظ وضع العملة بسجل جلسة جارٍ حتى 24 رمية مع عدد مرات الوجه والظهر. والمستخدمون الذين فعّلوا prefers-reduced-motion يتخطون الحركة كليًا ويرون النتيجة فورًا.

أدوات ذات صلة