โยนเหรียญและปั่นวงล้อ ฟรี

วิธีการทำงาน

ทั้งสามโหมด — โยนเหรียญ หมุนวงล้อ และสุ่มเลือกตัวเลือก — ใช้ Web Crypto API ในตัวของเบราว์เซอร์ (crypto.getRandomValues) เพื่อสร้างผลลัพธ์ที่ชนะ แล้วขับเคลื่อนแอนิเมชันฝั่งไคลเอนต์ทั้งหมดด้วย CSS transform และ requestAnimationFrame ไม่มีเซิร์ฟเวอร์เกี่ยวข้องในทุกขั้นตอน

1. 1
   Web Crypto เลือกผู้ชนะ

   ก่อนแอนิเมชันเริ่ม crypto.getRandomValues จะเติม Uint32Array ด้วยจำนวนเต็ม 32 บิตแบบสุ่มเชิงวิทยาการเข้ารหัส การดำเนินการมอดูโลจับคู่กับจำนวนตัวเลือก (2 สำหรับหัว/ก้อย N สำหรับวงล้อหรือตัวสุ่มเลือก) ทุกผลลัพธ์จึงมีความน่าจะเป็นเท่ากันพอดี
2. 2
   คำนวณมุมหมุนให้หยุดที่ผลลัพธ์

   สำหรับเหรียญ โค้ดคำนวณการหมุนเพิ่มที่สั้นที่สุด (ต่อจากมุมสะสมปัจจุบัน) ที่จบด้วยหน้าที่ถูกต้องหงายขึ้น — หัวที่ 0° ก้อยที่ 180° — แล้วเพิ่มอีก 5 รอบเต็มให้ดูเหมือนตีลังกาจริง วงล้อทำเหมือนกัน: หามุมชดเชยที่นำชิ้นที่ชนะมาอยู่ใต้ตัวชี้ เพิ่ม 6 รอบเต็ม และใส่ความคลาดเคลื่อนสุ่มเล็กน้อยเพื่อไม่ให้ตัวชี้หยุดกลางชิ้นทุกครั้ง
3. 3
   CSS transition และ requestAnimationFrame ขับเคลื่อนแอนิเมชัน

   เหรียญและวงล้อเคลื่อนไหวผ่าน CSS transform พร้อมเส้นโค้ง cubic-bezier ที่ใช้กับค่าการหมุนสะสมค่าเดียว — ไม่ต้องใช้ JavaScript ทุกเฟรมเมื่อกำหนดมุมแล้ว ตัวสุ่มเลือกตัวเลือกใช้ requestAnimationFrame แทน: ในแต่ละเฟรม ช่วงเวลาที่เพิ่มขึ้นแบบกำลังสองกำหนดว่าจะเลื่อนไฮไลต์หรือไม่ ทำให้ชะลอตัวแบบตู้สล็อตที่หยุดที่ผู้ชนะที่กำหนดไว้ล่วงหน้าเสมอ
4. 4
   เปิดเผยผลลัพธ์และบันทึกลงประวัติเซสชัน

   setTimeout ทำงานเมื่อแอนิเมชันเสร็จ (1.3 วินาทีสำหรับเหรียญ 4.3 วินาทีสำหรับวงล้อ) และเขียนผลลัพธ์ลง state โหมดเหรียญเก็บประวัติเซสชันสูงสุด 24 ครั้งพร้อมจำนวนหัว/ก้อย ผู้ใช้ที่เปิด prefers-reduced-motion จะข้ามแอนิเมชันทั้งหมดและเห็นผลลัพธ์ทันที

เครื่องมือที่เกี่ยวข้อง