🪙

فڕاندنی پارە و چەرخی هەڵبژاردنی بەخۆڕایی

پارەیەکی مەجازی بفڕێنە، چەرخێکی دەستکاریکراو بسووڕێنە، یان بە هەڕەمەکی لە لیستێک هەڵبژێرە. ئاماژە هەڕەمەکییی وشیارانەی وێبگەڕەکەت بەکاردەهێنێت — نەک هەڵبژاردنێکی گشتی پشتڕاستکراو، بۆیە دوور بکەوە لە پێشبڕکێی یاسایی.

لە وێبگەڕەکەتدا کاردەکاتبێ خۆتۆمارکردن، بێ پۆپئەپپێویستی بە چوونەژوورەوە نییەڕایگان بۆ هەمیشە

بەبێ ئینتەرنێت کاردەکات دوای بارکردن

🔒 هەر سێیان هەڵگری هەڕەمەکیی بەهێزی نهێنیناسیی وێبگەڕەکەت بەکاردەهێنن: ئەنجامەکە سەرەتا هەڵدەبژێردرێت، پاشان جوڵانەوەی پیشان دەدرێت — پارەکە بەڕاستی 50/50یە، چەرخەکە دەخولێتەوە بۆ ئەنجامی پێشتر هەڵبژێردراو، و هەڵبژێرەکەش بێلایەنە. هیچ شتێک ئامێرەکەت بەجێناهێڵێت. ئەمە بۆ بەکارهێنانی ئاسایی دادپەروەرانەیە، بەڵام کێشانێکی گشتیی بڕوابەخشراو نییە، بۆیە خۆت لە پێشبڕکێی یاسایی یان بڕیاری بەهاگران دوور بگرە.

چۆن کار دەکات

هەر سێ دۆخەکە — فڕاندنی دراو، خولانەوەی چەرخ، و هەڵبژاردنی بژاردە — APIی سەرەکی Web Cryptoی وێبگەڕ بەکاردێنن (crypto.getRandomValues) بۆ دروستکردنی ئەنجامی بردنەوە، پاشان ئەنیمەیشنەکە تەواو لایەنی داواکار بەڕێوەدەبەن بە گۆڕانکاری CSS و requestAnimationFrame. هیچ سێرڤەرێک لە هیچ خاڵێکدا تێناکەوێت.

1
Web Crypto براوەکە هەڵدەبژێرێت
پێش دەستپێکردنی هەر ئەنیمەیشنێک، crypto.getRandomValues Uint32Arrayیەک پڕدەکاتەوە بە ژمارەیەکی 32-بیتی بەهەڕەمەکی کریپتۆگرافیانە. کارلێکی مۆدولۆ نەخشەی دەکات بۆ ژمارەی بژاردەکان (2 بۆ لای/پشت، N بۆ چەرخ یان هەڵبژاردن)، بۆیە هەر ئەنجامێک ئیحتمالی هاوبەشی ڕاستەقینەی هەیە.
2
گۆشەی خولانەوە ژمێردەکرێت بۆ گەیشتن بە ئەنجام
بۆ دراوەکە، کۆدەکە کورترین خولانەوەی زیادە ژمێردەکات (لەسەرووی گۆشەی کۆکراوەی ئێستا) کە بە ڕووی دروست بۆ سەرەوە کۆتایی دێت — پش لە 0°، خوارەوە لە 180° — پاشان 5 خولانەوەی تەواو زیاد دەکات بۆیە وەک هەڵگەڕانەوەیەکی ڕاستەقینە دەردەکەوێت. چەرخەکە هەمان شت دەکات: جیاوازیی گۆشەیی کە پارچەی براوە دەهێنێتە ژێر نیشانەرەوە دەدۆزێتەوە، 6 خولانەوەی تەواو زیاد دەکات، و جیتەرێکی بچووکی هەڕەمەکی جێبەجێدەکات بۆیە نیشانەرەکە هەمیشە لە ناوەڕاستی پارچەکەدا ڕاناوەستێت.
3
گواستنەوەی CSS و requestAnimationFrame ئەنیمەیشنەکە دەبەن
دراو و چەرخ لە ڕێگای گواستنەوەی CSSەوە ئەنیمەیت دەکرێن لەگەڵ کێوی هێواشکردنەوەی cubic-bezierی جێبەجێکراو لەسەر تاک نرخی خولانەوەی کۆکراو — هیچ جاڤاسکریپتی هەر-چوارچێوە پێویست ناکات کاتێک گۆشەکە دانرا. هەڵبژاردنی بژاردە requestAnimationFrame بەکاردێنێت لەبری ئەوە: هەر چوارچێوەیەک، مەودایەکی چوارگۆشەیی گەشەکردوو دیاری دەکات ئایا تیشکخستنەکە پێش بخات، کاسپکردنی ئامێری-قومار دروستدەکات کە هەمیشە لەسەر براوەی پێشوەخت دیاریکراو ڕادەوەستێت.
4
ئەنجام دەردەخرێت و لە مێژووی دانیشتندا تۆمار دەکرێت
setTimeoutـێک دەگیرسێت کاتێک ئەنیمەیشنەکە تەواو بێت (1.3 چ. بۆ دراو، 4.3 چ. بۆ چەرخ) و ئەنجامەکە لە دۆخدا دەنووسێت. دۆخی دراو مێژووی دانیشتنی هەڵکەوتوو تا 24 فڕاندن دەپارێزێت لەگەڵ ژمارەی پش/پشت. بەکارهێنەرانی prefers-reduced-motion چالاککراو بەتەواوی ئەنیمەیشن جێدەهێڵن و دەستبەجێ ئەنجامەکە دەبینن.