هل هناك أي أرقام عشوائية في CSS؟

يتيح لك CSS إنشاء تخطيطات وواجهات ديناميكية على الإنترنت ، ولكن كلغة ترميز تكون ثابتة - لا يمكنك تغييرها بعد تحديد القيمة. لم يتم مناقشة فكرة الفرصة. يعد إنشاء رقم عشوائي في وقت التشغيل من أراضي JavaScript ، وليس CSS.

أم لا؟ إذا سمحنا بقليل من تفاعل المستخدم ، فيمكننا في الواقع توليد درجة من العشوائية في CSS. لنلقي نظرة!

العشوائية في لغات أخرى

هناك طرق للحصول على بعض "العشوائية الديناميكية" باستخدام متغيرات CSS ، كما يوضح روبن ريندل في مقال حول حيل CSS . لكن هذه الحلول ليست CSS 100٪ ، لأنها تتطلب جافا سكريبت لتحديث متغير CSS بقيمة عشوائية جديدة.

يمكننا استخدام المعالجات الأولية مثل Sass أو Less لإنشاء قيم عشوائية ، ولكن بمجرد تجميع رمز CSS وتصديره ، يتم إصلاح القيم وفقدان العشوائية.

لماذا أشعر بالقلق إزاء القيم العشوائية في CSS؟

في الماضي ، قمت بتطوير تطبيقات بسيطة CSS فقط ، مثل Quiz ، ولعبة CS Simon ، و Magic Trick ، لكنني أردت أن أفعل شيئًا أكثر تعقيدًا.

* سأترك مناقشة صلاحية أو فائدة أو التطبيق العملي لإنشاء هذه المقتطفات في CSS فقط في وقت لاحق.

استنادًا إلى حقيقة أن بعض ألعاب الطاولة يمكن تمثيلها كآلات حالة (FSM) ، ثم يمكن تمثيلها باستخدام HTML و CSS.

لذلك ، بدأت في تطوير لعبة "Leela" (وهي أيضًا "الأفاعي والسلالم").

هذه هي لعبة بسيطة. باختصار ، الهدف من اللعبة هو تطوير الشريحة من البداية إلى نهاية اللوحة ، وتجنب الثعابين ومحاولة تسلق السلالم.

بدا المشروع ممكنًا ، لكني فاتني شيء ما ، نعم بالتأكيد - النرد!
رمي النرد (في ألعاب أخرى ، رمي العملات المعدنية) هي طرق مقبولة عمومًا للحصول على قيم عشوائية. يمكنك لفة النرد أو إرم عملة معدنية ، وفي كل مرة تحصل على قيمة غير معروفة. كل شيء يبدو بسيطا.

محاكاة لرمية عشوائية من العظام

كنت ذاهب إلى تراكب الطبقات باستخدام العلامات واستخدام الرسوم المتحركة لـ 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; } 

تم إبطاء الرسوم المتحركة لتبسيط التفاعل (ولكن لا تزال سريعة بما يكفي لرؤية العقبة الموضحة أدناه). العشوائية الزائفة هي أيضا أكثر وضوحا.

 <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"; } 

ولكن بعد ذلك صادفت بعض القيود. حصلت على أرقام عشوائية ، لكن في بعض الأحيان ، حتى عندما قمت بالنقر فوق "النرد" ، لم يُرجع الحقل أي قيمة.

حاولت زيادة وقت الرسوم المتحركة ، ويبدو أنه ساعد قليلاً ، لكن لا يزال لدي بعض القيم غير المتوقعة.

عندها فعلت ما يفعله معظم المطورين عندما يجدون عقبات لا يستطيعون حلها - ظهرت لي طلب المساعدة على StackOverflow. أنا أوصي به.

لحسن الحظ بالنسبة لي ، سيكون هناك دائمًا أشخاص على استعداد للمساعدة ، وكان حالتي تيماني عفيف مع شرحه .

إذا حاولت التبسيط ، فكانت المشكلة هي أن المتصفح يطلق حدث النقر فقط عندما يكون العنصر في الحالة النشطة (عند النقر بالماوس) ، وبمعنى آخر ، يكون هو نفس العنصر النشط عند الضغط على زر الماوس.

نظرًا لتغيير الرسوم المتحركة ، فإن الطبقة العليا (التسمية) ، عند النقر فوق الماوس ، في الواقع ، لم تكن تلك الطبقة العليا (التسمية) عندما تم الضغط على الماوس ، إلا إذا فعلت ذلك بالسرعة الكافية ، جيدًا ، أو ببطء ، بحيث تكون الرسوم المتحركة بالفعل تمكنت من الذهاب من خلال جميع قيم الدورة. هذا هو السبب في أن الزيادة في وقت الرسوم المتحركة قد أخفت هذه المشكلة.

كان الحل هو تطبيق الموضع "الثابت" لكسر سياق الرصة ، واستخدام عنصر زائف مثل :: before أو :: after مع مؤشر z أعلى ليحل محله. وبالتالي ، ستكون التسمية النشطة دائمًا في المقدمة عند تحريك الماوس.

 /*   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 Snakes and Ladders .

هذه التقنية لديها بعض العيوب واضحة.

1. مطلوب التفاعل مع المستخدم - من الضروري النقر فوق تسمية لإحداث "توليد أرقام عشوائية".
2. لا تتدرج الطريقة بشكل جيد - إنها تعمل بشكل رائع مع مجموعات صغيرة من القيم ، ولكنها تمثل ألمًا لنطاقات كبيرة.
3. هذا ليس عشوائيًا حقيقيًا ، لكنه لا يزال عشوائيًا عشوائيًا ، ويمكن للكمبيوتر تحديد القيمة التي سيتم إنشاؤها في كل لحظة بسهولة.

ولكن من ناحية أخرى ، فهي CSS 100٪ (ليست هناك حاجة للمعالجات الأولية أو غيرها من المساعدين الخارجيين) ، وبالنسبة للشخص يمكن أن تبدو عشوائية 100 ٪.

ونعم ، يمكن استخدام هذه الطريقة ليس فقط للأرقام العشوائية ، ولكن أيضًا لكل شيء عشوائي. في هذه الحالة ، استخدمناها "عن طريق الخطأ" لاختيار جهاز كمبيوتر في لعبة "مقص الورق الصخري".