Dərs 10 Başlanğıc səviyyə

Praktik layihə: Rəqəm təxmin oyunu

Öyrəndiyiniz bütün mövzuları birləşdirərək interaktiv oyun yaradın

Nələri öyrənəcəksiniz

  • Öyrəndiyiniz bütün mövzuları real layihədə tətbiq edəcəksiniz
  • Funksiyaların, dövrlərın və şərt operatorlarının birlikdə necə işlədiyini görəcəksiniz
  • İstifadəçi girişi və validasiyası ilə işləməyi öyrənəcəksiniz
  • Tam funksional JavaScript oyunu yaratmağı öyrənəcəksiniz

01 Layihəyə baxış

Bu dərsdə biz başlanğıc bölməsində öyrəndiyiniz bütün mövzuları birləşdirərək rəqəm təxmin oyunu yaradacağıq. Bu oyun istifadəçinin 1 ilə 100 arasında təsadüfi seçilmiş rəqəmi 10 cəhddə tapması lazım olan klassik oyundur.

Oyun qaydaları

  1. Proqram 1 ilə 100 arasında təsadüfi rəqəm seçir
  2. İstifadəçinin təxmin etmək üçün 10 cəhdi var
  3. Hər təxmindən sonra, proqram istifadəçiyə rəqəmin çox yüksək və ya çox aşağı olduğunu bildirir
  4. Oyun istifadəçi düzgün rəqəmi tapanda və ya 10 cəhd istifadə edəndə bitir

Əhatə olunan mövzular

Bu oyun başlanğıc bölməsindən bütün əsas mövzuları istifadə edir:

  • Dəyişənlər - Oyun vəziyyətini saxlamaq üçün
  • Boolean məlumat növü - Oyun bitib-bitməməsini yoxlamaq üçün
  • İfadələr - Rəqəmləri hesablamaq və çevirmək üçün
  • Boolean məntiq - Girişi yoxlamaq və oyun məntiqini idarə etmək üçün
  • Şərt operatorları - Təxminlərə əsasən oyunun gedişatına qərar vermək üçün
  • Dövrlər - Oyun bitənə qədər təkrarlamaq üçün
  • Funksiyalar - Oyun kodunu təşkil etmək üçün
  • Daxili funksiyalar - Təsadüfi rəqəmlər, giriş və çıxış üçün
QeydBu oyun prompt() və alert() funksiyalarından istifadə edir. Bunlar brauzerlər tərəfindən təmin edilən API-lərdir və əsas JavaScript dilinin özünə aid deyil. Bu və diğər APİ-lər haqqında daha ətraflı növbəti dərslərdə öyrənəcəyik.

02 Oyun kodu

Gəlin tam oyun koduna baxaq. Narahat olmayın - biz hər hissəni addım-addım izah edəcəyik:

javascript
// MÖVZU 8: Funksiyalar və obyektlər
// Oyunu rahat başlamaq üçün onun kodunu funksiya içinə yazırıq
function startConsoleGame() {

    // MÖVZU 9: JavaScript-də daxili funksiyalar və obyektlər
    // Təsadüfi rəqəm 1-100
    const targetNumber = Math.floor(Math.random() * 100) + 1;

    // MÖVZU 2: Dəyişənlər
    let attempts = 0;
    const maxAttempts = 10;
    let isWinner = false; // MÖVZU 3: Boolean növü

    // MÖVZU 9: Console-a mesaj çıxarırıq
    console.log("--- OYUN BAŞLADI ---");
    console.log(`Mən 1 ilə 100 arasında rəqəm seçdim. Sizin ${maxAttempts} cəhdiniz var.`);

    // MÖVZU 7: Əsas İterasiya
    while (attempts < maxAttempts && !isWinner) {

        let input = prompt(`Cəhd ${attempts + 1}/${maxAttempts}. Təxmininizi daxil edin:`);

        // MÖVZU 6: JavaScript-də idarəetmə axını (Ləğv etməni idarə etmək)
        if (input === null) {
            console.log("Oyun istifadəçi tərəfindən ləğv edildi.");
            return; // Funksiyadan çıx
        }

        // MÖVZU 4: İfadələr (String-dən rəqəmə)
        let guess = Number(input);

        // MÖVZU 5: Boolean məntiq (Validasiya)
        // NaN - rəqəm DEYİL
        if (Number.isNaN(guess)) {
            alert("Bu rəqəm deyil! Yenidən cəhd edin.");
            continue; // Növbəti dövr iterasiyasına keç
        }

        attempts++; // Riyazi operator

        // MÖVZU 6: JavaScript-də idarəetmə axını (Oyun məntiqı)
        if (guess === targetNumber) {
            isWinner = true;
            alert(`🎉 Düzgün! Rəqəm ${targetNumber}idi.`);
            console.log(`QALİB: Rəqəm ${targetNumber} ${attempts} cəhddə tapıldı.`);
        } else if (guess > targetNumber) {
            alert("Çox yüksək! 📉");
            console.log(`Təxmin ${guess} çox yüksək idi.`);
        } else {
            alert("Çox aşağı! 📈");
            console.log(`Təxmin ${guess} çox aşağı idi.`);
        }
    }

    if (!isWinner) {
        alert(`💀 Oyun bitdi! Rəqəm ${targetNumber}idi.`);
        console.log("OYUN BİTDİ.");
    }
}

