از اون روزی که بکندیوم ساز جادویی آکاردئون را به فرانتیوم هدیه داد، او مدام به این فکر می‌کرد که چطور می‌تواند بکندیوم را تحت تأثیر قرار بدهد. متوجه شده بود که بکندیوم به مباحث ساختمان داده علاقه دارد و همچنین می‌دانست که به بازی هم علاقه‌مند است. برای همین تصمیم گرفت یک بازی طراحی کند. داشت فکر می‌کرد که این بازی باید چطور باشد تا واقعا بکندیوم خوشحال شود. این بازی چیزی جز **بازی حدس عدد** نبود؛ بازی‌ای که جوابش با جست‌وجوی باینری و در کمترین تعداد حدس ممکن به دست می‌آید. حالا فرانتیوم مطمئن بود که بکندیوم قرار است خیلی خوشحال شود.  # **پروژه اولیه** برای دانلود **پروژه‌ی اولیه** روی [این لینک](/contest/assignments/84122/download_problem_initial_project/307254/) کلیک کنید. <details class="red"> <summary>**ساختار فایل‌ها**</summary> ```plaintext game/ ├─ fonts ├─ index.html ├─ <mark class="orange" title="این فایل را تکمیل کنید">index.js</mark> └─ styles.css ``` </details> # **جزئیات پروژه** در گیف زیر می‌توانید یک دور از بازی را مشاهده کنید  در این سوال، شما قرار است بازی جذاب **حدس عدد با استفاده از الگوریتم جستجوی باینری** را پیاده‌سازی کنید. در ادامه، ابتدا با معرفی بازی و قوانین آن آشنا خواهید شد. <details class="purple"> <summary>**معرفی بازی**</summary>  </details> <details class="purple"> <summary>**شرح فرایند بازی**</summary>  <details class="yellow"> <summary>**امتیاز و بالاترین امتیاز**</summary> > نتیجه‌ی بازی بر اساس **امتیاز اولیه‌ای** که در ابتدای بازی محاسبه می‌شود، تعیین خواهد شد. ابتدا اندازه‌ی بازه را با فرمول زیر محاسبه می‌کنیم: $$ \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} $$ توضیح: 1. لگاریتم در پایه‌ی ۲ به ما می‌گوید که برای یافتن عدد مورد نظر در یک بازه، با روش جستجوی دودویی چند مرحله نیاز است. 2. از آنجا که تعداد مراحل باید عددی صحیح باشد، از **کف لگاریتم** (floor) استفاده می‌کنیم. 3. در نهایت یک واحد به آن اضافه می‌کنیم تا حالت ابتدایی بازی نیز در محاسبه لحاظ شود. برای مثال، اگر بازه‌ی اعداد از ۱ تا ۱۰۰ باشد: $$ \log_2(100) \approx 6.64 $$ بنابراین: $$ \lfloor 6.64 \rfloor + 1 = 7 $$ یعنی بازیکن حداکثر با **۷ حدس** می‌تواند عدد صحیح را پیدا کند. <details class="purple"> <summary>**شرط برد و باخت بازیکن**</summary>  </details> <details class="purple"> <summary>**بالاترین امتیاز**</summary>  </details> </details> </details> تمامی تگ‌ها و اجزایی که باید از آن‌ها استفاده کرده و با **DOM** تعامل داشته باشید، در اینجا قابل مشاهده هستند. <details class="green"> <summary>**تگ‌ها و اجزای بازی**</summary>  </details> نکته‌ی بسیار مهم در این سوال، کنترل و نمایش پیام‌های مختلف به کاربر است. با مشاهده‌ی جعبه‌های راهنما که در پایین قرار دارند، می‌توانید عملکرد برنامه را درک کنید. <details class="orange"> <summary>**معرفی تابع showToast**</summary>  <details class="purple"> <summary>**پیام‌های عمومی**</summary> + در صورت وارد نکردن اعداد بازه یا غیرمنطقی بودن اعداد وارد شده متنی که باید نمایش داده بشود به شکل زیر است : ```plaintext لطفا بازه‌ی اعداد را به درستی در ورودی‌ها وارد بکنید. ``` + در صورت شروع بازی متنی که باید نمایش داده بشود به شکل زیر است : ```plaintext بازی شروع شد ``` + در صورت وارد کردن چیزی به جز عدد در ورودی مخصوص **حدس شما**: ```plaintext لطفاً یک عدد معتبر حدس بزن. ``` </details> <details class="green"> <summary>**پیامی که در صورت برد نمایش داده می‌شود**</summary> زمانی که بازیکن برنده می‌شود: ```plaintext بازی را بردید، برای بازی مجدد روی دکمه‌ی بازی مجدد کلیک بکنید ``` </details> <details class="purple"> <summary>**پیامی که در صورت باخت نمایش داده می‌شود**</summary> زمانی که بازیکن می‌بازد : ```plaintext بازی را باختید، برای بازی مجدد روی دکمه‌ی بازی مجدد کلیک بکنید. ``` </details> در گیف زیر پیام‌ها را می‌توانید پیام‌ها را مشاهده کنید  </details> <details class="orange"> <summary>**کنترل وضعیت گزارش‌ها (report ها)**</summary>  - **حدس در حال انجام بازی:** اگر عدد حدس زده شده بیشتر از عدد رندوم باشد: - متن باکس راهنما به ```plaintext عدد حدس زده شده بزرگ است ``` تغییر می‌کند. اگر عدد حدس زده شده کمتر از عدد رندوم باشد: - متن باکس راهنما به ```plaintext عدد حدس زده شده کوچک است ``` تغییر می‌کند. </details> ## نکات + دقت کنید که متن‌های راهنما و مربوط به **toast** بسیار دقیق نوشته بشوند. + در گیف زیر می‌توانید روند بازی که به باخت منتهی می‌شود را مشاهده بکنید:  + در گیف زیر می‌توانید روند بازی که به برد منتهی می‌شود را مشاهده بکنید:  # **آن‌چه باید آپلود کنید** + **توجه**: پس از پیاده‌سازی موارد خواسته شده، **فایل** `index.js` را برای سیستم داوری ارسال کنید. + **توجه**: شما مجاز به افزودن فایل جدیدی در این ساختار **نیستید** و تنها باید تغییرات را در **فایل‌** `index.js` اعمال کنید.