Vibecoding · 16-dars · 7–8-sinflar

Fan: 2D Canvas Boss Dvigateli Kohorta: Middle Web 7-8 Hafta: 3-hafta Katta Finali

Boss Jangi, Quvvatlantirgichlar va Arkada Yakuni: To'liq 2D Canvas O'yini

Bugun 3-haftalik GameDev darslarimizning eng yuksak cho'qqisi! Biz sakrash fizikasini, lazerlar to'lqinini, 3 fazali aqlli Boss AI algoritmini va osmondan tushuvchi qalqonlarni yagona epik jangga birlashtiramiz. Giga-Sentinel kiber-bossini mag'lub etishga tayyormisiz?

Yagona Tizim

O'yin Dvigatelining 5 Asosiy Podtizimi

1. Fizika Dvigateli

Gravitatsiya, sakrash va AABB platformalariga qo'nish.

2. Dushman (Boss) AI

Mustaqil uchish va jonga (HP) qarab 3 xil fazada hujum qilish.

3. O'qlar va Lazerlar

Massivlar: plazma to'plari va lazerlarni yaratish va o'chirish.

4. Quvvatlantirgichlar (Power-ups)

Qalqon (Shield), qo'shimcha jon (Heal) va ochkolar.

5. O'yin Sikli va Ovoz

Start, G'alaba ekrani, rekordlar va Web Audio tovushlari.

Boss Algoritmi

Boss AI: Jonga Qarab O'zgaruvchi 3 Hujum Fazasi

1-Faza: Razvedka (HP > 65%)

Boss ekranning yuqori qismida bosiq uchadi va yakka lazerlar otadi.

1 Lazer · Sekin

2-Faza: G'azab (HP < 65%)

Boss tezlashadi. Ikkala qanotidan parallel ikkitalik lazerlar yog'diradi!

2 Lazer · Tez

3-Faza: Berserk (HP < 30%)

Qizil nur taratadi! Har yarim soniyada qalin lazer to'lqinlari otiladi.

Enrage Mode!

Jon Ko'rsatkichi

Canvas da Boss va Qahramon Jon Barlari (HP)

Proportsiya Formulasi

Jon kamaygan sari chiziq qisqarishi uchun:

`let hpPercent = boss.hp / boss.maxHp;`
`let currentWidth = totalBarWidth * hpPercent;`

100 dan 50 jon qolganda koeffitsiyent 0.5 bo'ladi — chiziq roppa-rosa yarmigacha qisqaradi!

Canvas da Chizish Kodi

// Fon ramkasi (qora/kulrang)
ctx.fillStyle = '#152642';
ctx.fillRect(200, 16, 340, 16);

// Jon miqdori (yashil yoki qizil)
ctx.fillStyle = boss.hp < 30 ? '#ff2a5f' : '#00ff88';
ctx.fillRect(200, 16, 340 * (boss.hp / 100), 16);

Quvvatlantirgichlar

Power-uplar Tizimi: Qalqonlar va Qo'shimcha Jonlar

1. Kiber-Qalqon (Shield 🛡️)

Qahramon atrofida 5 soniyaga (300 kadr) nurli himoya gumbazini yoqadi.

Qalqon vaqtida dushman lazerlari qahramonga umuman zarar yetkaza olmaydi!

2. Jon Tiklash (❤️)

Yo'qotilgan 1 ta jonni qayta tiklaydi (maksimal 3 tagacha):

`player.hp = Math.min(player.maxHp, player.hp + 1);`

Qiyin vaziyatda o'yinni qutqarib qoladi!

Muvozanat Sirlari

I-Frames Sirlari: Nega Zarbadan So'ng 1 Soniya Daxlsizlik Kerak?

1 Kadrda O'lib Qolish Muammosi

O'yin sekundiga 60 kadr tezlikda ishlaydi. Agar lazer qahramonga 0.1 soniya tegib tursa — ketma-ket 6 marta zarar beradi!

Barcha 3 ta jon ko'z ochib yumguncha tugab qoladi va o'yinchi nima bo'lganini ham tushunmaydi!

Yechim: I-Frames (Miltillash)

Zarba olgach, qahramonga 60 kadr (1 soniya) daxlsizlik beriladi:

