32- آموزش جاوااسکریپت | پروژه عملی: ساخت بازی حدس عدد (Number Guesser)

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

۱. راه‌اندازی رابط کاربری (HTML & Skeleton)

برای رابط کاربری از فریم‌ورک بسیار سبک Skeleton استفاده می‌کنیم. تمرکز اصلی ما بر سادگی است.

<div class="container">
    <h1>Number Guesser</h1>
    <div id="game">
        <p>Guess a number between <span class="min-num">1</span> and <span class="max-num">10</span></p>
        
        <input type="number" id="guess-input" placeholder="Enter your guess...">
        <input type="submit" value="Submit" id="guess-btn">
        
        <p class="message"></p>
    </div>
</div>

۲. تنظیم متغیرهای بازی

ابتدا متغیرهای اصلی بازی و المان‌های UI را در فایل app.js تعریف می‌کنیم.

// متغیرهای بازی
let min = 1,
    max = 10,
    winningNum = getRandomNum(min, max),
    guessesLeft = 3;

// المان‌های UI
const game = document.getElementById('game'),
      minNum = document.querySelector('.min-num'),
      maxNum = document.querySelector('.max-num'),
      guessInput = document.getElementById('guess-input'),
      guessBtn = document.getElementById('guess-btn'),
      message = document.querySelector('.message');

// نمایش محدوده در UI
minNum.textContent = min;
maxNum.textContent = max;

۳. منطق اصلی بازی (Event Listeners)

در این بخش، رویداد کلیک دکمه «Submit» را مدیریت کرده و ورودی کاربر را اعتبارسنجی می‌کنیم.

guessBtn.addEventListener('click', function(){
    let guess = parseInt(guessInput.value);

    // اعتبارسنجی
    if(isNaN(guess) || guess < min || guess > max){
        setMessage(`Please enter a number between ${min} and ${max}`, 'red');
        return;
    }

    // بررسی برنده
    if(guess === winningNum){
        gameOver(true, `${winningNum} is correct! You win!`);
    } else {
        guessesLeft -= 1;
        if(guessesLeft === 0){
            gameOver(false, `Game Over, you lost. The correct number was ${winningNum}`);
        } else {
            // ادامه بازی
            guessInput.style.borderColor = 'red';
            guessInput.value = '';
            setMessage(`${guess} is not correct, ${guessesLeft} guesses left`, 'red');
        }
    }
});

۴. توابع کمکی (Helper Functions)

برای بهینه‌سازی کد، توابع gameOver و setMessage را ایجاد می‌کنیم تا از تکرار کد جلوگیری شود.

// نمایش پیام
function setMessage(msg, color){
    message.style.color = color;
    message.textContent = msg;
}

// پایان بازی
function gameOver(won, msg){
    let color = won ? 'green' : 'red';
    guessInput.disabled = true;
    guessInput.style.borderColor = color;
    setMessage(msg, color);

    // تغییر دکمه به "Play Again"
    guessBtn.value = 'Play Again';
    guessBtn.className += 'play-again';
}

// تولید عدد تصادفی
function getRandomNum(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

۵. مدیریت شروع مجدد (Event Delegation)

از آنجا که دکمه "Play Again" پس از بارگذاری صفحه ایجاد می‌شود، باید از Event Delegation استفاده کنیم تا رویداد کلیک را روی والد (game) بشنویم.

game.addEventListener('mousedown', function(e){
    if(e.target.className === 'play-again'){
        window.location.reload();
    }
});

این پروژه، پایه‌ای عالی برای درک چرخه‌حیات یک اپلیکیشن کوچک و تعامل بین منطق برنامه‌نویسی و رابط کاربری است.