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

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

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

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

// Check if won
if (guess === winningNum) {
    // Disable input
    guessInput.disabled = true;
    // Change border color
    guessInput.style.borderColor = 'green';
    // Set message
    setMessage(`${winningNum} is correct, YOU WIN!`, 'green');

} else {

}

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

// Wrong number
guessesLeft -= 1;

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

guessesLeft = guessesLeft - 1;

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

if (guessesLeft === 0) {
    // Game over - lost
    // Disable input
    guessInput.disabled = true;
    // Change border color
    guessInput.style.borderColor = 'red';
    // Set message
    setMessage(`Game Over, you lost. The correct number was ${winningNum}`);
} else {

}

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

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

if (guessesLeft === 0) {
    // Game over - lost
    // Disable input
    guessInput.disabled = true;
    // Change border color
    guessInput.style.borderColor = 'red';
    // Set message
    setMessage(`Game Over, you lost. The correct number was ${winningNum}`);
} else {
    // Game continues - answer wrong

    // Change border color
    guessInput.style.borderColor = 'red';

    // Clear Input
    guessInput.value = '';

    // Tell user its the wrong number
    setMessage(`${guess} is not correct, ${guessesLeft} guesses left`, 'red');
}

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

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

function gameOver(won, msg) {

}

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

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

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

function gameOver(won, msg) {
    let color;
    won === true ? color = 'green' : color = 'red';
}

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

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

// Check if won
if (guess === winningNum) {
    // Disable input
    guessInput.disabled = true;
    // Change border color
    guessInput.style.borderColor = 'green';
    // Set message
    setMessage(`${winningNum} is correct, YOU WIN!`, 'green');

} else {
        // بقیه ی کدها

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

// Game over
function gameOver(won, msg) {
    let color;
    won === true ? color = 'green' : color = 'red';

    // Disable input
    guessInput.disabled = true;
    // Change border color
    guessInput.style.borderColor = color;
    // Set text color
    message.style.color = color;
    // Set message
    setMessage(msg);
}

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

// Check if won
if (guess === winningNum) {
    // Game over - won
    gameOver(true, `${winningNum} is correct, YOU WIN!`);

} else {
    // بقیه ی کدها

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

gameOver(false, `Game Over, you lost. The correct number was ${winningNum}`);

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