گروهی از جویندگان گنج در اعماق یک هزارتوی باستانی و جادویی قرار گرفته‌اند. این هزارتو یک شیء قدرتمند را در خود پنهان کرده، اما برای رسیدن به آن، باید پیام‌های مخفی که روی دیوارهای سنگی هزارتو حک شده‌اند را رمزگشایی کنند. هر دیوار از کاشی‌های سنگی تشکیل شده که به شکل یک جدول مرتب شده و برخی از این کاشی‌ها حروفی را نمایش می‌دهند که کلماتی را تشکیل می‌دهند.
شکارچیان یک طلسم جادویی دارند که می‌تواند کلمات را برجسته کند، اما تنها زمانی کار می‌کند که کلمات را در جهت‌های خاص جستجو کنند. وظیفه شما این است که به آن‌ها کمک کنید تا دیوارهای هزارتو را رمزگشایی کنند. شما باید تابعی بنویسید که از طریق شبکه‌ای از حروف جستجو کند و تشخیص دهد که آیا کلمه مشخص شده را می‌توان در هر ردیف یا ستون پیدا کرد یا خیر.
اگر بتوانید این معما را حل کنید، شکارچیان را به سمت گنج هدایت کرده و قبل از اینکه هزارتو برای همیشه مهر و موم شود از آن فرار می‌کنید.
ظاهر کلی برنامه به شکل زیر است:
پروژه اولیه
پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.
initial-project.zip
├── index.html
├── styles.css
└── script.js
جزئیات
در این تمرین شما باید موارد مورد نیاز را در فایل script.js پیاده‌سازی کنید.
تابع updateGrid
در این تابع، شما باید جدول کلمات را از ورودی (textarea) طبق تصویر پروژه اولیه دریافت کنید و یک بازی Word Search جدید ایجاد کنید. تضمین می‌شود تعداد حروف موجود در هر سطر با سایر سطرها برابر است.
سپس آن را به‌شکل یک شبکه گرید از حروف در صفحه نمایش دهید. این جدول در قالب یک آرایه دوبعدی از رشته‌ها است که هر سطر و ستون آن یک حرف از جدول کلمات است. همچنین باید تعداد ستون‌های گرید را بر اساس طول هر سطر تنظیم کنید. (مقدار grid-template-columns باید به تعداد حروف موجود در هر سطر تنظیم شود.)
تابع findWord
این تابع مسئول جستجوی کلمات در جدول است. وظیفه‌ی شما این است که کلمه‌ای که کاربر وارد کرده را در جهات مختلف (هم افقی، هم عمودی) جستجو کنید.
- اگر آن کلمه را پیدا کردید، عبارت
Result for "${word}": Foundدر قسمتresultنوشته شده و به حروف پیدا شده در جدول، کلاسhighlightداده می‌شود تا برجسته شوند. - اگر کلمه پیدا نشد، عبارت
Result for "${word}": Not foundدر قسمتresultنوشته می‌شود و هیچ حرفی از جدول برجسته نمی‌شود.
خواسته مسئله
شما باید پروژه را طوری پیاده‌سازی کنید که توابع updateGrid و findWord به درستی عمل کنند. برای این کار، پیشنهاد می‌شود از کلاسی به نام WordSearch استفاده کنید که به مدیریت بهتر جستجوی کلمات در جدول کمک می‌کند.
کلاس WordSearch
- در هنگام ایجاد یک شیء از کلاس
WordSearch، یک شبکه دوبعدی از حروف (یک آرایه دوبعدی) به عنوان ورودی به سازنده داده می‌شود و این جدول به‌عنوان یک خصوصیت در شیء ذخیره می‌شود. - تابع
findهم مسئول جستجوی کلمه وارد شده در جدول است.
نکات
- کلمات می‌توانند در تمام حالات افقی و عمودی (بالا به پایین، پایین به بالا، راست به چپ و چپ به راست) مخفی شده باشند و شما باید تمام حالت‌ها را در نظر بگیرید.
نحوه‌ی ارسال پاسخ
پس از اعمال تغییرات در script.js، فایل‌های پروژه را به صورت یک فایل ZIP با ساختار زیر ارسال نمایید.
[your-zip-file-name].zip
├── index.html
├── styles.css
└── script.js
ارسال پاسخ برای این سؤال