क्या सीएसएस में कोई यादृच्छिक संख्या है?

CSS आपको इंटरनेट पर गतिशील लेआउट और इंटरफेस बनाने की अनुमति देता है, लेकिन मार्कअप भाषा के रूप में यह स्थिर है - आप मान सेट करने के बाद इसे बदल नहीं सकते हैं। मौका के विचार पर चर्चा नहीं की जाती है। रनटाइम रैंडम नंबर जनरेशन जावास्क्रिप्ट का एक क्षेत्र है, सीएसएस नहीं।

या नहीं? यदि हम थोड़ी उपयोगकर्ता सहभागिता के लिए अनुमति देते हैं, तो हम वास्तव में सीएसएस में कुछ हद तक यादृच्छिकता उत्पन्न कर सकते हैं। आइए एक नजर डालते हैं!

अन्य भाषाओं में यादृच्छिकता

सीएसएस चर का उपयोग करके कुछ "डायनेमिक रैंडमाइजेशन" प्राप्त करने के तरीके हैं, जैसा कि रॉबिन रेंडल ने सीएसएस ट्रिक्स पर एक लेख में बताया है। लेकिन ये समाधान 100% सीएसएस नहीं हैं, क्योंकि उन्हें सीएसएस चर को नए यादृच्छिक मूल्य के साथ अपडेट करने के लिए जावास्क्रिप्ट की आवश्यकता होती है।

यादृच्छिक मान उत्पन्न करने के लिए हम Sass या Less जैसे पूर्वप्रक्रमकों का उपयोग कर सकते हैं, लेकिन जैसे ही CSS कोड संकलित और निर्यात किया जाता है, मान निश्चित हो जाते हैं और यादृच्छिकता खो जाती है।

मैं सीएसएस में यादृच्छिक मूल्यों के बारे में चिंतित क्यों हूं?

अतीत में, मैंने सरल सीएसएस-केवल एप्लिकेशन जैसे कि क्विज़ , सीएस साइमन का गेम और मैजिक ट्रिक विकसित किया, लेकिन मैं कुछ और जटिल करना चाहता था।

* मैं बाद में केवल सीएसएस में इन स्निपेट बनाने की वैधता, उपयोगिता या व्यावहारिकता की चर्चा छोड़ दूंगा।

इस तथ्य के आधार पर कि कुछ बोर्ड गेम्स को राज्य मशीनों (एफएसएम) के रूप में प्रतिनिधित्व किया जा सकता है, फिर उन्हें HTML और सीएसएस का उपयोग करके प्रतिनिधित्व किया जा सकता है।

इसलिए, मैंने खेल "लीला" विकसित करना शुरू कर दिया (यह "सांप और सीढ़ी" भी है)।

यह एक सरल खेल है। संक्षेप में, खेल का लक्ष्य बोर्ड की शुरुआत से अंत तक चिप को आगे बढ़ाना है, सांपों से बचना और सीढ़ियों पर चढ़ने की कोशिश करना।

इस परियोजना को संभव लग रहा था, लेकिन मैं कुछ याद किया, हाँ यकीन है - पासा!
फेंकने का पासा (अन्य खेलों में, सिक्के फेंकना) आमतौर पर यादृच्छिक मूल्यों को प्राप्त करने के लिए स्वीकृत तरीके हैं। आप पासा को रोल करते हैं या एक सिक्का उछालते हैं, और हर बार आपको एक अज्ञात मूल्य मिलता है। सब कुछ सरल लगता है।

हड्डियों के एक यादृच्छिक फेंक का अनुकरण

मैं लेबलों के साथ परतों को ओवरले करने जा रहा था और सीएसएस एनीमेशन का उपयोग "घुमाने" के लिए कर रहा था और जो परत शीर्ष पर थी उसे साझा करें। कुछ इस तरह:



इस यादृच्छिकरण का अनुकरण करने वाला कोड बहुत जटिल नहीं है और एनीमेशन और विभिन्न एनीमेशन देरी का उपयोग करके प्राप्त किया जा सकता है:

