Vibecoding · 13-dars · 7–8-sinflar
Fan: Vibecoding · O'yin dvigateli Kohorta: 7–8-sinf Hafta: 3 (1-soat)

Canvas va O'yin Tsikli: Tugmadan Haqiqiy Dvigatelgacha

Shu paytgacha sizning o'yinlaringiz tugma bosishdan iborat edi: klik → hisob oshadi. Bu o'yin emas, bu forma. Haqiqiy o'yinda ekran sekundiga 60 marta qaytadan chiziladi, qahramon tezlik va gravitatsiyaga ega, to'qnashuvlar esa matematik hisoblanadi. Bugun siz o'sha dvigatelni ichidan ko'rasiz.

DOM ning chegarasi

Nega <div> lardan o'yin qurib bo'lmaydi

DOM qanday ishlaydi

  • Har bir element — brauzer uchun alohida obyekt: rangi, o'lchami, joylashuvi, hodisalari.
  • Bitta elementni siljitsangiz, brauzer butun sahifani qayta hisoblashi mumkin (reflow).
  • 100 ta div — sekin. 1000 tasi — slayd-shou.

Canvas qanday ishlaydi

  • Canvas — bu bitta element. Uning ichida obyektlar yo'q, faqat piksellar.
  • Siz unga rasm chizasiz — xuddi doskaga bo'r bilan.
  • 10 000 ta obyektni 60 FPS da chizish — normal holat.

Doskadagi metafora

DOM — bu magnit doska: har bir magnitni alohida surasiz, brauzer ularni eslab turadi. Canvas — bu oddiy doska: har kadrda o'chirib, hammasini qaytadan chizasiz. Aynan shuning uchun tez — brauzer hech narsani eslab turmaydi.

Ikkita qator kod

Canvas bilan ishlash butunlay ikkita obyektdan iborat

Boshlash

// 1. HTML da maydon
<canvas id="cv" width="800" height="400"></canvas>

// 2. JS da "qalam" olish
var cv  = document.getElementById('cv');
var ctx = cv.getContext('2d');

// 3. Chizish
ctx.fillStyle = '#FF1100';
ctx.fillRect(100, 50, 40, 40);   // x, y, w, h

Eng ko'p ishlatiladigan 5 ta amal

  • fillRect(x,y,w,h) — to'ldirilgan to'rtburchak.
  • clearRect(0,0,W,H) — butun ekranni o'chirish.
  • fillStyle — keyingi chiziqlar rangi.
  • fillText(s,x,y) — matn (hisob, FPS).
  • arc(x,y,r,0,7) — doira (o'q, to'p, zarra).

⚠️ Koordinata tizimi maktabdagidan boshqacha

Canvas da (0,0) yuqori chap burchakda, va Y pastga o'sadi. Ya'ni y = 300 — bu y = 100 dan pastroq. Shuning uchun sakrash y ni kamaytiradi: vy = -13. Bu eng ko'p uchraydigan chalkashlik.

Har qanday o'yinning yuragi

O'yin tsikli — sekundiga 60 marta takrorlanadigan 3 qadam

1 · CLEAR

Ekranni butunlay o'chirish. Agar bu qadamni tashlab ketsangiz, qahramon o'zidan iz qoldiradi — ba'zan bu qasddan effekt, lekin odatda xato.

2 · UPDATE

Hech narsa chizilmaydi! Faqat raqamlar o'zgaradi: pozitsiya, tezlik, hisob, dushman holati. Bu — o'yinning miyasi.

3 · DRAW

Hech narsa hisoblanmaydi! Faqat joriy holat chiziladi. Bu — o'yinning ko'zi. Ikkovini aralashtirmaslik — professional kodning asosiy qoidasi.

Kodda

function loop(time){
  ctx.clearRect(0, 0, W, H);   // 1 CLEAR
  update();                    // 2 UPDATE — faqat raqamlar
  draw();                      // 3 DRAW  — faqat chizish
  requestAnimationFrame(loop); // o'zini qayta chaqiradi
}
requestAnimationFrame(loop);   // birinchi kadr
setInterval nega yomon