// Oyunu dərhal başlat
startConsoleGame();

Bu kod ilk baxışda çox görünə bilər, amma narahat olmayın! Biz hər hissəni növbəti bölmələrdə addım-addım izah edəcəyik.

03 Addım 1: Funksiya strukturu

Oyun funksiya ilə başlayır. Bu bizə oyun kodunu təşkil etməyə və istənilən vaxt çağırmağa imkan verir.

javascript
function startConsoleGame() {
    // Oyun kodu buraya gələcək
}

İzahat

  • Funksiyalar (Dərs 8) - Biz bütün oyun kodunu startConsoleGame() funksiyasına sarıyırıq. Bu kodu təşkil edir və təkrar istifadə etməyi asanlaşdırır.
  • Funksiyanın adı təsvir edicidir - o, konsol əsaslı oyun başlatdığını deyir
  • Funksiyanın istifadəsi kodu təşkil edir və oyunu istənilən vaxt yenidən işə salma imkanı verir

04 Addım 2: Oyun dəyişənlərini təyin etmək

Sonra oyun vəziyyətini izləmək üçün lazım olan bütün dəyişənləri təyin edirik.

javascript
// Təsadüfi rəqəm 1-100
const targetNumber = Math.floor(Math.random() * 100) + 1;

// JavaScript-də dəyişənlər
let attempts = 0;
const maxAttempts = 10;
let isWinner = false;

Dəyişən izahatı

  • targetNumber - Math.random() və Math.floor() ilə 1-100 arası təsadüfi rəqəm yaradırıq. const istifadə edirik çünki bu rəqəm oyun boyunca dəyişməyəcək.
  • attempts - İstifadəçinin neçə təxmin etdiyini izləyir. 0-dan başlayır və hər təxmində artır.
  • maxAttempts - İstifadəçinin neçə cəhdi var. const istifadə edirik çünki bu sabit qalır.
  • isWinner - Boolean dəyişən (Dərs 3) istifadəçinin qalib gəlib-gəlmədiyini izləyir. false ilə başlayır.

Daxili funksiyalar (Dərs 9)

  • Math.random() - 0 ilə 1 arasında təsadüfi onluq rəqəm qaytarır
  • * 100 - 0-100 arasında rəqəm almaq üçün
  • Math.floor() - Aşağıya yuvarlaqlaşdırır (4.7 → 4)
  • + 1 - 1-100 əldə etmək üçün (çünki Math.random() heç vaxt 1-ə çatmır)

05 Addım 3: Oyuna başlamaq

İstifadəçiyə oyun başladığını bildiririk və təlimatları veririk.

javascript
console.log("--- OYUN BAŞLADI ---");
console.log(`Mən 1 ilə 100 arasında rəqəm seçdim. Sizin ${maxAttempts} cəhdiniz var.`);

İzahat

  • console.log() (Dərs 9) istifadə edərək brauzer konsoluna mesaj çıxarırıq
  • Template literal (Dərs 2) istifadə edərək maxAttempts dəyişənini mesaja daxil edirik
  • Bu istifadəçiyə oyunun necə işlədiyini başa düşməyə kömək edir

06 Addım 4: Əsas oyun dövrü

while dövrü oyunun əsasıdır. O, oyun bitənə qədər davam edir.

