Game Dev · 7–8-sinf · 4-hafta

Web Audio API va Partikllar Tizimi (Visual FX)

O'yinga jon bag'ishlaymiz: tashqi MP3 fayllarsiz matematik ovoz sintezi, to'lqin osillyatorlari va real fizika asosidagi neon zarrachalar portlashi.

🔊 AudioContext ⚡ Oscillators (█ ∿ ◤) 💥 Particle Emitters 🧹 Memory GC
O'yin Taassuroti

"Game Feel" va "Juice": Nega tovush va effektsiz o'yin jonsiz?

❌ "Quruq" o'yin (Zerikarli):
  • O'q robotga tegadi — robot shunchaki ovozsiz yo'qolib qoladi.
  • O'yinchi zarba tegdimi yoki yo'qligini sezmaydi.
  • 2 daqiqadan keyin o'yinchi zerikib sahifani yopadi.
✅ "Juice" bor jonli o'yin (FX va Audio):
  • Zarba berilganda: o'tkir tovush + 30 ta neon uchqunlari tarqalishi!
  • O'yinchining miyasi har bir harakatdan zavq oladi.
  • O'yin dinamik, qudratli va qimmatbaho loyiha kabi tuyuladi.
Dasturiy Tovush

Nega og'ir MP3 emas, aynan Web Audio API?

⚡ 0 ms Kechikish

MP3 yuklanishda kechikadi. Web Audio esa tovush kartasida mikrosaniyalarda to'lqin yaratadi.

📦 0 Kilobayt Hajm

5 MB hajmdagi fayllar kerak emas. Butun audio-dvijok bor-yo'g'i 15 qator JS kodi ichida!

🎛️ Cheksiz Modulyatsiya

Qahramon tezligi yoki dushman masofasiga qarab tovush chastotasini real vaqtda o'zgartirish mumkin!

To'lqin Shakllari

4 Asosiy To'lqin Shakli: Mayin Ohangdan Portlashgacha

"square" █
To'rtburchak to'lqin

O'tkir 8-bit retro arkada tovushi. Lazer o'qi va sakrash uchun ayni muddao.

"sawtooth" ◤
Arra tishli to'lqin

Agressiv g'ijirlagan tovush. Dushman zarbasi va portlashlar uchun ishlatiladi.

"sine" ∿
Sinusoidal to'lqin

Toza mayin ohang. Kristall va oltin tangalar terishda ishlatiladi.

"triangle" ▲
Uchburchak to'lqin

Sinus va kvadrat qorishmasi. Qadam tovushlari va sakrash uchun qulay.

Chastota O'zgarishi

Lazer O'qi Tovushi: Chastotaning Eksponensial Pasayishi

"Pew-Pew" tovushi mexanikasi:

Lazer shunchaki bitta notadagi ovoz emas. Bu chastotaning 900 Hz dan (yuqori xushtak) 100 Hz gacha (pastki bas) atigi 0.12 soniyada keskin tushib ketishidir!

// 1. Boshlang'ich baland nota: osc.frequency.setValueAtTime(900, ctx.currentTime); // 2. Eksponensial pastga qulash: osc.frequency.exponentialRampToValueAtTime( 100, ctx.currentTime + 0.12 );
⚠️ 0 Hz Matematik tuzog'i:

Hech qachon `exponentialRamp` parametriga 0 Hz bermang! Eksponensial funksiya matematik jihatdan 0 ga yeta olmaydi (xatolik beradi). Har doim kamida 1 Hz yoki 10 Hz ko'rsating!

GainNode va So'nish

GainNode: Quloqni Charchatmaydigan Silliq So'nish

Nega ovozni birdaniga uzib bo'lmaydi?

Agar to'lqin o'rtasida tovush birdan to'xtatilsa, dinamik cho'chib xunuk "chertish" (click) chiqaradi.

