הטלת מטבע וגלגל סיבוב בחינם

כיצד זה עובד

כל שלושת המצבים — הטלת מטבע, גלגל סובב, ובוחר אפשרויות — משתמשים ב-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 מופעל מדלגים על האנימציה לגמרי ורואים את התוצאה מיד.

כלים קשורים