javascript
while (attempts < maxAttempts && !isWinner) {
    let input = prompt(`Cəhd ${attempts + 1}/${maxAttempts}. Təxmininizi daxil edin:`);

    // Validasiya və oyun məntiqı buraya gələcək
}

Dövr şərti

Dövr (Dərs 7) iki şərt doğru olduqda davam edir:

  • attempts < maxAttempts - İstifadəçinin hələ cəhdləri var
  • !isWinner - İstifadəçi hələ qazanmayıb (! 'deyil' deməkdir)

AND operatoru (&&) (Dərs 5) hər iki şərtin doğru olmasını tələb edir

İstifadəçidən giriş almaq

  • prompt() brauzerdə giriş qutusu göstərir
  • Template literal istifadə edərək hansı cəhddə olduqlarını göstəririk
  • İstifadəçinin daxil etdiyi string qaytarır və ya ləğv edilirsə null

07 Addım 5: Girişi yoxlamaq

İstifadəçi girişini emal etməzdən əvvəl, onu yoxlamalıyıq.

javascript
// Ləğv etməni idarə etmək
if (input === null) {
    console.log("Oyun istifadəçi tərəfindən ləğv edildi.");
    return;
}

// İfadələr (String-dən rəqəmə)
let guess = Number(input);

// Boolean məntiq (Validasiya)
if (Number.isNaN(guess)) {
    alert("Bu rəqəm deyil! Yenidən cəhd edin.");
    continue;
}

Ləğv etməni yoxlamaq

  • İstifadəçi prompt-da Cancel düyməsini basarsa, input null olar
  • Strict bərabərlik (===) (Dərs 6) istifadə edirik
  • return funksiyadan dərhal çıxır və oyunu bitirir

String-dən rəqəmə çevrilmə

  • prompt() həmişə string qaytarır, buna görə onu rəqəmə çevirməliyik
  • Number() (Dərs 9) string-i rəqəmə çevirir
  • Bu ifadə (Dərs 4) - bir dəyəri digərinə çeviririk

Rəqəm validasiyası

  • Number.isNaN() dəyərin rəqəm olub-olmadığını yoxlayır
  • alert() (brauzerin özəl API-si) istifadəçiyə xəbərdarlıq göstərir
  • continue ifadəsi növbəti dövr iterasiyasına keçir və aşağıdakı kodu atlayır

08 Addım 6: Oyun məntiqini emal etmək

İndi keçərli rəqəm əldə etdikdən sonra, onu hədəf rəqəmlə müqayisə edirik.

javascript
attempts++; // Riyazi operator

if (guess === targetNumber) {
    isWinner = true;
    alert(`🎉 Düzgün! Rəqəm ${targetNumber}idi.`);
    console.log(`QALİB: Rəqəm ${targetNumber} ${attempts} cəhddə tapıldı.`);
} else if (guess > targetNumber) {
    alert("Çox yüksək! 📉");
    console.log(`Təxmin ${guess} çox yüksək idi.`);
} else {
    alert("Çox aşağı! 📈");
    console.log(`Təxmin ${guess} çox aşağı idi.`);
}

Cəhdləri artırmaq

attempts++ (Dərs 4) - İnkrement operatoru cəhd sayını 1 artırır

Şərtli məntiq (Dərs 6)

if...else if...else zənciri istifadə edərək üç halı yoxlayırıq:

  • guess === targetNumber - Düzgün təxmin! İstifadəçi qazandı
  • guess > targetNumber - Təxmin çox yüksəkdir
  • else - Təxmin çox aşağıdır (yeganə qalan variant)

İstifadəçi qazandıqda, isWinner-i true edirik ki, dövr dayanacaq

İstifadəçiyə rəy vermək

  • alert() istifadəçiyə dərhal rəy verir
  • console.log() hər təxmini saxlayırıq ki, istifadəçi tarixçəyə baxa bilsin

09 Addım 7: Oyunu bitirmək

Dövr bitdikdən sonra, istifadəçinin qazanıb-qazanmadığını yoxlamalıyıq.

javascript
if (!isWinner) {
    alert(`💀 Oyun bitdi! Rəqəm ${targetNumber}idi.`);
    console.log("OYUN BİTDİ.");
}

Son yoxlama

