Langkau ke kandungan utama

Lambung Syiling & Putar Roda percuma

Lambung syiling maya, putar roda yang boleh disesuaikan atau pilih secara rawak daripada senarai pilihan. Menggunakan kerawakan yang selamat secara kriptografi pelayar anda β€” bukan undian awam yang boleh disahkan, jadi elakkan pertandingan yang dikawal.

Berfungsi luar talian selepas dimuatkan

πŸ”’ Ketiga-tiganya menggunakan penjana nombor rawak selamat secara kriptografi pelayar anda: hasilnya dipilih terlebih dahulu kemudian dianimasi β€” syiling itu adalah 50/50 yang benar, roda berputar ke hasilnya yang sudah dipilih, dan pemilih tidak berat sebelah. Tidak ada yang meninggalkan peranti anda. Ini adil untuk penggunaan santai, tetapi ia bukan undian awam yang boleh disahkan, jadi elakkan pertandingan yang dikawal atau keputusan bernilai tinggi.

Kegunaan biasa

  • Balikkan Syiling untuk KeputusanGunakan lambungan syiling maya yang adil untuk membuat keputusan cepat dan tidak berat sebelah apabila anda terjebak antara dua pilihan.
  • Putaran Roda untuk Penugasan Pasukan RawakGunakan roda putaran yang boleh disesuaikan untuk menetapkan secara rawak ahli pasukan kepada tugas, peranan atau kumpulan.
  • Pemetik Pelajar Rawak untuk Bilik DarjahGunakan roda putaran atau pemetik pilihan untuk memanggil pelajar secara rawak, memberikan kumpulan atau memilih sukarelawan.
  • Lambungan Syiling Maya untuk SukanBalikkan syiling yang adil untuk menentukan sisi pasukan, pemilikan pertama, urutan perkhidmatan atau keputusan sukan yang lain.
  • Pemetik Rawak untuk PemberianPilih pemenang rawak daripada senarai kemasukan menggunakan pemetik pilihan β€” telus dan adil.

Cara ia berfungsi

Kesemua tiga mod β€” lambung syiling, roda putar, dan pemilih pilihan β€” menggunakan Web Crypto API terbina dalam pelayar (crypto.getRandomValues) untuk menjana hasil menang, kemudian menggerakkan animasi sepenuhnya-sisi-klien dengan transformasi CSS dan requestAnimationFrame. Tiada pelayan terlibat pada mana-mana titik.

  1. 1
    Web Crypto memilih pemenang
    Sebelum sebarang animasi bermula, crypto.getRandomValues mengisi Uint32Array dengan integer 32-bit rawak secara kriptografi. Operasi modulo memetakannya kepada bilangan pilihan (2 untuk kepala/ekor, N untuk roda atau pemilih), jadi setiap hasil mempunyai kebarangkalian yang tepat sama.
  2. 2
    Sudut putaran dikira untuk mendarat pada hasil
    Untuk syiling, kod ini mengira putaran tambahan terpendek (di atas sudut kumulatif semasa) yang berakhir dengan muka yang betul di atas β€” kepala pada 0Β°, ekor pada 180Β° β€” kemudian menambah 5 putaran penuh supaya ia kelihatan seperti gulungan sebenar. Roda melakukan perkara yang sama: ia mencari ofset sudut yang membawa hirisan menang di bawah penunjuk, menambah 6 putaran penuh, dan mengenakan sedikit gegaran rawak supaya penunjuk tidak sentiasa berhenti tepat di tengah hirisan.
  3. 3
    Peralihan CSS dan requestAnimationFrame menggerakkan animasi
    Syiling dan roda dianimasikan melalui transformasi CSS dengan lengkung pelonggaran cubic-bezier dikenakan pada satu nilai putaran terkumpul β€” tiada JavaScript setiap-bingkai diperlukan sebaik sudut ditetapkan. Pemilih pilihan sebaliknya menggunakan requestAnimationFrame: setiap bingkai, selang yang berkembang secara kuadratik menentukan sama ada untuk memajukan sorotan, menghasilkan perlambatan gaya mesin-slot yang sentiasa berhenti pada pemenang yang telah ditentukan terlebih dahulu.
  4. 4
    Hasil didedahkan dan dilog ke sejarah sesi
    setTimeout tercetus apabila animasi selesai (1.3 saat untuk syiling, 4.3 saat untuk roda) dan menulis hasilnya ke state. Mod syiling mengekalkan sejarah sesi berjalan sehingga 24 lambungan dengan kiraan kepala/ekor. Pengguna dengan prefers-reduced-motion dihidupkan melangkau animasi sepenuhnya dan melihat hasil serta-merta.

Alat berkaitan

Soalan lazim