Vibecoding · 15-dars · 7–8-sinflar

Fan: 2D O'yin Fizikasi & Canvas Kohorta: Middle Web 7-8 Hafta: 3 (Fizika va Sakrash)

Canvas O'yin Fizikasi: Gravitatsiya, Parabolik Sakrash va To'qnashuvlar

Nega sifatli platformer o'yinlarida qahramonlar xuddi tirikdek tabiiy sakraydi va yerga tushadi? Barcha sir — Isroil Nyutonning tortishish qonunlarini JavaScript kodiga ko'chirishdadir! Bugun biz erkin tushish tezlanishini, sakrash impulsini va platformalar ustiga aniq qo'nish fizikasini yaratamiz.

Nyuton Qonunlari

Fizika Uchligi: Koordinata, Tezlik va Tezlanish

1. Koordinata (y)

Qahramon ayni lahzada ekranning qaysi pikselida turgani.

y: 200px

2. Tezlik (vy)

Qahramon 1 kadrda necha pikselga siljishi.

y += vy

3. Tezlanish (gravity)

Har bir kadrda tezlikni pastga tortib oshiruvchi kuch.

vy += gravity

Koordinata Sirlari

Katta Syurpriz: Canvas da Y O'qi PASTGA Qarab O'sadi!

Maktab Geometriyasi vs Canvas

Maktab daftarida `(0,0)` nuqta pastki chap burchakda va Y tepaga o'sadi.

HTML5 Canvas da esa (0,0) nuqta — TEPADAGI CHAP BURCHAK!
• Pastga qulash = Y kattalashadi (+)
• Tepaga sakrash = Y kamayadi (-)!

Dastur Uchun Natija

// Pastga qulash (musbat tezlik):
player.vy += 0.6; // gravity qo'shiladi

// Tepaga sakrash (manfiy tezlik!):
player.vy = -14; // Y dan 14 piksel ayiramiz

Fizika Formulalari

Erkin Qulash Formulasi: Atigi 2 Qator Kod

Kadrlar Bo'yicha Tahlil

Sekundiga 60 marta aylanadigan `update()` funksiyasi ichida:

1. Avval gravitatsiya tezlikni oshiradi: `vy += gravity`.
2. So'ngra tezlik koordinatani o'zgartiradi: `y += vy`.

Har bir kadrda qahramon tobora tezroq pastga qulaydi — xuddi haqiqiy hayotdagi kabi!

Tezlik O'sishi Jadvali

Kadr	vy (Tezlik)	y Koordinata
1-kadr	0 + 0.6 = 0.6	100.6 px
2-kadr	0.6 + 0.6 = 1.2	101.8 px
10-kadr	6.0 px/frame	Tez qulash boshlanadi!

Sakrash Sirlari

Sakrash Impulsi: Bir Zumlik Manfiy Tezlik

Fizikada Sakrash Nima?

Sakrash — bu bir tekis yuqoriga suzish emas. Bu yerdan bir lahzalik kuchli itarilish.

Kodda biz tezlikka bir zumda kuchli manfiy son beramiz: `player.vy = -14;`.

Shundan so'ng gravitatsiya bu tezlikni sekinlashtirishni boshlaydi!

Gravitatsiyaning Qarshiligi

Start: player.vy = -14.0 (Tez uchish)
+1 kadr: player.vy = -13.4
+10 kadr: player.vy = -8.0 (Sekinlashmoqda)
Tepa cho'qqi: player.vy = 0.0 (Bir lahza muzlaydi!)
Keyin: player.vy = +0.6, +1.2 (Pastga qulaydi!)

Tabiiy Harakat

Parabola Qonuni: Nega Harakat Jonli Ko'rinadi?

To'g'ri Chiziq vs Parabola

❌ Fizikasiz: qahramon 10px tepaga yuradi, keyin 10px pastga. Harakat robotdek sun'iy.

✅ Gravitatsiya bilan: eng tepa cho'qqida tezlik silliq 0 ga tushadi, qahramon havoda muallaq turgandek tuyuladi, so'ngra tezlashib yerga tushadi. Bu haqiqiy parabola!

Yugurib Sakrash (vx + vy)

