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

Touch Hodisalari va Virtual Analog Joystik

O'yinni smartfon va planshetlarga moslashtiramiz: Touch API hodisalari, sahifa parazit scrollini bloklash, virtual joystik vektor matematikasi va ikki qo'lli Multi-Touch boshqaruvi.

📱 Touch API 🕹️ Virtual Joystick 🚫 touch-action: none ✌️ Multi-Touch
Zamonaviy Bozor

O'yinchilarning 70%+ qismi telefonda: Klaviatura qayerda?

❌ Faqat kompyuter uchun yozilgan o'yin:
  • Faqat klaviatura o'qlari (`keydown`) bosilgandagina ishlaydi.
  • Do'stlaringiz havolani smartfonda ochadi — qahramon qotib turadi.
  • Har 10 ta foydalanuvchining 7 tasini darhol yo'qotish demakdir!
✅ Mobile-First Geyming Arxitekturasi:
  • Ekranda zamonaviy nurli virtual joystik va sakrash tugmalari chiqadi.
  • Barmoq teginishlari, surish va bir vaqtda bosishni tushunadi.
  • Ham telefon sensorida, ham kompyuter klaviaturasida birdek ishlaydi!
Touch Events API

Touch Hodisalari: Qanday qilib barmoqni kuzatamiz?

1. touchstart

Barmoq ekranga tegdi. Joystik markazi yoki sakrash boshlanishi aniqlanadi.

2. touchmove

Barmoq ekranda surilmoqda. Joystik burchagi va og'ish kuchi hisoblanadi.

3. touchend

Barmoq ko'tarildi. Joystik tutqichi avtomatik markazga (0, 0) qaytadi.

💡 Важнейшее отличие: Sichqonchada bitta e.clientX bo'ladi. Touch'da esa koordinata e.touches[0].clientX massivida bo'ladi, chunki ekranga bir vaqtda 10 ta barmoq tegishi mumkin!
Parazit Harakatlar

Sahifa Qimirlashining Oldini Olish: touch-action: none

🚨 Mobil brauzerlarning noxush xatti-harakati:

O'yinchi joystikni tepaga sursa, brauzer sahifani aylantirish (scroll) yoki kattalashtirish deb tushunib, butun o'yinni ekrandan chiqarib yuboradi!

✅ Qat'iy muhandislik yechimi:
/* 1. CSS da barcha parazit imo-ishoralarni o'chiramiz: */ body, canvas { touch-action: none; user-select: none; -webkit-user-select: none; } // 2. JS Touch hodisalarida brauzerni to'xtatamiz: element.addEventListener('touchmove', (e) => { e.preventDefault(); // Scrollni bloklash! }, { passive: false });
Virtual Joystik

Virtual Analog Joystik: Baza va Tutqich

Ikkita asosiy komponent:
  • Baza (Joy Base): Radiusi R = 65px bo'lgan qo'zg'almas doira markazi (x0, y0).
  • Tutqich (Joy Knob): Barmoq bilan har tomonga tortiladigan harakatlanuvchi tugma.
Barmoq siljishi (Delta vektor):
const dx = touchX - centerX; const dy = touchY - centerY; // Pifagor bo'yicha masofa: const dist = Math.sqrt(dx * dx + dy * dy);
Vektor Cheklovi

Doirada Cheklash (Clamping): Tutqich Uchib Ketmasligi Shart!

Cheklov bo'lmasa nima bo'ladi?

Agar barmoq ekranning narigi burchagiga borsa, tutqich o'z bazasidan 400 pikselga chiqib ketadi. Boshqaruv buziladi!

Doirada ushlab turish formulasi:
const angle = Math.atan2(dy, dx); const clampedDist = Math.min(dist, maxRadius); // Tutqich doira chegarasidan tashqariga chiqmaydi: const knobX = Math.cos(angle) * clampedDist; const knobY = Math.sin(angle) * clampedDist;
Signal Normalizatsiyasi

Normalizatsiya: Piksellarni -1.0 dan +1.0 Oralig'iga O'tkazish

Nega o'yin dvijoklari -1.0 .. +1.0 oralig'ini xohlaydi?

Fizika dvijogiga ekranning piksellari qiziq emas. Unga nisbiy tortish kuchi kerak: 0 = to'xtash, +1.0 = to'liq tezlikda o'ngga yugurish, -0.5 = sekin chapga qadam.

Normalizatsiya kodi:
const inputX = knobX / maxRadius; // -1.0 ... +1.0 const inputY = knobY / maxRadius; // -1.0 ... +1.0 // Qahramon tezligiga ko'paytiramiz: player.x += inputX * player.speed;
Multi-Touch Boshqaruvi

Multi-Touch: Qanday qilib bir vaqtda yugurish va otish mumkin?

Bitta barmoq cheklovi muammosi:

Agar faqat birinchi barmoq (`e.touches[0]`) tekshirilsa, o'ng qo'l bilan sakrashni bosganingizda chap qo'ldagi joystik o'chib qoladi yoki o'ng tomonga sakrab ketadi!

Barmoq ID raqami (identifier) yechimi:
// Har bir barmoqning o'z ID si bo'ladi: for (let t of e.changedTouches) { // Chap tomondagi barmoq -> faqat joystik uchun: if (t.clientX < screenWidth / 2) { joyTouchId = t.identifier; } }
Ekran Moslashuvi

Responsiv Canvas va Fullscreen API

Bitta bosishda to'liq ekran:
function goFullscreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } }
Canvas o'lchamini oynaga moslash:
function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas);
To'liq Mobil Stek

To'liq Mobil Stek: Touch + Audio + Partikllar + Kamera

1. Virtual Joy

Barmog'ingiz bilan silliq analog tezlik va burilish.

2. Web Audio API

Har bir sensorli sakrash va o'qda toza 0ms ovoz sintezi.

3. Visual FX

Lazer va portlashlarda neon zarrachalar sochilib ketishi.

4. Viewport

Kamera silliq Lerp bilan cheksiz dunyoda ergashadi.

Amaliy Laboratoriya

Mobile Touch Studiyasi: Virtual Joystik va Sensorli Boshqaruv

Laboratoriya vazifalari:
  1. Brauzerda lab/index.html ni oching.
  2. Joystikni torting va telemetriyada InputX o'zgarishini ko'ring.
  3. Multi-touch'ni sinang: joystikni tortib turib bir vaqtda Sakrashni bosing.
  4. Baza radiusi va deadzone sliderlarini o'zgartirib ko'ring.
Jonli telemetriya ko'rsatkichlari:

O'ng paneldagi jadvalda ekrandagi barmoqlar soni, normalizatsiya ko'rsatkichlari va scroll blokirovkasi jonli yangilanadi.

Xulosa va Baholash

10 Ballik Baholash Mezoni

9 – 10 Ball: Mobile Architect
  • Touch hodisalari farqi to'liq tushuntirilgan.
  • Clamping va normalizatsiya to'g'ri yozilgan.
  • Multi-touch identifier roli aniq ko'rsatilgan.
7 – 8 Ball: Yaxshi Natija
  • Touch hodisalari to'g'ri.
  • Joystik formulasida 1 ta kamchilik bor.
  • Varaqa to'ldirilgan.
5 – 6 Ball: Qoniqarli
  • Faqat nazariy savollar to'ldirilgan.
  • Matematik formulalar qolib ketgan.
🏆 Keyingi 20-dars: Yakuniy Kiber-Arkada Game Jam, Deploy va Sinf Chempionati!