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

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



यादृच्छिक संख्या पीढ़ी जावास्क्रिप्ट का एक क्षेत्र है जो CSS दर्ज नहीं करता है। लेकिन क्या होगा अगर यह पूरी तरह से सच नहीं है? वास्तव में, यदि आप उपयोगकर्ता द्वारा किए गए कार्यों को ध्यान में रखते हैं, तो इससे सीएसएस में कुछ यादृच्छिकता जुड़ जाएगी। सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, इस पर चर्चा करने की पेशकश करता है।

बाहरी सीएसएस यादृच्छिककरण

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

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

मुझे सीएसएस में यादृच्छिक मूल्यों का उपयोग करने में दिलचस्पी क्यों है?

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

इस आधार पर कि कुछ बोर्ड गेम्स को Finite State Machines (FSM) के रूप में दर्शाया जा सकता है, हम यह निष्कर्ष निकाल सकते हैं कि इस तरह के गेम को केवल HTML और CSS का उपयोग करके लागू किया जा सकता है। इस विचार के साथ, मैंने खेल " सांप और सीढ़ी " विकसित करना शुरू कर दिया। यह एक सरल खेल है। इसका लक्ष्य एक पासा फेंकना है और खेल के मैदान के शुरुआती बिंदु से अंतिम एक तक पहुंचना है, जबकि सांप से बचना और सीढ़ियों का उपयोग करने की कोशिश करना है।

मुझे ऐसा लग रहा था कि यह प्रोजेक्ट HTML और CSS में हो सकता है। हालांकि, मैंने कुछ पर ध्यान नहीं दिया। यह पासा के बारे में है।

पासा के रोल (साथ ही एक सिक्के के रोल) को सार्वभौमिक रूप से यादृच्छिक मूल्यों के "जनरेटर" के रूप में मान्यता प्राप्त है। हर बार, एक हड्डी या एक सिक्का फेंकने पर, हमें कुछ ऐसा मिलता है जो पहले हमारे लिए अज्ञात था।

पासा फेंक नकल

मैं लेबलों के साथ परतों को सुपरइम्पोज़ करने जा रहा था और सीएसएस एनीमेशन का उपयोग करके उन्हें "स्क्रॉल" कर रहा था, शीर्ष परत को बदल रहा था। यह नीचे दिखाए गए कुछ की तरह लग रहा था।


किसी ब्राउज़र में लेयर एनिमेशन का अनुकरण करें

कोड जो यादृच्छिक मान प्राप्त करने के लिए ऐसी प्रणाली को लागू करता है, विशेष रूप से जटिल नहीं है। इसमें विभिन्न देरी का उपयोग करते हुए एनीमेशन का वर्णन शामिल है। यहाँ कोड है:

/*    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; } 

कृपया ध्यान दें कि एनीमेशन को धीमा कर दिया गया था ताकि संबंधित तत्वों के साथ बातचीत करना आसान हो (लेकिन यह एक समस्या पैदा करने के लिए पर्याप्त तेज़ निकला, जो नीचे चर्चा की जाएगी)। यहाँ प्रस्तुत तंत्र की छद्म यादृच्छिक प्रकृति स्पष्ट रूप से दिखाई देती है।

→ यहाँ CodePen पर एक प्रोजेक्ट है जो आपको इस दृष्टिकोण का पता लगाने की अनुमति देता है


पासा फेंक नकल

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

मैंने एनीमेशन समय को बढ़ाने की कोशिश की, जो कि, मुझे ऐसा लग रहा था, स्थिति को थोड़ा सुधार दिया, लेकिन सिस्टम ने अभी भी गलत व्यवहार किया।

यह तब था कि मैंने वही किया जो सभी प्रोग्रामर करते हैं, एक समस्या का सामना करना पड़ता है जो वे खोज इंजन के साथ हल नहीं कर सकते हैं। मैंने StackOverflow पर एक प्रश्न पूछा।

मेरी खुशी के लिए, उन्होंने मुझे सब कुछ समझाया, और समस्या का हल सुझाया।

मेरी समस्या का एक सरलीकृत विवरण निम्नानुसार प्रस्तुत किया जा सकता है: "ब्राउज़र किसी तत्व के click इवेंट को केवल तभी फायर करता है जब mouseup ईवेंट होने पर mouseup इवेंट में सक्रिय होने वाला mouseup सक्रिय रहता है।"

चूंकि तत्व लगातार एक दूसरे को प्रतिस्थापित करते हैं - शीर्ष तत्व जिस पर माउस बटन दबाए जाने पर mouseup घटना होती है mouseup हमेशा एक ही तत्व नहीं होता है जिस पर, बटन mouseup घटना होती है। बटन को दबाए जाने के लिए और उस समय जारी करने के लिए जब एक ही तत्व स्टैक के शीर्ष पर होता है, तो क्लिक को या तो जल्दी से पर्याप्त प्रदर्शन किया जाना चाहिए (इसलिए तत्व में स्टैक के शीर्ष को छोड़ने का समय नहीं है), या धीरे-धीरे (इसलिए तत्व एक शीर्ष पर लौटने का मौका है, एक पूर्ण चक्र बना रहा है)। यही कारण है कि एनिमेशन के समय में वृद्धि ने समस्या का सामना करने की अनुमति दी।

समाधान सक्रिय तत्व की position संपत्ति के लिए static मूल्य का उपयोग करना था, जिसने इसे तत्वों के ढेर से हटा दिया। इसके अलावा, एक छद्म तत्व, जैसे ::before या ::after जिसे एक बहुत बड़ा z-index मान सौंपा गया था, उसकी जगह ले ली। इस दृष्टिकोण के साथ, माउस बटन जारी करते समय सक्रिय तत्व हमेशा स्टैक के शीर्ष पर होगा।

 /*           */ 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; } 

यहां एक परियोजना है जो इस समाधान को लागू करती है और तेज एनीमेशन का उपयोग करती है।

जब मैंने इस परियोजना में बदलाव किया, तो मुझे बस अपनी उपलब्धियों को खेल में जोड़ना था। मुझे यही मिला है।


खेल खत्म

विधि का नुकसान

यहाँ वर्णित यादृच्छिक विधि में स्पष्ट असुविधाएँ हैं:

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

परिणाम

यहां प्रस्तुत विधि, ऊपर वर्णित सीमाओं के बावजूद, शुद्ध सीएसएस पर आधारित है। इसका उपयोग करने के लिए, किसी पूर्वप्रक्रमक या कुछ बाहरी सहायक तंत्र की आवश्यकता नहीं होती है। और उपयोगकर्ता के लिए, इसका उपयोग ऐसा लगता है जैसे कि कार्यक्रम पूरी तरह से यादृच्छिक संख्या का उत्पादन करता है।

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


शुद्ध सीएसएस में खेल "स्टोन, कैंची, पेपर"

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में इस सामग्री में हाइलाइट किए गए विचारों का उपयोग करने की योजना बनाते हैं?