گاهی وسط گشتوگذار در اینترنت، به چیزهایی برمیخوری که انتظارش رو نداری.
نه بازیهای بزرگ یا پروژههای جدی، بلکه تجربههای کوچیک، عجیب و بامزهای که معمولاً از کنجکاوی یه برنامهنویس شروع میشن.
از بازی کردن در نوار آدرس مرورگر گرفته تا favicon یا حتی DevTools. جاهایی که هیچوقت انتظارش رو نداشتیم.
در این پست چند تا از همین پروژههای جالب رو معرفی کردم؛ گاهی ایدههای احمقانه هم میتونن جذاب باشن. 😄
اپیدمیَن (Epidemian) یه برنامهنویس خلاقه که بازی «مار در نوار آدرس مرورگر» رو ساخته. ایدهای که از کنجکاویش دربارهی خط بریل شروع شد. خودش میگه یه روز با خودم فکر کرده بود که نمادهای بریل دقیقاً چطوری کار میکنن؟ هر علامت یعنی یه حرف؟ یه سیلاب؟ یا یه مفهوم خاص؟ تا اینکه فهمید هر کاراکتر بریل در واقع از یه شبکهی ۲ در ۴ نقطه تشکیل شده؛ یعنی ۸ نقطه که هر کدوم میتونن روشن یا خاموش باشن — در نتیجه ۲⁸ یا همون ۲۵۶ حالت مختلف! و نکتهی جالب این بود که یونیکد از همهی این حالتها پشتیبانی میکنه. ایده از همینجا جرقه خورد: از این الگوها میشه برای ساخت شکلهای ساده با متن استفاده کرد… و خب، بازی مار بهترین انتخاب بود.
ساخت این بازی، اونم دقیقاً توی نوار آدرس مرورگر، پر از دردسر بود. مرورگرها به خاطر مسائل امنیتی اجازه نمیدن تابع history.replaceState() خیلی سریع اجرا بشه، و همین باعث میشد بازی کند یا حتی قفل کنه. از اون طرف، مرورگرهایی مثل Firefox و Chrome خودشون فاصلهها رو حذف یا escape میکردن و کل شکل بازی بههم میریخت. اپیدمیَن برای دور زدن این محدودیتها دست به یهسری ترفند عجیب زد، مثلاً از canvas برای اندازهگیری فونت استفاده کرد تا بتونه کاراکترهایی پیدا کنه که دقیقاً همعرض با فضای بریل باشن. او در انجمن Hacker News گفت این روشها «وحشتناک و غیرقابل دفاع» هستن، ولی همین ترکیب خلاقیت و شوخطبعی باعث شد یکی از عجیبترین و بامزهترین پروژههای وب ساخته بشه.
اپیدمیَن میگه این بازی در اصل یک شوخیه، ولی با این حال از گزارش باگها، ایدهها و pull requestها استقبال میکنه.
ایدهی ساخت این بازی بعد از دیدن پروژهی URL Snake به ذهنم رسید.
تجربهی اجرای یک بازی در نوار آدرس مرورگر انقدر غیرمنتظره و جالب بود که خواستم خودم هم امتحانش کنم.
میخواستم ببینم چطور میشه یه بازی رو با حداقل کد و در محدودترین فضا ساخت. در واقع هدفم بیشتر «تجربه کردن» و ساخت یک بازی «احمقانه/بچگانه» بود. 😄
از کاراکترهای بریل برای نمایش دایناسور، موانع بالا و پایین استفاده کردم،
و بهجای requestAnimationFrame با setInterval، حرکت بازی رو در چند فریم در ثانیه شبیهسازی کردم.
با گذر زمان، سرعت بازی بیشتر میشه و واکنشها سریعتر.
این پروژه هم، کاملاً متنباز و بدون لایسنس هست و هر کسی میتونه اون رو فورک، ویرایش یا گسترش بده.
مثلاً بخشهایی مثل سختتر شدن مرحلهها، کنترل دقیقتر پرش یا حتی اضافه کردن مکانیکهای جدید.
این نسخه از بازی ۲۰۴۸ لایق اشاره است. بازی داخل favicon اجرا میشه. همون آیکون کوچیکی که کنار آدرس سایت هست!
هیچ عددی هم در کار نیست، فقط چند تا مربع رنگی روی زمینهٔ سیاه که مثل نسخهٔ اصلی، مربعهای همرنگ با هم ترکیب میشن و رنگ جدیدی میسازن که نشونهٔ عدد بالاتر هست.
با اینکه اندازهاش خیلی ریز بود و چشمم رو اذیت کرد، ولی اصلاً انتظارش رو نداشتم.
این یکی شاید عجیبترینشون باشه. یه نسخه از بازی کلاسیک پینگپنگ که داخل DevTools مرورگر اجرا میشه!
وقتی صفحه رو باز میکنید، هیچ چیزی دیده نمیشه، اما اگه DevTools رو باز کنید و برید به تب Layers، اونجا توپ و راکتها ظاهر میشن.
راستش من دقیق نفهمیدم چطور باید درست بازی کرد. بازی به نظر دو نفره میاد، ولی فقط تونستم با کلیدهای جهتنما یکی از راکتها رو بالا و پایین ببرم. توپ هم بعد از هر بار برخورد به راکت به وسط و بدون زاویه برمیگرده.
به هر حال جالب هست، و برای اولین بار من رو وارد نمای Layers کرد!
همش همین بود. 😎
اگه بازی «غیرمنتظره» و «احمقانه» دیگهای میشناسید، توی کامنتها حتماً اشاره کنید! 🎮
