მონეტის გადაყრა და ბორბლის დატრიალება უფასოდ

როგორ მუშაობს

ყველა სამივე რეჟიმი — მონეტის სროლა, ბორბლის ტრიალი და ვარიანტის ამრჩევი — იყენებს ბრაუზერის ჩაშენებულ 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-ის მეშვეობით, კუბური-ბეზიეს გლუვი მრუდით, ერთ დაგროვილ ტრიალის მნიშვნელობაზე გამოყენებული — კუთხის დაყენების შემდეგ ყოველ-კადრიანი JavaScript საჭირო არ არის. ვარიანტის ამრჩევი ამის ნაცვლად requestAnimationFrame-ს იყენებს: ყოველ კადრზე, კვადრატულად მზარდი ინტერვალი განსაზღვრავს, გადავიდეს თუ არა გამოკვეთა შემდეგზე, რაც ჯოკერ-მანქანის შენელებას ქმნის, რომელიც ყოველთვის წინასწარგანსაზღვრულ გამარჯვებულზე ჩერდება.
4. 4
   შედეგი ჩნდება და ილოგება სესიის ისტორიაში

   setTimeout ცეცხლდება ანიმაციის დასრულებისას (1.3 წმ მონეტისთვის, 4.3 წმ ბორბლისთვის) და შედეგს წერს მდგომარეობაში. მონეტის რეჟიმი ინახავს სესიის მიმდინარე ისტორიას, 24-მდე სროლამდე, გერბისა და ტუზის რაოდენობებით. მომხმარებლები, ვისთვისაც prefers-reduced-motion ჩართულია, ანიმაციას მთლიანად გამოტოვებენ და შედეგს მაშინვე ხედავენ.

დაკავშირებული ინსტრუმენტები