/*   z-index -     */ @keyframes changeOrder { from { z-index: 6; } to { z-index: 1; } } /*        */ label { animation: changeOrder 3s infinite linear; background: #ddd; cursor: pointer; display: block; left: 1rem; padding: 1rem; position: absolute; top: 1rem; user-select: none; } /*  ,        */ label:nth-of-type(1) { animation-delay: -0.0s; } label:nth-of-type(2) { animation-delay: -0.5s; } label:nth-of-type(3) { animation-delay: -1.0s; } label:nth-of-type(4) { animation-delay: -1.5s; } label:nth-of-type(5) { animation-delay: -2.0s; } label:nth-of-type(6) { animation-delay: -2.5s; } 

बातचीत को सरल बनाने के लिए एनीमेशन को धीमा कर दिया गया था (लेकिन अभी भी काफी तेजी से नीचे दिए गए बाधा को देखने के लिए)। छद्म यादृच्छिकता भी स्पष्ट है।

 <label for="d1">Click here to roll the dice</label> <label for="d2">Click here to roll the dice</label> <label for="d3">Click here to roll the dice</label> <label for="d4">Click here to roll the dice</label> <label for="d5">Click here to roll the dice</label> <label for="d6">Click here to roll the dice</label> <div> <input type="radio" id="d1" name="dice"> <input type="radio" id="d2" name="dice"> <input type="radio" id="d3" name="dice"> <input type="radio" id="d4" name="dice"> <input type="radio" id="d5" name="dice"> <input type="radio" id="d6" name="dice"> <p>You got a: <span id="random-value"></span></p> </div> 

 @keyframes changeOrder { from { z-index: 6;} to { z-index: 1; } } label { animation: changeOrder 3s infinite linear; background: #ddd; cursor: pointer; display: block; left: 1rem; padding: 1rem; position: absolute; top: 1rem; user-select: none; } label:nth-of-type(1) { animation-delay: 0s; } label:nth-of-type(2) { animation-delay: -0.5s; } label:nth-of-type(3) { animation-delay: -1.0s; } label:nth-of-type(4) { animation-delay: -1.5s; } label:nth-of-type(5) { animation-delay: -2.0s; } label:nth-of-type(6) { animation-delay: -2.5s; } div { left: 1rem; position: absolute; top: 5rem; width: 100%; } #d1:checked ~ p span::before { content: "1"; } #d2:checked ~ p span::before { content: "2"; } #d3:checked ~ p span::before { content: "3"; } #d4:checked ~ p span::before { content: "4"; } #d5:checked ~ p span::before { content: "5"; } #d6:checked ~ p span::before { content: "6"; } 

लेकिन फिर मैं एक निश्चित सीमा में आ गया। मुझे यादृच्छिक संख्याएँ मिलीं, लेकिन कभी-कभी, जब मैं "पासा" पर क्लिक करता था, तब भी क्षेत्र का कोई मूल्य नहीं लौटता था।

मैंने एनीमेशन समय को बढ़ाने की कोशिश की, और यह थोड़ा मदद करने के लिए लग रहा था, लेकिन मेरे पास अभी भी कुछ अप्रत्याशित मूल्य थे।

यह तब था जब मैंने सबसे अधिक डेवलपर्स किया था जब वे बाधाओं को खोजते हैं जो वे हल नहीं कर सकते हैं - मैं स्टैकऑवरफ़्लो पर मदद के लिए पॉप अप हुआ। मैं इसकी सलाह देता हूं।

मेरे लिए सौभाग्य से, वहाँ हमेशा मदद करने के लिए तैयार लोग होंगे, मेरे मामले में यह उनके स्पष्टीकरण के साथ टेमानी आफिफ़ था।

यदि आप सरल बनाने की कोशिश करते हैं, तो समस्या यह थी कि ब्राउज़र क्लिक इवेंट को केवल तब सक्रिय करता है जब तत्व सक्रिय स्थिति में होता है (जब माउस क्लिक किया जाता है), दूसरे शब्दों में, यह वही तत्व है जो माउस बटन दबाए जाने पर सक्रिय होता है।

बदलते एनीमेशन के कारण, जब आप माउस पर क्लिक करते हैं, तो शीर्ष परत (लेबल), वास्तव में, माउस दबाए जाने पर वह शीर्ष परत (लेबल) नहीं था, जब तक कि मैंने इसे पर्याप्त तेजी से, अच्छी तरह से या धीरे-धीरे नहीं किया, ताकि एनीमेशन पहले से ही हो चक्र के सभी मूल्यों के माध्यम से जाने में कामयाब रहे। यही कारण है कि एनीमेशन समय में वृद्धि ने इस समस्या को छिपा दिया है।

स्टैक संदर्भ को तोड़ने के लिए समाधान "स्थैतिक" स्थिति को लागू करना था, और इसकी जगह लेने के लिए एक उच्च जेड-इंडेक्स के साथ :: पहले या जैसे :: के बाद छद्म तत्व का उपयोग करना था। इस प्रकार, जब आप पर माउस ले जाते हैं तो सक्रिय लेबल हमेशा शीर्ष पर रहेगा।

 /*   label      */ label:active { margin-left: 200%; position: static; } /*         z-index */ label:active::before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 10; } 

यहाँ तेज एनीमेशन समय के साथ एक समाधान के साथ कोड है:


इस बदलाव को करने के बाद, यह छद्म क्यूब्स को खींचने के लिए एक छोटा सा इंटरफ़ेस बनाता है जिसे माउस के साथ क्लिक किया जा सकता है, और CSS गेम स्नेक्स और लैडर्स पूरा हो चुका है।

इस तकनीक के कुछ स्पष्ट नुकसान हैं।

1. उपयोगकर्ता के साथ सहभागिता आवश्यक है - "यादृच्छिक संख्याओं की पीढ़ी" का कारण बनने के लिए एक लेबल पर क्लिक करना आवश्यक है।
2. विधि अच्छी तरह से पैमाने पर नहीं है - यह मूल्यों के छोटे सेट के साथ बहुत अच्छा काम करता है, लेकिन यह बड़ी रेंज के लिए एक दर्द है।
3. यह एक वास्तविक यादृच्छिक नहीं है, लेकिन फिर भी एक छद्म यादृच्छिकता है, और कंप्यूटर आसानी से यह निर्धारित कर सकता है कि प्रत्येक पल क्या मूल्य उत्पन्न होगा।

लेकिन दूसरी ओर, यह 100% सीएसएस है (प्रीप्रोसेसरों या अन्य बाहरी सहायकों की कोई आवश्यकता नहीं है), और एक व्यक्ति के लिए यह 100% यादृच्छिक लग सकता है।

और, हां, इस पद्धति का उपयोग न केवल यादृच्छिक संख्याओं के लिए किया जा सकता है, बल्कि यादृच्छिक सब कुछ के लिए भी किया जा सकता है। इस मामले में, हमने इसका उपयोग "गलती से" गेम "रॉक-पेपर-कैंची" में एक कंप्यूटर का चयन करने के लिए किया।