requestAnimationFrame vs setInterval

❌ setInterval(loop, 16)

  • Brauzer ekranni qachon yangilashini bilmaydi — kadrlar monitordan ajralib qoladi (tearing, silkinish).
  • Vkladka fonga o'tsa ham ishlashda davom etadi va batareyani yeydi.
  • 16 ms — bu kafolat emas, bu iltimos. Brauzer kechiktirishi mumkin.

✅ requestAnimationFrame(loop)

  • Brauzer o'zi chaqiradi — aynan ekran yangilanishidan oldin. Kadrlar monitor bilan sinxron.
  • Fon vkladkasida avtomatik to'xtaydi — batareya tejaladi.
  • 144 Gts monitorda 144 FPS beradi, 60 Gts da — 60. O'zi moslashadi.

Lekin shu yerda tuzoq bor

Agar RAF turli kompyuterda turli tezlikda ishlasa — demak o'yin ham turli tezlikda ketadi! Kuchli kompyuterda qahramon uchadi, zaifida sudraladi. Keyingi slayd shu muammoni yechadi.

Darsning eng muhim tushunchasi

Delta Time — o'yin har kompyuterda bir xil tezlikda ketishi uchun

❌ Delta Time siz

hero.x += 5;   // har KADRDA 5 piksel

// 60 FPS -> 300 piksel/sek
// 30 FPS -> 150 piksel/sek  (2x sekin!)
// 144 FPS -> 720 piksel/sek (2.4x tez!)

// Bir xil kod, uch xil o'yin.

✅ Delta Time bilan

hero.x += 300 * dt;  // har SONIYADA 300 piksel

// dt = o'tgan kadrdan beri o'tgan vaqt
// 60 FPS  -> dt = 0.016 -> 4.8 px/kadr
// 30 FPS  -> dt = 0.033 -> 10 px/kadr
// 144 FPS -> dt = 0.007 -> 2.1 px/kadr

// Turli kadr, BIR XIL tezlik.

dt qanday hisoblanadi

var oldingi = 0;
function loop(vaqt){            // RAF vaqtni o'zi beradi (ms)
  var dt = (vaqt - oldingi) / 1000;   // soniyaga o'tkazish
  oldingi = vaqt;
  if (dt > 0.1) dt = 0.1;       // vkladka qaytganda sakrashni cheklash
  update(dt);
  requestAnimationFrame(loop);
}
Pozitsiya, tezlik, tezlanish

Butun o'yin fizikasi — uchta qator

Uchta qator

// 1. Tezlanish tezlikni o'zgartiradi
hero.vy += GRAVITY * dt;

// 2. Tezlik pozitsiyani o'zgartiradi
hero.y  += hero.vy * dt;

// 3. Yer to'xtatadi
if (hero.y > FLOOR) {
  hero.y = FLOOR;
  hero.vy = 0;
  hero.onGround = true;
}

Bu fizika darsidagi formulaning o'zi

  • Tezlanish (gravitatsiya) tezlikni oshiradi — a → v.
  • Tezlik joyni o'zgartiradi — v → s.
  • Sakrash — bu vy = -JUMP, ya'ni bir zumlik yuqoriga tezlik. Qolganini gravitatsiya qiladi.
  • Balandlikni oshirish uchun JUMP ni emas, GRAVITY ni kamaytirish ham mumkin — oy effekti.
AABB

To'qnashuv — bu to'rtta taqqoslash, boshqa hech narsa

AABB nima

Axis-Aligned Bounding Box — "o'qlarga parallel chegaraviy to'rtburchak". Kompyuter qahramonni va dushmanni rasm sifatida ko'rmaydi — u ikkita ko'rinmas to'rtburchakning koordinatalarini taqqoslaydi.

To'rtta shart

