بازی ماجراجویی حبابی در جزیره
مرتبسازی حبابی (bubble sort) را بلدی؟ این بازی همان را به تو یاد میدهد. چند جزیره روی صفحه میبینی که ترتیبشان به هم ریخته است.
کارت این است که چیدمان اولیه را برگردانی. تنها ابزارت یک حرکت ساده است. روی یک جزیره ضربه بزنی، جایش با جزیرهی بالایی عوض میشود. پس خودت نقش الگوریتم را بازی میکنی. 🏝️
حالا خودت بازی کن
روی جزیرهها ضربه بزن و چیدمان اولیه را برگردان. هر جزیره فقط با جزیرهی بالاییاش جا عوض میکند. روی کامپیوتر هم با کلیدهای جهتدار بین جزیرهها حرکت میکنی و با Enter جابهجایشان میکنی.
ترتیب درست را گم کردی؟ دکمهی «هدف» را بزن. یک نقشهی کوچک باز میشود و چیدمان هدف را نشانت میدهد. 🏝️
آفرین! دیدی یک ایدهی آموزشی چطور به بازی تبدیل میشود. 🌟
مرتبسازی حبابی
این الگوریتم هر بار دو چیز کنار هم را مقایسه میکند. اگر ترتیبشان درست نباشد، جایشان را عوض میکند. این کار را آنقدر تکرار میکند تا همهچیز سر جایش بنشیند.
جالب اینجاست که عنصرهای بزرگتر کمکم بالا میآیند، مثل حباب توی آب. در این بازی تو همین کار را دستی انجام میدهی. هر ضربه یک جابهجایی است و بازی تعدادشان را میشمارد. سریعترین روش دنیا نیست. ولی چون ساده است، بهترین نقطهی شروع برای یادگیری است. 🫗
پشت صحنهی بازی
منطق بازی را جاوااسکریپت اداره میکند. با هر ضربه، برنامه جای دو جزیره را عوض میکند. بعد چیدمان تازه را با چیدمان هدف میسنجد. انیمیشن جابهجایی اما کار CSS است. جزیرهها به جای پرش ناگهانی، نرم به جای تازهشان سُر میخورند.
آن ظاهر پیکسلی دیالوگها را دیدی؟ از nes.css میآید، کتابخانهای که صفحه را شبیه کنسولهای قدیمی نشان میدهد. دکمهی «هدف» هم همان چیدمان درست را روی یک نقشهی کوچک میکشد. 🎮
خودت را بسنج
حالا ببین قانون اصلی این بازی را خوب گرفتهای یا نه. یک سوال کوتاه در انتظارت است.
در بازی ماجراجویی حبابی، وقتی روی یک جزیره ضربه میزنی چه اتفاقی میافتد؟
هر ضربه فقط یک کار میکند: جای آن جزیره را با جزیرهی بالاییاش عوض میکند. همین یک حرکت، تنها ابزار توست.
این دقیقاً همان کاری است که مرتبسازی حبابی انجام میدهد. الگوریتم هم دو عنصر کنار هم را مقایسه میکند و در صورت نیاز جایشان را عوض میکند. اینجا تو خودت نقش الگوریتم را بازی میکنی.
هیچ چیز خودکار مرتب نمیشود و هیچ جزیرهای حذف یا اضافه نمیشود. اگر چیدمان هدف را گم کردی، دکمهی «هدف» یک نقشهی کوچک باز میکند و ترتیب درست را نشانت میدهد.