بازی سنگ کاغذ قیچی
سنگ کاغذ قیچی را همه بلدند، ولی این نسخه یک نکتهی عجیب دارد. منطق این بازی هیچ جاوااسکریپتی ندارد و همهچیز فقط با HTML و CSS کار میکند.
سه آیکون جلوی چشمت پشت سر هم میچرخند. هر وقت خواستی، روی یکی ضربه بزن و نتیجه را ببین. ✊
حالا خودت بازی کن
آیکونها مدام میچرخند. لحظهی درست را پیدا کن و یکی را انتخاب کن.
روی گوشی کافی است روی گزینه ضربه بزنی. روی کامپیوتر کلیدهای ۱ و ۲ و ۳ کار میکنند. با کلیدهای جهتدار هم انتخاب میکنی و با Enter تأیید. 🎮
عالی بود! دیدی CSS بهتنهایی هم میتواند یک بازی کامل بسازد. 🌟
بازی بدون جاوااسکریپت
پشت هر آیکون یک دکمهی رادیویی (radio input) پنهان است. دکمهی رادیویی یعنی از چند گزینه فقط یکی انتخاب میشود. پس وقتی روی یک آیکون ضربه میزنی، در واقع همان دکمهی پنهان را فعال میکنی.
حالا CSS با انتخابگر :checked میفهمد کدام دکمه فعال شده. بعد بر همان اساس، نتیجهی درست را نشان میدهد و بقیه را پنهان میکند. یعنی هیچ خط کدی نتیجه را حساب نمیکند. همهی حالتها از قبل روی صفحهاند و CSS فقط یکی را رو میکند. ✨
دستها را CSS میکشد
هیچ عکسی برای دستها وجود ندارد. سنگ و کاغذ و قیچی را CSS با شکلهای ساده میسازد. چند مربع و دایره کنار هم مینشینند. با گوشههای گرد و کمی چرخش، شکل یک دست درمیآید.
چرخش سه آیکون هم کار یک انیمیشن CSS است. با کیفریم (keyframes) مشخص میکنی در هر لحظه کدام آیکون جلو باشد. بقیهی حرکت را مرورگر خودش میسازد. برای همین چرخش نرم است و هیچ تأخیری ندارد. 🎨
خودت را بسنج
حالا ببین راز این بازی را گرفتهای یا نه. یک سوال کوتاه در انتظارت است.
منطق بازی سنگ کاغذ قیچی با چه چیزی کار میکند؟
نکتهی خاص این بازی همین است: منطقش یک خط جاوااسکریپت هم ندارد.
پشت هر آیکون یک دکمهی رادیویی پنهان است. وقتی ضربه میزنی، همان دکمه فعال میشود. CSS با انتخابگر :checked میفهمد کدام گزینه را زدهای و نتیجهی مربوط به آن را نشان میدهد.
همهی حالتهای ممکن از قبل روی صفحهاند و CSS فقط یکی را رو میکند و بقیه را پنهان نگه میدارد. حتی دستها هم عکس نیستند و CSS آنها را با شکلهای ساده میکشد.