Vibecoding · 16-dars · 5–6-sinflar

Fan: Bolalar GameDev & Yakuniy O'yin Kohorta: Cyber Creators 5-6 Hafta: 3 (Arkada Finali)

Kiber-Yuguruvchi 4.0: Boss Jangi, Lazer Qalqoni va Buyuk G'alaba!

Bu bizning o'yin yaratish sayohatimizning eng yuqori cho'qqisi! Bugun portal ostonasida ulkan Kiber-Dron (Boss) paydo bo'ladi. Biz dushmanning jon ko'rsatkichi (Boss HP Bar), lazer hujumlari, g'alaba mushakbozligi (Victory Screen) va o'yinni to'liq yakunlovchi Game Loop tizimini quramiz!

O'yinning Eng Qiziq Joyi

O'yinda Boss Nima? O'yinchi Uchun Bosh Imtihon

Yakuniy Dushmanning O'rni

Boss — bu o'quvchining 16 dars davomida o'rgangan barcha ko'nikmalarini (tez yugurish, chaqqon sakrash va aniq mo'ljal) sinovdan o'tkazuvchi bosh qahramondir.

Boss Jangining 3 Bosqichi

1-bosqich: Patrul. Dron havoda chapga-o'ngga suzib yuradi.
2-bosqich: Hujum. Boss pastga qarab qizil lazer to'plarini otadi!
3-bosqich: Zaiflik. Dron pastga tushganda uning ustiga sakrab bosing!

Boss Obyekti

Bossni Kodda Yaratamiz: Koordinatalar, Tezlik va Jonlar

game.js dagi `boss` Obyekti

const boss = {
  x: 600,
  y: 120,
  width: 64,
  height: 48,
  speedX: 2.5,
  hp: 3,        // 3 ta jon
  maxHp: 3,
  isAlive: true,
  laserCooldown: 0
};

