بازی حدس عدد: باختن در بازی

Guess The Number Game Using JavaScript: Losing the game

0 170

بازی حدس عدد: باختن در بازی

تا این قسمت از پروژه تمام متغیرهای خودمان را درون app.js تعریف کرده ایم و منطق برد کاربر را نوشته ایم؛ یعنی در صورتی که کاربر عددی را درست حدس بزند حاشیه ی فیلد ما سبز رنگ شده، خود فیلد غیرفعال شده و پیام شما برنده شده اید برایش نمایش داده می شود. با این همه هنوز کدهای باخت کاربر را کدنویسی نکرده ایم. اگر در حال حاضر به مرورگر خود رفته و عددی غیر از 2 را وارد کنید (فعلا 2 را به صورت دستی عدد صحیح انتخاب کرده ایم) هیچ اتفاقی نمی افتد.

در حال حاضر ساختار کد ما برای برد یا باخت به شکل زیر است:

حالا که حدس صحیح را در شرط if چک می کنیم، باید مورد باخت را درون else کد نویسی نماییم. اولین موردی که به این قسمت اضافه می کنیم، کم کردن یک واحد از حدس های باقی مانده است:

کد بالا از ساختار =- استفاده می کند که حالت خلاصه شده ی کد زیر است:

در مرحله ی بعد باید بررسی کنیم که آیا کاربر اجازه ی حدس زدن دارد یا نه؛ به عبارت دیگر آیا حدسی (guessesLeft) باقی مانده است یا خیر؟ ساده ترین روش انجام این کار استفاده از یک شرط if است:

در شرط بالا اگر guessesLeft برابر با صفر بود یعنی کاربر بازی را باخته است. در این حالت، که بسیار شبیه به حالت بردن بازی است، ابتدا فیلد را غیرفعال (disabled) می کنیم. سپس رنگ حاشیه (border) فیلد را قرمز می کنیم و نهایتا با استفاده از تابع setMessage پیام باخت را به همراه عدد صحیح به کاربر نمایش می دهیم. شما می توانید هر پیامی را به جای پیام بالا در تابع setMessage قرار دهید (به سلیقه ی شما بستگی دارد). حالا اگر به مرورگر برویم و عددی غیر از 2 را در فیلد تایپ کرده و سه بار روی Submit کلیک کنیم، حاشیه ی فیلد قرمز شده و پیام خطا نمایش داده می شود بنابراین کدها به طور صحیح کار می کنند.

قسمت else کد بالا مربوط به زمانی است که حدس کاربر اشتباه است اما هنوز تعدادی حدس برایش باقی مانده است. برای این قسمت من از تابع setMessage استفاده میکنم:

همانطور که می بینید در این حالت نیز حاشیه ی فیلد قرمز می شود، سپس محتوای فیلد پاک می شود (با قرار دادن یک رشته ی خالی) تا کاربر حدس های بعدی اش را در آن تایپ کند و نهایتا با استفاده از تابع setMessage به کاربر خبر می دهیم که عدد انتخاب شده توسط او صحیح نبوده و باید دوباره امتحان کند.

در حال حاضر کدهای ما بدون مشکل اجرا می شوند اما سورس کدی که نوشته ایم حالت شلخته ای دارد و مرتبا کدهایمان در سر تا سر فایل تکرار شده اند. راه حل بهتر این است که تمام این کدها را درون یک تابع جمع و جور قرار دهیم تا هر بار کدها را تکرار نکنیم. من نام این تابع را gameOver می گذارم و آن را به شکل زیر تعریف می کنم:

قرار است این تابع دو پارامتر داشته باشد؛ اولی (won) مشخص می کند که آیا برنده شده اند یا خیر؟ دومی نیز مشخص کننده ی پیام نمایش داده شده به کاربر است. برای نوشتن کدهای این تابع باید به سراسر برنامه ی خودمان نگاهی بیندازیم. 3 عملیات اصلی در تمام برنامه دیده می شوند:

  • غیرفعال سازی فیلد
  • دادن رنگ به فیلد (چه قرمز چه سبز)
  • نمایش پیام به کاربر با استفاده از setMessage

پیاده سازی رنگ حاشیه و متن به برد یا باخت کاربر بستگی دارد بنابراین می توانیم از یک شرط if استفاده کنیم تا بر اساس بردن یا باختن کاربر (شرط ما) رنگ خاصی به حاشیه و متن بدهیم اما روش بهتر و خلاصه تر استفاده از اپراتور تِرنِری (ternary operator) است:

در کد بالا یک متغیر به نام color تعریف کرده ایم و مقدار آن را بر اساس بردن یا باختن کاربر تغییر داده ایم.

اگر یادتان باشد شرط زیر را نیز قبلا نوشته بودیم:

شما باید هر سه خط موجود در این شرط if را کات کرده و درون تابع gameOver (البته با کمی تغییر) قرار دهید:

فکر می کنم درک این چند خط کد بسیار ساده است و نیازی به تکرار توضیحات نیست. حالا به همان شرط if بالا می رویم که کدهایش را کات کرده بودیم و تابع gameOver را در آن قسمت صدا می زنیم:

این کار را برای شرط (guessesLeft === 0) نیز انجام می دهیم (کدهای قبلی را حذف و به جای آن ها از تابع gameOver استفاده می کنیم:

اما از این جا به بعد کاربر باید چه کار کند؟ در قسمت بعدی به شما توضیح خواهم داد.

ترتیبی که روکسو برای یادگیری مطالب سری پروژه‌های مدرن جاوا اسکریپت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle