Vibecoding · 15-dars · 5–6-sinflar

Fan: Bolalar GameDev & O'yin Mantiqi Kohorta: Cyber Creators 5-6 Hafta: 3 (Arkadali O'yinlar)

Kiber-Yuguruvchi 3.0: Oltin Kristalllar, Ballar va Vaqt Poygasi!

O'tgan darslarda Kiber-Qahramonimiz yugurishni, sakrashni va xavfli lazerlardan qochishni o'rgandi. Ammo mukofot bo'lmasa qiyinchiliklarni yengishdan nima ma'no bor? Bugun biz o'yinga yaltirab turuvchi energiya kristallarini, ochkolar hisoblagichini (Score HUD) va o'yinchini shoshiltiruvchi 60 soniyalik teskari taymerni qo'shamiz!

O'yin Psixologiyasi

O'yinda Mukofot Nima Uchun Kerak? Kolleksiya va Qiziqish

❌ Mukofotsiz o'yin (Zerikarli)

Qahramon boshidan oxirigacha bo'sh yo'lakda yugurib boradi. Xaritadagi baland joylarga sakrashga hech qanday qiziqish qolmaydi.

✅ Kristall va tangalar bilan (Qiziqarli!)

O'yinchi baland platformaga sakrab, tikanlar ustidagi qimmatbaho 500 ballik oltin kristalni olish uchun jon kuydiradi!

Kristallar Ro'yxati

Kristallarni Qanday Joylaymiz? JavaScript Obyektlar Massivi

Xaritadagi `coins` Massivi

const coins = [
  { x: 180, y: 320, size: 16, collected: false },
  { x: 340, y: 220, size: 16, collected: false },
  { x: 520, y: 160, size: 20, collected: false, bonus: true },
  { x: 680, y: 280, size: 16, collected: false }
];

Har Bir Kristalning Xususiyatlari

x, y: Ekranning qaysi piksellarida turishi.
size: Hajmi (oddiy 16px, yirik bonus 20px).
collected: false: Bayroq: agar qahramon tegsa, true bo'ladi va o'chadi!

Yig'ish Mexanikasi