function toqnashdi(a, b){
  return a.x < b.x + b.w &&
         a.x + a.w > b.x &&
         a.y < b.y + b.h &&
         a.y + a.h > b.y;
}

// Bittasi ham false bo'lsa — to'qnashuv YO'Q

🎮 Stendda ko'ring

Hitbox tugmasini bosing — ekranda ko'rinmas to'rtburchaklar chiziladi. Siz darhol tushunasiz: o'yinda "tegmaganday tuyuldi, lekin jon ketdi" holati hitbox rasmdan kattaroq bo'lgani uchun sodir bo'ladi.

FPS nega tushadi

Kadr 16 millisekundga sig'ishi kerak

60 FPS = 16.6 ms

Sekundni 60 ga bo'lsangiz — 16.6 ms chiqadi. Update va Draw shu vaqtga ikkovi birga sig'ishi kerak.

Nima vaqtni yeydi

Har kadrda yangi obyekt yaratish, fillText ni yuzlab marta chaqirish, kerak bo'lmagan narsalarni chizish (ekrandan tashqarida).

Qanday o'lchanadi

Stendda kadr vaqti grafigi bor. Yashil zona — 16 ms ichida. Qizil chiziqlar — kechikkan kadrlar. Zarralar sonini oshirib, grafik qizarishini ko'ring.

Laboratoriya · 10 daqiqa

4 ta sinov: lab/index.html ni oching

1 · Delta Time isboti

FPS ni 15 ga tushiring. dt: O'CHIQ da qahramon sekinlashadi. dt: YONIQ da — tezlik o'zgarmaydi. Ikkala o'lchovni yozing.

2 · Hitbox

Hitbox ni yoqing. Qahramonni to'pga sekin yaqinlashtiring va to'qnashuv aynan qachon qayd etilishini kuzating.

3 · Oy effekti

Gravitatsiya ni 300 gacha tushiring, Sakrash ni o'zgartirmang. Sakrash balandligi qanday o'zgardi? Sababini yozing.

4 · FPS byudjeti

Zarralar slayderini oshiring. Kadr vaqti 16 ms dan oshgan nuqtadagi zarralar sonini toping va yozing.

Tayyor promptlar

AI bilan dvigatelni tushunish

Nusxa oling

1) Объясни разницу между setInterval и
   requestAnimationFrame для игрового цикла.
   Приведи пример, когда setInterval ломает игру.

2) У меня hero.x += 5 в игровом цикле. Перепиши
   через delta time так, чтобы скорость была
   300 пикселей в секунду. Объясни каждую строку.

3) Напиши функцию AABB-столкновения двух
   прямоугольников на JavaScript и объясни,
   почему нужны именно 4 сравнения.

Javobni qanday tekshirasiz

  • AI bergan dt kodini stenddagi qiymatlar bilan solishtiring — raqamlar mos kelishi kerak.
  • AI ba'zan dt ni millisekundda qoldiradi (1000 ga bo'lishni unutadi) — bu klassik xato. Tekshiring!
  • "Ishlaydi" degani "to'g'ri" degani emas. O'lchang.
Uy vazifasi va baholash

Uy vazifasi: dvigatel o'lchovlari hisoboti (10 ball)

Nima qilish kerak

  • Varaqadagi 4 sinov jadvalini to'liq to'ldiring.
  • O'yin tsiklining 3 qadamini o'z so'zingiz bilan yozing.
  • Delta Time nima uchun kerakligini bitta gap bilan tushuntiring.
  • Keyingi dars uchun: o'z arkadangiz uchun g'oya yozing (nomi, qahramon, maqsad).

Baholash mezoni

  • 4 sinov jadvali (raqamlar bilan) — 4 ball
  • O'yin tsiklining 3 qadami — 2 ball
  • Delta Time izohi — 2 ball
  • Arkada g'oyasi — 2 ball
Target International SchoolTarget International School Введение 1 / 1 0–3