O'yin Turniri va Veb-Deploy: Lokal Dasturdan Global Internetgacha
Siz animatsiyalar, tovushlar, hodisalar va LocalStorage xotirasiga ega ajoyib o'yin yaratdingiz. Ammo hozircha u faqat o'z kompyuteringizda yashamoqda. Bugun biz o'yinlarimizni Vercel / GitHub Pages orqali butun dunyoga e'lon qilamiz, QR kod yaratib smartfonlarda o'ynaymiz va katta sinf turnirini o'tkazamiz!
To'liq O'yin Steki: 2 Hafta Ichida Nimalarni Birlashtirdik?
1. CSS Grid & Flex
Moslashuvchan o'yin maydoni va tugmalar paneli.
2. Hodisalar (Events)
`click`, `keydown` va `Date.now()` vaqt hisobi.
3. AI Debugging
0 ta xato: Syntax, Runtime va Logic to'liq tozalangan.
4. LocalStorage
O'yin rekordlari F5 bosilganda ham o'chib ketmaydi.
Nega `localhost:5500` Do'stingiz Telefonida Ochilmaydi?
Localhost (127.0.0.1) Nima?
Localhost so'zma-so'z 'Aynan shu kompyuter' deganidir.
Siz `http://127.0.0.1:5500` ni ochganingizda, brauzer o'z xotirasi bilan gaplashadi. Do'stingiz bu havolani yozsa, u o'zining bo'sh kompyuteriga murojaat qiladi va xato oladi!
Global O'ynash Uchun Nima Kerak?
Bizga Global Veb-Server (Deploy) kerak:
1. Butun dunyo bo'ylab kecha-yu kunduz ishlaydigan bulutli server.
2. Har qanday telefonda ochiladigan umumiy URL havola.
3. Yashil qulflangan xavfsiz HTTPS protokoli.
Deploy (Deployment): Loyihaning Internetda Tug'ilishi
Deploy So'zi Nimani Bildiradi?
Deploy (Деплой) — bu tayyor kod fayllarini internetdagi ommaviy serverga yuklash jarayoni bo'lib, shundan so'ng saytga hamma to'g'ridan-to'g'ri havola orqali kira oladi.
Zamonaviy IT da dasturchilar statik o'yinlar uchun: Vercel, GitHub Pages platformalaridan foydalanishadi.
Platformalar Qiyosi
| Platforma | Deploy vaqti | Qulayligi |
|---|---|---|
| Vercel | ~20 soniya | Drag-and-Drop yoki 1 ta buyruq |
| GitHub Pages | ~1 daqiqa | Git ombori (repository) orqali |
Vercel da O'yinni 3 Qadamda E'lon Qilish
1. Papka Tayyorlash
Papka ichida albatta `index.html` fayli bo'lishi shart (saytning bosh eshigi).
index.html2. Vercel ga Yuklash
Papkani vercel.com oynasiga sudrab tashlang yoki `npx vercel` buyrug'ini bering.
Drag & Drop3. Jonli Manzil Olish
15 soniyada tayyor domen: `cyber-reflex.vercel.app` faollashadi!
https://*.vercel.appYashil Qulf: Nega Saytga HTTPS (SSL) Kerak?
Oddiy HTTP vs HTTPS
• HTTP: ma'lumotlar ochiq matn ko'rinishida uzatiladi. Brauzer 'Xavfli sayt' deb ogohlantiradi.
• HTTPS: butun ma'lumotlar shifrlanadi (SSL). Brauzerda xavfsiz qulf belgisi chiqadi.
O'yinlar Uchun Nega Muhim?
Zamonaviy smartfonlar HTTPS bo'lmagan saytlarda tovush (Audio), tebranish va to'liq ekran rejimini bloklaydi!
Vercel yoki GitHub Pages ga deploy qilganingizda, xavfsizlik sertifikati avtomatik taqdim etiladi.
QR-kod: O'yinni Telefondan Bir Zumda Ochish
QR-kod Qanday Ishlaydi?
QR (Quick Response — Tezkor Javob) uzun havolani geometrik qora-oq matritsaga aylantiradi.
Har qanday telefon kamerasi 0.1 soniyada bu naqshni taniydi va o'yinni darhol mobil brauzerda ochib beradi!
Turnir Uchun Foydasi
1. Telefonda uzun harflarni terib o'tirish shart emas.
2. Partadoshingiz kamerani ekranga tutadi — tamom!
3. Bir zumda do'stlaringiz siz yaratgan o'yinda rekord qo'yishni boshlaydi.
Game Jam Qoidalari: Halollik, Tezlik va Emotsiya
1. Teng Shartlar
Har bir raund roppa-rosa 30 soniya davom etadi. Natija HUD da ko'rinadi.
2. Halollik
Turnir vaqtida DevTools orqali ballni qo'lda o'zgartirish taqiqlanadi!
3. Qog'ozga Yozish
Raqibingiz to'plagan ballingizni ko'rib, varaqangizga tasdiq yozadi.
O'yinni Qanday Baholaymiz? 4 Professional Ustun
1. O'yin Mexanikasi (3 ball)
O'ynash qiziqmi? Nishonga tegganda kombo ko'payadimi? Boshqaruv qulaymi?
2. Xatosiz Barqarorlik (3 ball)
Konsolda qizil xatolar YO'Q! F5 bosilganda rekordlar saqlanib qoladi.
3. Dizayn va Tovush (2 ball)
Chiroyli ranglar, kiber-uslub, musiqiy effektlar va qulay shriftlar.
4. Deploy va QR-kod (2 ball)
O'yin QR-kod orqali smartfonda ochiladi va to'liq ekranda ishlaydi.
Playtesting: Partadoshga Qanday To'g'ri Fikr Bildiramiz?
❌ Noto'g'ri Fikr (Foydasiz)
'Menga yoqmadi', 'O'yining zerikarli ekan'.
Bunday so'zlar dasturchiga xatosini to'g'rilashga yordam bermaydi, faqat kayfiyatni tushiradi.
✅ Professional Fikr (Foydali)
"Tovush effektlari zo'r chiqibdi! Lekin smartfonda nishon juda kichik, barmog'im sig'mayapti. O'lchamini 50px dan 65px ga kattalashtirsang bosish ancha qulay bo'lardi".
Aniq muammoni ayting va unga yechim taklif qiling!
Cyber Reflex Championship: Turnir Boshlandi!
1. O'yinni Ochish
`game/index.html` ni brauzerda oching.
2. 30 Soniya Reaksiya
Qizil va oltin nishonlarni bosing, kombongizni oshiring!
3. Fikr Almashish
Partadoshingiz o'yinini o'ynab, unga baho qo'ying.
classes/7-8-sinf/2-hafta/12-dars-oyun-turniri-va-deploy/game/index.html
2-Hafta Yakunlandi! Oldinda 3-Hafta: Canvas Dvigateli
2-Haftada Nimaga Erishdik?
Siz haqiqiy veb-muhandis poydevorini qurasiz: Flex/Grid, DOM hodisalari, millisekundlar hisobi, xatolarni ovlash (debugging), doimiy LocalStorage va QR-kodli deploy!
3-Haftada: HTML5 Canvas va Fizika!
13 va 14-darslar: Tugmalardan haqiqiy 2D Canvas grafikasiga o'tamiz! `requestAnimationFrame` tsikli, delta time, gravitatsiya, to'qnashuvlar va aqlli dushmanlar!
Kirish
0–3