از اون روزی که بکندیوم ساز جادویی آکاردئون را به فرانتیوم هدیه داد، او مدام به این فکر میکرد که چطور میتواند بکندیوم را تحت تأثیر قرار بدهد. متوجه شده بود که بکندیوم به مباحث ساختمان داده علاقه دارد و همچنین میدانست که به بازی هم علاقهمند است. برای همین تصمیم گرفت یک بازی طراحی کند. داشت فکر میکرد که این بازی باید چطور باشد تا واقعا بکندیوم خوشحال شود. این بازی چیزی جز بازی حدس عدد نبود؛ بازیای که جوابش با جستوجوی باینری و در کمترین تعداد حدس ممکن به دست میآید.
حالا فرانتیوم مطمئن بود که بکندیوم قرار است خیلی خوشحال شود.
پروژه اولیه
برای دانلود پروژهی اولیه روی این لینک کلیک کنید.
ساختار فایلها
game/
├─ fonts
├─ index.html
├─ index.js
└─ styles.css
جزئیات پروژه
در گیف زیر میتوانید یک دور از بازی را مشاهده کنید
در این سوال، شما قرار است بازی جذاب حدس عدد با استفاده از الگوریتم جستجوی باینری را پیادهسازی کنید. در ادامه، ابتدا با معرفی بازی و قوانین آن آشنا خواهید شد.
معرفی بازی
شرح فرایند بازی
امتیاز و بالاترین امتیاز
نتیجهی بازی بر اساس امتیاز اولیهای که در ابتدای بازی محاسبه میشود، تعیین خواهد شد.
ابتدا اندازهی بازه را با فرمول زیر محاسبه میکنیم:
\[ \text{rangeSize} = (\text{to} - \text{from}) + 1 \]
در این فرمول:
-
عدد انتهایی بازه را to در نظر گرفتیم.
-
عدد ابتدایی بازه را from در نظر گرفتیم.
-
افزودن عدد 1 به این اختلاف باعث میشود که بازه شامل هر دو عدد انتهایی نیز باشد. به عنوان مثال، اگر بازه از 1 تا 5 باشد، تعداد اعداد داخل بازه 5 است (نه 4).
سپس برای تعیین تعداد حداکثر تعداد حدسهای منطقی از مفهوم جستجوی دودویی (Binary Search) استفاده میکنیم:
\[ \text{maxGuesses} = \begin{cases} 1, & \text{if } \text{rangeSize} \le 1 \\ \lfloor \log_2(\text{rangeSize}) \rfloor + 1, & \text{otherwise} \end{cases} \]
توضیح:
-
لگاریتم در پایهی ۲ به ما میگوید که برای یافتن عدد مورد نظر در یک بازه، با روش جستجوی دودویی چند مرحله نیاز است.
-
از آنجا که تعداد مراحل باید عددی صحیح باشد، از کف لگاریتم (floor) استفاده میکنیم.
-
در نهایت یک واحد به آن اضافه میکنیم تا حالت ابتدایی بازی نیز در محاسبه لحاظ شود.
برای مثال، اگر بازهی اعداد از ۱ تا ۱۰۰ باشد:
\[ \log_2(100) \approx 6.64 \]
بنابراین:
\[ \lfloor 6.64 \rfloor + 1 = 7 \]
یعنی بازیکن حداکثر با ۷ حدس میتواند عدد صحیح را پیدا کند.
شرط برد و باخت بازیکن
بالاترین امتیاز
تمامی تگها و اجزایی که باید از آنها استفاده کرده و با DOM تعامل داشته باشید، در اینجا قابل مشاهده هستند.
تگها و اجزای بازی
نکتهی بسیار مهم در این سوال، کنترل و نمایش پیامهای مختلف به کاربر است. با مشاهدهی جعبههای راهنما که در پایین قرار دارند، میتوانید عملکرد برنامه را درک کنید.
معرفی تابع showToast
پیامهای عمومی
- در صورت وارد نکردن اعداد بازه یا غیرمنطقی بودن اعداد وارد شده متنی که باید نمایش داده بشود به شکل زیر است :
لطفا بازهی اعداد را به درستی در ورودیها وارد بکنید.
- در صورت شروع بازی متنی که باید نمایش داده بشود به شکل زیر است :
بازی شروع شد
- در صورت وارد کردن چیزی به جز عدد در ورودی مخصوص حدس شما:
لطفاً یک عدد معتبر حدس بزن.
پیامی که در صورت برد نمایش داده میشود
زمانی که بازیکن برنده میشود:
بازی را بردید، برای بازی مجدد روی دکمهی بازی مجدد کلیک بکنید
پیامی که در صورت باخت نمایش داده میشود
زمانی که بازیکن میبازد :
بازی را باختید، برای بازی مجدد روی دکمهی بازی مجدد کلیک بکنید.
در گیف زیر پیامها را میتوانید پیامها را مشاهده کنید
کنترل وضعیت گزارشها (report ها)
-
حدس در حال انجام بازی:
اگر عدد حدس زده شده بیشتر از عدد رندوم باشد:- متن باکس راهنما به
تغییر میکند.عدد حدس زده شده بزرگ است
اگر عدد حدس زده شده کمتر از عدد رندوم باشد:
- متن باکس راهنما به
تغییر میکند.عدد حدس زده شده کوچک است
- متن باکس راهنما به
نکات
-
دقت کنید که متنهای راهنما و مربوط به toast بسیار دقیق نوشته بشوند.
-
در گیف زیر میتوانید روند بازی که به باخت منتهی میشود را مشاهده بکنید:
- در گیف زیر میتوانید روند بازی که به برد منتهی میشود را مشاهده بکنید:
آنچه باید آپلود کنید
-
توجه: پس از پیادهسازی موارد خواسته شده، فایل
index.jsرا برای سیستم داوری ارسال کنید. -
توجه: شما مجاز به افزودن فایل جدیدی در این ساختار نیستید و تنها باید تغییرات را در فایل
index.jsاعمال کنید.