Ovoz balandligini so'ndirish kodi:
const gain = ctx.createGain(); // Boshida 20% balandlik: gain.gain.setValueAtTime(0.2, ctx.currentTime); // Oxirida silliq 0 ga tushadi (chertishsiz): gain.gain.linearRampToValueAtTime( 0.01, ctx.currentTime + dur );
Partikllar Tizimi

Partikllar Tizimi (Particle Emitter) Nima?

1. Emitter (Manba)

Portlash yoki lazer dushmanga tekkan fazoviy koordinata `(x, y)`.

2. Radial Tarqalish

30 ta zarracha yaratiladi. Har biri $0 \dots 2\pi$ burchak ostida tasodifiy yo'nalish oladi.

3. Hayot va O'lim (TTL)

Har bir partikl 0.5 soniya yashaydi, sekin shaffoflashib (alpha) yo'qoladi.

Partikllar Matematikasi

Har Bir Partiklning Trigonometriyasi va Gravitatsiyasi

Har tomonga sochilish formulalari:
const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 4 + 2; const p = { x: originX, y: originY, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1.0, // 100% ko'rinadi decay: 0.02 // Har freymda so'nadi };
O'yin tsiklida yangilanish (Game Loop):
p.x += p.vx; p.y += p.vy; p.vy += gravity; // Pastga tortadi! p.life -= p.decay; // Chizishda shaffoflik: ctx.globalAlpha = Math.max(0, p.life); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
Xotira Gigiyenasi

Nega `splice` bo'lmasa o'yin 2 daqiqada qotadi?

🚨 Xotira toshishi fojiasi:

Har bir portlash 30 ta obyekt yaratadi. 1 daqiqada 5000+ partikl to'planadi! Agar o'lgan partikllar (`life <= 0`) massivdan o'chirilmasa, protsessor ko'rinmas nuqtalarni hisoblab holdan toyadi. FPS 60 dan 10 ga tushib ketadi!

✅ Xavfsiz teskari tozalash tsikli:
// Orqadan oldinga yuramiz (indeks xatosiz!): for (let i = particles.length - 1; i >= 0; i--) { if (particles[i].life <= 0) { particles.splice(i, 1); // Xotiradan tozalash! } }
Mukammal Uyg'unlik

Uyg'unlik: Tovush va Vizual Portlash Bitta Lahzada

Lazer O'qi

"square" 900→100Hz + moviy lazer nuri.

Kristall Yig'ish

"sine" 523→1046Hz + oltinrang uchqunlar.

Boss Portlashi

"sawtooth" 180→20Hz + 80 ta olovli zarrachalar.

🎯 Natija: Siz yaratgan o'yin oddiy sinf mashg'ulotidan haqiqiy tijoriy kompyuter o'yiniga aylanadi!
Amaliy Laboratoriya

Kiber SFX va Partikllar Studiyasi: O'z Effektlaringizni Yasa

Laboratoriya vazifalari:
  1. Brauzerda lab/index.html ni oching.
  2. Tovush turlarini sinab ko'ring va osillograf to'lqinini kuzating.
  3. Partikl maydoniga bosib turli rangli zarrachalar yarating.
  4. Hosil bo'lgan playCyberSFX() kodini o'rganing.
Jonli telemetriya va to'lqin grafigi:

Studiyada Web Audio AnalyserNode orqali jonli to'lqin shakli va partikllar soni hisoblagichi ishlaydi.

Xulosa va Baholash

10 Ballik Baholash Mezoni

9 – 10 Ball: Audio & FX Master
  • To'lqin turlari 100% to'g'ri tanlangan.
  • Eksponensial chastota qoidasi tushuntirilgan.
  • Partikl fizikasi va splice to'g'ri yozilgan.
7 – 8 Ball: Yaxshi Natija
  • Tovush turlari to'g'ri.
  • Partikl formulalarida 1 ta kamchilik bor.
  • Varaqa to'ldirilgan.
5 – 6 Ball: Qoniqarli
  • Faqat to'lqin turlari to'ldirilgan.
  • Matematik qismlar yozilmagan.
🚀 Keyingi 18-dars: Kamera Skrollingi va Cheksiz Dunyo Generatsiyasi!