Qahramon Kristalga Tekkanini Qanday Bilamiz? (To'qnashuv Qoidasi)

To'g'ri To'rtburchaklar Kesishuvi

Agar qahramonning tanasi kristal turgan maydon bilan to'qnashsa — kristal yig'ilgan hisoblanadi!

Kristalni Yig'ish Kodi

function checkCoinCollisions() {
  coins.forEach(coin => {
    if (!coin.collected &&
        player.x < coin.x + coin.size &&
        player.x + player.w > coin.x &&
        player.y < coin.y + coin.size &&
        player.y + player.h > coin.y) {
      
      coin.collected = true; // Kristall yo'qoladi!
      score += 100;          // 100 ball qo'shiladi!
      playCoinSound();       // Dzing! ovozi yangraydi!
    }
  });
}

O'yin Ekrani

Ballar Hisoblagichi (HUD Score): Oltin Raqamlar Ko'rinishi

Canvas da Ballarni Yozish

function drawHUD() {
  ctx.fillStyle = "#FFD700"; // Oltin rang
  ctx.font = "bold 16px 'JetBrains Mono', monospace";
  ctx.fillText("⭐ BALLAR: " + score, 20, 30);
}

Suzuvchi Sonlar Effekti (+100)

Kristal olingan paytda qahramon boshining tepasida 1 soniyaga yorqin +100! yozuvi paydo bo'lib, yuqoriga suzib yo'qoladi. Bu o'yinga katta zavq bag'ishlaydi!

Vaqt Poygasi

Vaqt Taymeri: 60 Soniya Ichida Portalga Yetib Bor!

Nega Vaqt Cheklovi Kerak?

Taymersiz o'yinchi bir joyda qotib turaverishi mumkin. Teskari sanoq esa o'yinchini harakatga keltirib, hayajonni oshiradi!

Teskari Sanoq Kodi

let timeLeft = 60; // 60 soniya

setInterval(function() {
  if (timeLeft > 0 && !gameOver) {
    timeLeft--;
  } else if (timeLeft === 0) {
    triggerTimeOutGameOver(); // Vaqt tugadi, o'yin tugadi!
  }
}, 1000);

Kombi va Karralik

Kombi Tizimi (Combo Multiplier): Kristallarni Ketma-Ket Yig' x2 va x3!

Ko'paytiruvchi Qanday Ishlaydi?

Agar o'yinchi 4 soniya ichida ketma-ket 3 ta kristal olsa — COMBO x2 rejimi yoqiladi! Endi har bir kristal 100 emas, 200 ball beradi!

Kombi Hisoblash Kodi

let combo = 1;
let comboTimer = null;

function addScoreWithCombo() {
  score += 100 * combo;
  combo++;
  clearTimeout(comboTimer);
  
  // 3 soniyada yangi kristal olinmasa kombi nolga tushadi
  comboTimer = setTimeout(() => { combo = 1; }, 3000);
}

Kristall Grafikasi

Canvas da Yaltirab Turuvchi Romb-Kristallni Chizish

Romb Chizish Kodi

function drawCrystal(x, y, size) {
  ctx.save();
  ctx.fillStyle = "#00e5ff";     // Kiber moviy
  ctx.shadowColor = "#00e5ff";   // Yorug'lik
  ctx.shadowBlur = 12;
  
  ctx.beginPath();
  ctx.moveTo(x, y - size);       // Tepasi
  ctx.lineTo(x + size, y);       // O'ngi
  ctx.lineTo(x, y + size);       // Pasti
  ctx.lineTo(x - size, y);       // Chapi
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

Neon Porlashi Sirlari

ctx.shadowBlur = 12 kiber-shahar qorong'uligida kristallarning atrofida ko'zni quvontiruvchi neon yorug'lik halqasini hosil qiladi!

Level Dizayn Sirlari

Qayerga Kristall Qo'yish Kerak? Qiziqarli Level Dizayn

1. "Yo'l Ko'rsatkich"

Xandaq ustidagi kristallar qahramonga qayerga sakrash kerakligini ko'rsatib turadi.

2. "Tavakkal Mukofoti"

O'tkir tikanlar ustidagi kristal. Olish xavfli, ammo +300 ball beradi!

3. "Maxfiy Burchak"

Faqat yuqori sakrab chiqiladigan eng baland tom ustidagi yashirin xazina.

Amaliy O'yin Maydoni

Amaliyot: Kiber-Yuguruvchida Kristall Yig'ish (`game/index.html`)

O'yin Sinov Stendi

Dars papkasidagi yangilangan o'yinda quyidagi sinovlar bajariladi:

Barcha 5 ta kristalni yig'ish: Maksimal 500 ball to'plash.
Vaqt tugashidan oldin: 60 soniyada portalga yetib borish.
Jonlarni asrash: Kristall olayotganda tikanlarga tushib ketmaslik.

Ish Varaqasidagi Topshiriq

Brauzerda game/index.html ni oching.
Kristallarni yig'ib, yakuniy ballni yozing.
Taymerda necha soniya qolganini qayd eting.
Ish varaqasidagi massiv jadvalini to'ldiring.

O'yin Balansi

O'yinni O'zgartirish: O'z Kristallingni Qanday Qo'shasan?

game.js ga Yangi Kristal Qo'shish

// Xaritaga yangi mega-kristall qo'shamiz!
coins.push({
  x: 450,
  y: 120, // Eng balandda!
  size: 24,
  collected: false,
  scoreValue: 500 // 500 ball!
});

O'z O'yiningning Muallifi Bo'l!

VS Code da game.js faylini oching. Taymerni 30 soniya qilib "HARDCORE" rejimini yoqishingiz yoki o'zingiz istagan balandlikka yangi kristallarni joylashtirishingiz mumkin!

15-Dars Yakuni · 10 Ball

Xulosa: Kiber-Yuguruvchida To'liq Arkada Mexanikasi

Darsning 3 Ta Bosh Qoidasi

Massiv narsalarni saqlaydi: Barcha kristall koordinatalari coins massivida yashaydi.
To'qnashuv ball beradi: Qahramon tegishi bilan collected = true bo'ladi va ball qo'shiladi.
Taymer hayajon beradi: 60 soniyalik poyga o'yinni haqiqiy sarguzashtga aylantiradi.

10 Ballik Baholash Mezoni

Kristallar Massivi: {x, y, collected} tuzilishini bilish — 3 ball
O'yin Sinovi: barcha kristallarni yig'ib 500 ball to'plash — 3 ball
Taymer va To'qnashuv Kodi: kesishuv formulasi va taymer mantiqi — 4 ball
Rag'bat: Xaritaga o'z yangi kristalini qo'shish — +2 ball