Lumaktaw sa pangunahing nilalaman

Libreng Paghagis ng Barya at Spin Wheel

Maghagis ng virtual na barya, mag-spin ng customizable na gulong, o random na pumili mula sa isang listahan ng mga pagpipilian. Gumagamit ng cryptographically secure na randomness ng iyong browser β€” hindi isang verifiable na pampublikong draw, kaya iwasan ang mga regulated na paligsahan.

Gumagana offline kapag na-load na

πŸ”’ Lahat ng tatlo ay gumagamit ng cryptographically-secure na random generator ng iyong browser: pinipili muna ang resulta, saka ito ina-animate β€” tunay na 50/50 ang barya, ini-spin ang gulong papunta sa napili nang resulta, at walang bias ang picker. Walang umaalis sa iyong device. Patas ito para sa kaswal na gamit, ngunit hindi ito isang verifiable na pampublikong draw, kaya iwasan ang mga regulated na paligsahan o mga desisyong may mataas na halaga.

Mga karaniwang gamit

  • Mag-flip ng Coin para Gumawa ng DecisionsGamitin ang fair virtual coin flip upang gumawa ng mabilis, unbiased decisions kapag nakatayo ka sa pagitan ng dalawang options.
  • Mag-spin ng Wheel para sa Random Team AssignmentsGamitin ang customisable spin wheel upang random na magtalaga ng team members sa tasks, roles, o groups.
  • Random Student Picker para sa ClassroomsGamitin ang spin wheel o option picker upang random na tumawag sa students, magtalaga ng groups, o magpili ng volunteers.
  • Virtual Coin Flip para sa SportsMag-flip ng fair coin upang matukoy ang team sides, first possession, serve order, o ibang sporting decisions.
  • Random Picker para sa GiveawaysPumili ng random winner mula sa list ng entries gamit ang Option Picker β€” transparent at fair.

Paano ito Gumagana

Lahat ng tatlong mode β€” coin flip, spin wheel, at option picker β€” ay gumagamit ng built-in na Web Crypto API ng browser (crypto.getRandomValues) para matukoy ang panalong resulta, pagkatapos ay pinapatakbo ang animation nang buo sa client-side gamit ang CSS transform at requestAnimationFrame. Walang server na kasangkot kahit kailan.

  1. 1
    Pinipili ng Web Crypto ang panalo
    Bago magsimula ang anumang animation, pinupuno ng crypto.getRandomValues ang isang Uint32Array ng cryptographically random na 32-bit integer. Ina-map ito ng modulo operation sa bilang ng opsyon (2 para sa ulo/buntot, N para sa wheel o picker), kaya eksaktong pantay ang tsansa ng bawat resulta.
  2. 2
    Kinakalkula ang anggulo ng pag-ikot para tumapat sa resulta
    Para sa barya, kinakalkula ng code ang pinakamaikling dagdag na pag-ikot (sa ibabaw ng kasalukuyang cumulative angle) na magtatapos na nakaharap ang tamang panig β€” ulo sa 0Β°, buntot sa 180Β° β€” pagkatapos ay nagdadagdag ng 5 buong ikot para magmukhang totoong pagpapaikot. Ganoon din ang wheel: hinahanap nito ang angular offset na magdadala sa panalong hiwa sa ilalim ng pointer, nagdadagdag ng 6 na buong ikot, at naglalagay ng maliit na random na jitter para hindi laging sa mismong gitna ng hiwa humihinto ang pointer.
  3. 3
    Pinapatakbo ng CSS transition at requestAnimationFrame ang animation
    Gumagalaw ang barya at wheel sa pamamagitan ng CSS transform na may cubic-bezier easing curve na ina-apply sa iisang naipong rotation value β€” hindi na kailangan ng per-frame na JavaScript kapag naitakda na ang anggulo. Gumagamit naman ang option picker ng requestAnimationFrame: sa bawat frame, isang quadratic na lumalaking interval ang nagtatakda kung ilulipat ang highlight, na nagbibigay ng pagbagal na parang slot machine na laging humihinto sa itinakdang panalo.
  4. 4
    Ipinapakita ang resulta at itinatala sa session history
    Pumuputok ang isang setTimeout kapag natapos ang animation (1.3 s para sa barya, 4.3 s para sa wheel) at isinusulat ang resulta sa state. Nagtatago ang coin mode ng tumatakbong session history ng hanggang 24 na flip na may bilang ng ulo/buntot. Ang mga user na naka-enable ang prefers-reduced-motion ay lumalaktaw sa animation at agad nakikita ang resulta.

Mga Kaugnay na Tool

Mga Madalas na Itanong