1. `player.iFrames = 60;`.
2. Qahramon ekranda miltillaydi.
3. Bu vaqt ichida boshqa lazerlar zarar bermaydi va o'yinchi qochib ulguradi!

Xotira Gigienasi

FPS Tushib Ketmasligi Uchun Lazerlarni `splice` Qilish

Tozalanmasa Nima Bo'ladi?

Har sekundda 2 ta lazer paydo bo'ladi. 2 daqiqadan so'ng massivda 250 dan ortiq ko'rinmas ob'yektlar yig'ilib qoladi.

Brauzer ekrandan chiqib ketgan narsalarni ham hisoblab charchaydi va o'yin qotishni boshlaydi!

Orqadan Tozalash Usuli

for (let i = bossLasers.length - 1; i >= 0; i--) {
  let l = bossLasers[i];
  l.y += l.vy;
  // Ekrandan chiqib ketdimi? O'chiramiz!
  if (l.y > canvas.height) {
    bossLasers.splice(i, 1);
  }
}

O'yin Holatlari

O'yinning 4 Holati: START, PLAYING, WIN va LOSE

1. START

Kutish ekrani: qoidalar va start tugmasi.

2. PLAYING

Asosiy jang: fizika, lazerlar va ochkolar.

3. WIN (G'alaba)

boss.hp <= 0: G'alaba va rekord saqlanadi!

4. LOSE (Mag'lub)

player.hp <= 0: Qayta urinib ko'rish ekrani.

Kiber-Tovushlar

Fayllarsiz Sof Ovoz: Web Audio API Sintezi

Nega Tashqi .mp3 Fayl Kerak Emas?

1. Tashqi mp3 fayllar internet sekin bo'lsa yuklanmay qolishi mumkin.
2. Web Audio API tovushlarni to'g'ridan-to'g'ri matematik chastotalardan (Gerts) sintez qiladi:
• Sakrash: baland mayin to'lqin (580 Gts).
• Lazer: o'tkir arracha to'lqin (sawtooth).
• Portlash: past bas (140 Gts).

Tovush Generator Kodingiz

function beep(freq, dur, type = 'sine') {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = type;
  osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.start(); osc.stop(audioCtx.currentTime + dur);
}

Jang Taktikasi

G'alaba Taktikasi: Bossni Qanday Yengish Mumkin?

1. Yuqori Platformalar

Doim polda turmang! Yuqori platformalarga chiqib, bossga yaqindan zarba bering.

2. Qalqonlarni Yig'ing

🛡️ qalqon tushganda darhol uni oling! 5 soniyalik daxlsizlik g'alabani hal qiladi.

3. 3-Fazada Hushyor Bo'ling

HP < 30% bo'lganda boss quturadi. Bir joyda to'xtab qolmang — sakrab harakatlaning!

Katta Jang

Cyber Boss Arena: Giga-Sentinel Bilan Buyuk Jang!

1. O'yinni Ochish

`game/index.html` ni brauzerda oching.

2. 3 Fazani Yengish

Lazerlardan qochib, bossning 100 ta jonini tugating.

3. Rekord O'rnatish

O'z rekordingizni varaqaga yozib, natijangizni qayd eting.

    👾 O'yin manzili: classes/7-8-sinf/3-hafta/16-dars-boss-jangi-va-power-ups/game/index.html
  

Bitiruv G'alabasi

Tabriklaymiz: 3-Haftalik Canvas GameDev To'liq Yakunlandi!

10 Ballik Mezon

Ball	Talab
1–3 ball	Boss fazalari va o'yin holatlari to'g'ri izohlandi
4–7 ball	Bossning kamida 2- va 3-fazalarigacha yetib borildi
8–10 ball	Boss to'liq mag'lub etildi, g'alaba qozonildi va varaqa to'ldirildi

Siz Nimalarni O'rgandingiz?

Siz toza JavaScript va Canvas da haqiqiy o'yin dvijogini qura olasiz: Nyuton fizikasi, to'qnashuvlar, dushman AI algoritmlari, ovoz sintezi va interfeys. Bu mustaqil Game Developer darajasidir!

        Uyga vazifa: Varaqadagi Boss AI holatlari tahlilini yakunlash.
      