Dövr bitdikdən sonra, bu kod işə düşür:

  • !isWinner - İstifadəçi qazanmadısa (! 'deyil' deməkdir)
  • Oyun bitdi mesajı göstəririk və düzgün rəqəmi açıqlayırıq
  • Bu həm cəhdlər bitdikdə, həm də istifadəçi oyunu ləğv etdikdə işləyir

10 Addım 8: Oyunu başlatmaq

Kodun sonunda oyunu dərhal başlatmaq üçün funksiyanı çağırırıq.

javascript
// Oyunu dərhal başlat
startConsoleGame();

İzahat

  • startConsoleGame() - Bu funksiyanı çağırır və oyunu başladır
  • Kod yükləndikdən dərhal sonra oyun başlayır
  • Funksiyanı yenidən çağıraraq oyunu istənilən vaxt yenidən başlada bilərik

11 Mövzu əlaqələri

Gəlin oyunda istifadə etdiyimiz hər mövzunu əvvəlki dərslərlə əlaqələndirək:

Dərs 2: Dəyişənlər

Oyun vəziyyətini saxlamaq üçün const və let istifadə edirik (targetNumber, attempts, maxAttempts, isWinner)

Dərs 3: Məlumat növləri

Boolean dəyişənlər (isWinner), rəqəmlər (attempts, targetNumber), və stringlər (istifadəçi girişi)

Dərs 4: İfadələr və operatorlar

Riyazi ifadələr (Math.random() * 100 + 1), inkrement (attempts++), müqayisə operatorları (guess === targetNumber)

Dərs 5: Boolean məntiq

Məntiq operatorları dövr şərtində (&&) və validasiyada (Number.isNaN())

Dərs 6: Idarəetmə axını

if...else if...else ifadələri oyun məntiqini və validasiyanı idarə etmək üçün

Dərs 7: İterasiya

while dövrü oyun bitənə qədər təkrarlamaq üçün, continue ifadəsi keçərsiz girişi atlamaq üçün

Dərs 8: Funksiyalar

Bütün oyun kodu startConsoleGame() funksiyasında təşkil edilib, return ilə erkən çıxış

Dərs 9: Daxili funksiyalar

Math.random(), Math.floor(), Number(), Number.isNaN(), console.log(), həmçinin prompt() və alert() brauzerin API-ləri

12 Oyunu genişləndirmək

İndi oyunun necə işlədiyini başa düşdünüz, onu təkmilləşdirmək üçün bəzi fikirlər:

Çağırışlar

  • Çətinlik səviyyələri əlavə edin (asan: 1-50, çətin: 1-200)
  • İpucu sistemi əlavə edin (hər 3 səhv təxmindən sonra)
  • Xal sistemi tətbiq edin (daha az cəhd = daha çox xal)
  • İstifadəçidən oyunu yenidən oynamaq istəyib-istəmədiyini soruşun
  • Bütün təxminlərin massivini saxlayın və sonunda göstərin

Xülasə

Bu oyun başlanğıc bölməsindən bütün əsas mövzuları real layihədə birləşdirir
Funksiyalar kodu təşkil edir və təkrar istifadə olunmağı asanlaşdırır
Dəyişənlər oyun vəziyyətini və tərəqqini izləyir
Şərtli ifadələr (if/else) oyun məntiqini və qərar qəbuletməsini idarə edir
Dövrlər (while) oyunun bitənə qədər davam etməsinə imkan verir
Daxili funksiyalar təsadüfi rəqəmlər, istifadəçi girişi və validasiya üçün güclü alətlər təmin edir
İstifadəçi giriş validasiyası proqramın düzgün işləməsini təmin edir
Bu layihə kiçik JavaScript proqramları yaratmaq üçün möhkəm əsas verir

Təklifiniz var, səhv və ya xəta tapdınız? Zəhmət olmasa bizimlə əlaqə saxlayın.

Təbriklər!

Siz JavaScript başlanğıc bölməsini tamamladınız! Bu oyunu yaratmaqla bütün fundamental anlayışları real, interaktiv layihədə tətbiq etdiniz. İndi JavaScript-in daha mürəkkəb xüsusiyyətlərini öyrənməyə və daha təəccüblü proqramlar yaratmağa hazırsınız.

Orta səviyyə bölməsində biz massivlər, obyektlər, daha mürəkkəb funksiyalar və daha çox şeylər öyrənəcəyik!