Patrul Mantiqi (Chapga-O'ngga)

Dron ekrandan chiqib ketmasligi uchun uning tezlik yo'nalishini teskarisiga o'zgartiramiz:

boss.x += boss.speedX;

// Chegaraga yetganda orqaga qaytish:
if (boss.x > 700 || boss.x < 450) {
  boss.speedX = -boss.speedX;
}

Katta Qizil Jon Ko'rsatkichi

Bossning Katta Qizil Jon Ko'rsatkichi (Boss HP Bar)

HP Bar Chizish Kodi

function drawBossHP() {
  if (!boss.isAlive) return;

  // Qora ramka
  ctx.fillStyle = "#040812";
  ctx.fillRect(250, 15, 260, 16);

  // Qizil to'ldirish (qolgan jon foizi bo'yicha)
  const hpPercent = boss.hp / boss.maxHp;
  ctx.fillStyle = "#ff2a5f";
  ctx.fillRect(252, 17, 256 * hpPercent, 12);

  // Yozuv
  ctx.fillStyle = "#FFFFFF";
  ctx.font = "bold 11px monospace";
  ctx.fillText("⚡ MEGA DRON BOSS", 320, 27);
}

Zarba Yeganda Miltillash

Qahramon boss ustiga sakraganda, dron bir lahzaga oppoq bo'lib miltillaydi va uning jon ko'rsatkichi kamayadi! O'yinchi o'z zarbasi o'tganini darhol his qiladi.

Zarba Berish Mexanikasi

Bossni Qanday Yengamiz? Ustiga Sakrab Zarba Berish!

Tepadan — G'alaba, Yonidan — Jarima!

Agar qahramon yuqoridan pastga sakrab tushayotgan bo'lsa (vy > 0) va dronning tepasiga tegsa — boss -1 jon yo'qotadi, qahramon esa balandga sakrab ketadi!

Ustiga Sakrash Kodi

if (checkOverlap(player, boss)) {
  if (player.vy > 0 && player.y < boss.y + 10) {
    // Tepasidan bosdi!
    boss.hp--;
    player.vy = -10; // Balandga sakrab ketish (Rebound)
    playHitSound();
    
    if (boss.hp <= 0) {
      boss.isAlive = false;
      triggerVictory(); // G'ALABA!
    }
  } else {
    // Yonidan tegib ketdi (Qahramon jon yo'qotadi)
    playerTakeDamage();
  }
}

Buyuk G'alaba

G'alaba Ekrani (Victory Screen): Mushakbozlik va Yakuniy Ball!

G'alaba Oynasi Tarkibi

Oltin kubok: 🏆 BOSQICH YAKUNLANDI! BOSS YENGILDI!
Statistika: Jami ball (800), sarflangan vaqt (42s) va jonlar.
Tugma: '⭐ Qayta o'ynash' — o'yinni yangidan boshlash.

G'alaba Oynasini Yoqish

function triggerVictory() {
  gameWon = true;
  document.getElementById('overlay-victory').hidden = false;
  document.getElementById('stat-time').textContent = (60 - timeLeft) + "s";
  document.getElementById('stat-coins').textContent = score + " pts";
  startFireworks(); // Mushakbozlikni yoqish!
}

Mag'lubiyat va Qayta Boshlash

Mag'lubiyat Ekrani (Game Over): Tushkunliksiz Qayta Boshlash!

Game Over Qachon Yuz Beradi?

Qahramon barcha 3 ta jonini yo'qotganda.
Taymerdagi vaqt tugab 00:00 bo'lganda.

Tezkor Qayta Boshlash

Yaxshi o'yin o'yinchini uzoq kuttirmaydi. [R] tugmasi yoki ekrandagi tugma bosilishi bilan qahramon to'la jon bilan darhol startga qaytadi!

O'yin Yuragi

To'liq O'yin Sikli (Game Loop): Soniyasiga 60 Kadr

1. Ввод (Клавиатура)
➔
2. Физика и Движение
➔
3. Коллизии и Урон
➔
4. Рендеринг Canvas

requestAnimationFrame(gameLoop) funksiyasi bu zanjirni soniyasiga 60 marta takrorlab, ko'zni quvontiruvchi silliq o'yin harakatini yaratadi!

O'z O'yiningni Tarqatish

O'z O'yining bilan Faxrlan: O'yinni Do'stlarga Qanday Ulashish Mumkin?

1. Jonli Ko'rish (Live Server)

VS Code dagi 'Go Live' tugmasi o'yinni istalgan noutbukda bir zumda ochib beradi.

2. Internetga Chiqarish (Vercel)

O'yinni Vercel orqali bepul internetga joylashtirib, uning havolasi va QR kodini ota-onangizga yoki do'stlaringizga yuborishingiz mumkin!

Finał Jang Maydoni

Amaliyot: Boss Droniga Qarshi Buyuk Jang (`game/index.html`)

Final Topshirig'i

Yangilangan Kiber-Yuguruvchi 4.0 da quyidagilarni bajaring:

Tikanlardan o'tib barcha kristallarni yig'ish.
Boss Dronining ustiga 3 marta sakrab zarba berish.
G'alaba oynasi va bayramona mushaklarni ko'rish!

Ish Varaqasidagi Topshiriq

Bossni yengib, yakuniy ballingizni yozing.
Qahramonda nechta jon qolganini belgilang.
Ish varaqasidagi Game Loop siklini to'ldiring.
Chempion Sertifikatiga o'qituvchi imzosini oling!

Kiber Chempion

Tabriklaymiz! Siz — Sertifikatlangan O'yin Yaratuvchisisiz!

🏆 ⭐ 🎮

SERTIFIKAT: CYBER GAMEDEV JUNIOR

Ushbu sertifikat o'quvchi 2D platformer fizikasi, Canvas boshqaruvi, to'qnashuvlar, kristallar va Boss jangini JavaScript da noldan yaratganini tasdiqlaydi!

16-Dars Yakuni · 10 Ball

Xulosa: JavaScript da GameDev 1-Modulining Buyuk Finali

Kursning 3 Ta Bosh Yutug'i

Haqiqiy fizika: Gravitatsiya, sakrash, tezlik va pol bilan to'qnashuv.
Arkada mexanikasi: Tikanlar, lazerlar, kristallar va vaqt taymeri.
To'liq Boss va Game Loop: Start tugmasidan to g'alaba mushakbozligigacha!

10 Ballik Baholash Mezoni

Boss Arxitekturasi: dron obyekti, patrul va HP ko'rsatkichi — 3 ball
Bossni Yengish: dronni mag'lub etish va g'alaba ekranini ochish — 3 ball
Game Loop va Qayta Boshlash: sikl sxemasi va [R] tugmasi — 4 ball
Rag'bat: Birorta ham jon yo'qotmasdan bossni yengish — +2 ball