گروهی از جویندگان گنج در اعماق یک هزارتوی باستانی و جادویی قرار گرفته‌اند. این هزارتو یک شیء قدرتمند را در خود پنهان کرده، اما برای رسیدن به آن، باید پیام‌های مخفی که روی دیوارهای سنگی هزارتو حک شده‌اند را رمزگشایی کنند. هر دیوار از کاشی‌های سنگی تشکیل شده که به شکل یک جدول مرتب شده و برخی از این کاشی‌ها حروفی را نمایش می‌دهند که کلماتی را تشکیل می‌دهند.

شکارچیان یک طلسم جادویی دارند که می‌تواند کلمات را برجسته کند، اما تنها زمانی کار می‌کند که کلمات را در جهت‌های خاص جستجو کنند. وظیفه شما این است که به آن‌ها کمک کنید تا دیوارهای هزارتو را رمزگشایی کنند. شما باید تابعی بنویسید که از طریق شبکه‌ای از حروف جستجو کند و تشخیص دهد که آیا کلمه مشخص شده را می‌توان در هر ردیف یا ستون پیدا کرد یا خیر.

اگر بتوانید این معما را حل کنید، شکارچیان را به سمت گنج هدایت کرده و قبل از اینکه هزارتو برای همیشه مهر و موم شود از آن فرار می‌کنید.

ظاهر کلی برنامه به شکل زیر است:

خروجی

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

initial-project.zip
├── index.html
├── styles.css
└── script.js
Plain text

جزئیات

در این تمرین شما باید موارد مورد نیاز را در فایل 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
Plain text

ارسال پاسخ برای این سؤال
فایلی انتخاب نشده است.