ਮੁਫ਼ਤ ਸਿੱਕਾ ਉਛਾਲੋ ਅਤੇ ਵ੍ਹੀਲ ਸਪਿਨ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਤਿੰਨੇ ਮੋਡ — ਸਿੱਕਾ ਉਛਾਲ, ਘੁੰਮਦਾ ਪਹੀਆ, ਅਤੇ ਵਿਕਲਪ ਚੋਣਕਾਰ — ਜਿੱਤਣ ਵਾਲਾ ਨਤੀਜਾ ਬਣਾਉਣ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਬਿਲਟ-ਇਨ Web Crypto API (crypto.getRandomValues) ਵਰਤਦੇ ਹਨ, ਫਿਰ CSS transforms ਅਤੇ requestAnimationFrame ਨਾਲ ਐਨੀਮੇਸ਼ਨ ਪੂਰੀ ਤਰ੍ਹਾਂ client-side ਚਲਾਉਂਦੇ ਹਨ। ਕਿਸੇ ਵੀ ਸਮੇਂ ਕੋਈ ਸਰਵਰ ਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦਾ।

1. 1
   Web Crypto ਜੇਤੂ ਚੁਣਦਾ ਹੈ

   ਕੋਈ ਵੀ ਐਨੀਮੇਸ਼ਨ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, crypto.getRandomValues ਇੱਕ Uint32Array ਨੂੰ cryptographically random 32-bit ਪੂਰਨ ਅੰਕ ਨਾਲ ਭਰਦਾ ਹੈ। ਇੱਕ modulo ਕਿਰਿਆ ਇਸਨੂੰ ਵਿਕਲਪਾਂ ਦੀ ਗਿਣਤੀ ਨਾਲ ਜੋੜਦੀ ਹੈ (heads/tails ਲਈ 2, ਪਹੀਏ ਜਾਂ ਚੋਣਕਾਰ ਲਈ N), ਇਸ ਲਈ ਹਰ ਨਤੀਜੇ ਦੀ ਸੰਭਾਵਨਾ ਬਿਲਕੁਲ ਬਰਾਬਰ ਹੁੰਦੀ ਹੈ।
2. 2
   ਨਤੀਜੇ 'ਤੇ ਰੁਕਣ ਲਈ ਘੁਮਾਅ ਦਾ ਕੋਣ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ

   ਸਿੱਕੇ ਲਈ, ਕੋਡ ਸਭ ਤੋਂ ਛੋਟਾ ਵਾਧੂ ਘੁਮਾਅ (ਮੌਜੂਦਾ ਕੁੱਲ ਕੋਣ ਤੋਂ ਉੱਪਰ) ਗਿਣਦਾ ਹੈ ਜੋ ਸਹੀ ਪਾਸਾ ਉੱਪਰ ਕਰਕੇ ਖ਼ਤਮ ਹੋਵੇ — heads 0° 'ਤੇ, tails 180° 'ਤੇ — ਫਿਰ 5 ਪੂਰੇ ਚੱਕਰ ਜੋੜਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਅਸਲ ਉਛਾਲ ਵਰਗਾ ਲੱਗੇ। ਪਹੀਆ ਵੀ ਇਹੀ ਕਰਦਾ ਹੈ: ਇਹ ਉਹ ਕੋਣੀ ਫ਼ਰਕ ਲੱਭਦਾ ਹੈ ਜੋ ਜੇਤੂ ਹਿੱਸੇ ਨੂੰ ਸੂਈ ਹੇਠਾਂ ਲਿਆਵੇ, 6 ਪੂਰੇ ਚੱਕਰ ਜੋੜਦਾ ਹੈ, ਅਤੇ ਥੋੜ੍ਹਾ ਬੇਤਰਤੀਬ ਹਿਲਾਅ ਲਾਉਂਦਾ ਹੈ ਤਾਂ ਜੋ ਸੂਈ ਹਮੇਸ਼ਾ ਹਿੱਸੇ ਦੇ ਬਿਲਕੁਲ ਵਿਚਕਾਰ ਨਾ ਰੁਕੇ।
3. 3
   CSS transitions ਅਤੇ requestAnimationFrame ਐਨੀਮੇਸ਼ਨ ਚਲਾਉਂਦੇ ਹਨ

   ਸਿੱਕਾ ਅਤੇ ਪਹੀਆ ਇੱਕ ਇਕੱਠੇ ਘੁਮਾਅ ਮੁੱਲ 'ਤੇ cubic-bezier easing curve ਨਾਲ CSS transform ਰਾਹੀਂ ਐਨੀਮੇਟ ਹੁੰਦੇ ਹਨ — ਕੋਣ ਸੈੱਟ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹਰ-ਫ੍ਰੇਮ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ। ਵਿਕਲਪ ਚੋਣਕਾਰ ਇਸਦੀ ਥਾਂ requestAnimationFrame ਵਰਤਦਾ ਹੈ: ਹਰ ਫ੍ਰੇਮ, ਵਰਗਾਕਾਰ ਢੰਗ ਨਾਲ ਵਧਦਾ ਅੰਤਰਾਲ ਤੈਅ ਕਰਦਾ ਹੈ ਕਿ highlight ਅੱਗੇ ਵਧਾਉਣੀ ਹੈ ਜਾਂ ਨਹੀਂ, ਜਿਸ ਨਾਲ ਸਲਾਟ-ਮਸ਼ੀਨ ਵਰਗੀ ਹੌਲੀ ਹੁੰਦੀ ਗਤੀ ਬਣਦੀ ਹੈ ਜੋ ਹਮੇਸ਼ਾ ਪਹਿਲਾਂ ਤੋਂ ਤੈਅ ਜੇਤੂ 'ਤੇ ਰੁਕਦੀ ਹੈ।
4. 4
   ਨਤੀਜਾ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸੈਸ਼ਨ ਇਤਿਹਾਸ ਵਿੱਚ ਦਰਜ ਹੁੰਦਾ ਹੈ

   ਐਨੀਮੇਸ਼ਨ ਪੂਰੀ ਹੋਣ 'ਤੇ ਇੱਕ setTimeout ਚੱਲਦਾ ਹੈ (ਸਿੱਕੇ ਲਈ 1.3 s, ਪਹੀਏ ਲਈ 4.3 s) ਅਤੇ ਨਤੀਜਾ state ਵਿੱਚ ਲਿਖਦਾ ਹੈ। ਸਿੱਕਾ ਮੋਡ heads/tails ਗਿਣਤੀਆਂ ਨਾਲ 24 ਉਛਾਲਾਂ ਤੱਕ ਦਾ ਸੈਸ਼ਨ ਇਤਿਹਾਸ ਰੱਖਦਾ ਹੈ। prefers-reduced-motion ਚਾਲੂ ਵਾਲੇ ਵਰਤੋਂਕਾਰ ਐਨੀਮੇਸ਼ਨ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡਦੇ ਹਨ ਅਤੇ ਨਤੀਜਾ ਤੁਰੰਤ ਵੇਖਦੇ ਹਨ।

ਸੰਬੰਧਿਤ ਟੂਲ