Sakrash paytida o'ngga/chapga bosilsa, harakatga gorizontal tezlik `vx` qo'shiladi. Qahramon chuqurliklar va lazerlar ustidan oshib o'tadi!

Nazorat Qoidasi

`isGrounded` Bayrog'i: Havoda Uchib Ketishdan Himoya

Vertolyot Xatosi

Agar shartsiz sakrash yozsangiz, o'yinchi havoda bo'shliq tugmasini 50 marta bosib, osmonga uchib ketadi!

Bizga isGrounded (yerda turibdimi?) bayrog'i kerak: u faqat qahramon polga tekkandagina `true` bo'ladi.

Xavfsiz Sakrash Kodingiz

function jump() {
  if (player.isGrounded) {
    player.vy = -14;
    player.isGrounded = false; // Havoga ko'tarildi!
  }
}

Platformaga Qo'nish

AABB To'qnashuvi: Platformalar Ustiga Chiroyli Qo'nish

Oyoqlar Tekkanini Qanday Bilamiz?

Aynan 3 ta shartni tekshiramiz:
1. Gorizontal bo'yicha: qahramon platforma ustida joylashgan.
2. Vertikal bo'yicha: qahramon oyog'i platforma ustiga tegdi.
3. Qahramon pastga qulayotgan bo'lishi shart (`vy > 0`)!

Qo'nish Kodi

if (player.x + player.w > p.x &&
    player.x < p.x + p.w &&
    player.y + player.h >= p.y &&
    player.vy > 0) {
  player.y = p.y - player.h; // Platforma ustiga qo'yish
  player.vy = 0; // Qulash to'xtadi
  player.isGrounded = true;
}

Gravitatsiya Tajribasi

Sayyoralar Gravitatsiyasi: Oy (0.2) dan Yupiter (1.5) gacha

🌕 Oy (0.2)

Juda yengil tortishish. Qahramon osmonga uchib, sekin suzadi.

🌍 Yer (0.6)

Ideal muvozanat. Sakrash chaqqon, qo'nish dinamik va tabiiy.

🪐 Yupiter (1.5)

Dahshatli tortishish! Qahramon zo'rg'a sakraydi va bir zumda qulaydi.

Double Jump

Double Jump Mexanikasi: Havoda 2-Marta Sakrash

Sakrashlar Hisoblagichi

Oddiy ha/yo'q o'rniga sonli hisoblagich olamiz: `let jumpsLeft = 2;`.

• Yerda: hisoblagich `2` ga tenglanadi.
• Bo'shliq bosilganda: `jumpsLeft > 0` bo'lsa, sakrash beriladi va 1 ga kamayadi.
• Bu o'yinchiga havoda yana bir marta sakrash imkonini beradi!

Tayyor Double Jump Kodi

let jumpsLeft = 2;

function handleJump() {
  if (jumpsLeft > 0) {
    player.vy = -13;
    jumpsLeft--;
  }
}

Amaliy Mashg'ulot

Amaliy Laboratoriya: Cyber Jumper da Fizikani Sinaymiz!

1. Sozlamalarni O'zgartiring

Oy, Yer va Yupiter gravitatsiyasini solishtiring.

2. Platformalarga Chiqing

Eng yuqoridagi qizil platformaga sakrab chiqing.

3. Vektorlarni Kuzating

vy tezlik strelkasining o'zgarishini tahlil qiling.

    🚀 Faylni oching: classes/7-8-sinf/3-hafta/15-dars-oyin-fizikasi-gravitatsiya-va-sakrash/lab/index.html
  

Baholash va Yakun

10 Ballik Baholash Mezoni va Keyingi 16-Dars

10 Ballik Mezon

Ball	Talab
1–3 ball	vy += gravity formulasi va Y-o'qi yo'nalishi izohlandi
4–7 ball	Barcha platformalarga sakrab chiqildi, parametrlar tekshirildi
8–10 ball	AABB qo'nish shartlari to'liq tahlil qilindi, varaqa to'ldirildi

Keyingi 16-darsda:

Katta Boss Jangi va Arkada Yakuni: Sakrash fizikasini lazerlar, qalqonlar, bonuslar (Power-ups) va epik Boss jangi bilan birlashtiramiz!

        Uyga vazifa: Varaqadagi AABB shartlarini yakunlash.
      