Kripto-kazino
Torrent Gear
HTML5 o’yinlarining krossbrauzer mosligi: test matritsasi
1) Nima uchun HTML5 o’yinlarida krossbrauzerlik «og’riyapti»?
O’yinlar platformaning deyarli barcha qatlamlariga ta’sir qiladi: grafika (Canvas/WebGL/WebGPU), taymerlar va oqimlar (RAF/Workers), tovush (WebAudio/Media policies), kirish (keyboard/pointer/touch/gamepad), tarmoq va keshlar (SW/Cache/IndexedDB), integratsiya (fullscreen/orientation/PWA). Dvigatellar - Chromium (Chrome/Edge/Opera/Android), WebKit (Safari/macOS, iOS/iPadOS barcha brauzerlarda), Gecko (Firefox). Bundan tashqari, energiya tejamkorligi, orqa fon tablari, xotira limitlari va avtoplay siyosati farqlari.
2) Qo’llab-quvvatlanadigan muhit: maqsadli matrisa
Brauzerlar/OS (minimal versiyalar - misol, SLAni almashtiring):- Desktop: Chrome/Edge 116+, Firefox 115+, Safari 16+ (macOS 12+).
- Mobile: Chrome Android 116+ (Android 9+), Samsung Internet 21+, Safari iOS/iPadOS 16+.
- WebView: Android WebView 116 +, iOS - faqat WebKit.
- PWA (oʻrnatish): Chromium desktop/mobile, Safari iOS 16. 4 + (Cheklovlar bilan Add to Home Screen).
- Past (mobil budjet, 2 GB RAM)
- O’rta (mobil/ultrabuklar, 4-8 GB RAM)
- Yuqori (desktop/konsumer GPU, 8-16 + GB)
3) Katta test matritsasi (shablon)
Trekeringizda haqiqiy jadvalni shakllantiring. Quyida - o’lchash kerak bo’lgan asosiy bloklar va maqomlar (OK/Partial/N/A).
3. 1 Grafiklar
3. 2 Audio va media siyosati
3. 3 Kirish va interfeys
3. 4 Unumdorlik va energiyani tejash
3. 5 Saqlash/oflayn/tarmoq
4) Qo’l ssenariylarining minimal to’plami (Smoke)
1. Birinchi ishga tushirish: assetalar, splash, <3 darajasini oʻrta sinfda boshlash.
2. Kirish: tach/sichqon/klava/geympad, ko’p barmoqlar, ushlab turish, sviplar.
3. Ekran: to’liq ekran, yo’nalishni blokirovka qilish, safe-area (iPhone).
4. Audio: foydalanuvchi imo-ishorasidan keyingi birinchi nota, mute/unmute, musiqa miksi/FX.
5. WebGL: kontekstni yoʻqotish/tiklash (simulyatsiya qilish), soyalar/shaderlar/masshtab.
6. Hayot sikli: burish/yoyish, qoʻngʻiroq/ogohlantirish, orqa fonda tablar.
7. Saqlash: IndexedDB/LocalStorage’da progress/moslamalar, qayta ishga tushirilgandan keyin tiklash/oflayn.
8. Tarmoq: 3G throttle/yuqori RTT, tarmoqni yoʻqotish, retra, SW orqali keshlash.
9. PWA: oʻrnatish (Chromium/iOS), piktogrammalar, offline sahifasi, versiyani yangilash.
10. Uzoq sessiya: 20-30 daqiqa (FPS/heap barqaror).
5) Avtomatlashtirish: qanday va qanday
Playwright (tavsiya etiladi): xoch dvigatel, mobil emulyatsiyalar, WebKit drayver, video/treyslar.
Cypress: tezkor dev-sikl, lekin WebKit/mobil - cheklangan.
WebDriver/Selenium: bulutlar bilan integratsiya.
Bulutlar: BrowserStack, Sauce Labs - real qurilmalar va iOS Safari.
Profillash: Chrome DevTools Protocol, Safari Web Inspector (Remote), Firefox Profiler.
Perf skriptlar: k6/browser RUM oʻxshash assetalarni yuklash uchun.
Maslahat: har bir PR uchun avtotestlarning «paketini» 3-5 daqiqa (smoke) ushlab turing: yuklash, bitta o’yin sikli, pauza, yo’nalishni o’zgartirish, saqlanishini tekshirish.
6) Unumdorlik: maqsadli metrika va telemetriya
FPS: barqaror 60 fps (yoki ProMotion’da 120) - frame pacing’ni o’rnating, nafaqat o’rtacha.
Frame budget: 16. 7 ms (yoki 8. 3 ms) da update + render, GC <2-3 ms.
Input latency: <80 ms mobayl, 50 ms desktop.
Time-to-First-Frame (TTFF): < 1. 5 s (assetalar yuklangandan keyin).
Heap o’sish: 20 daqiqalik sessiyada + 10% dan ko’p bo’lmagan; runaway allocations mavjud emas.
Audio latency: <100 ms roundtrip.
RUM oʻrnating: FPS, TTFF, heap, WebGL context lost, rendering xatolarini’browser/os/device’orqali yuboring.
7) Tez-tez nomuvofiqliklar va
7. 1 Grafik/render
HiDPI Canvas: mantiqiy oʻlcham = CSS px, fizik =’css devicePixelRatio’.
WebGL konteksti lost: tinglang’webglcontextlost/webglcontextrestored’, qayta ishga tushirish uchun resurslarni saqlang.
To’qimalar/sheyderlar: Universal bo’lmagan kengaytmalardan qoching; ’OES _ texture _ float’,’EXT _ color _ buffer _ float’va fallback’ni tekshiring.
WebGPU: feature-flag WebGL2 yoʻlni fallback sifatida saqlang.
7. 2 Audio/avtoplay
AudioContext dasturini foydalanuvchi imo-ishorasi (’tap/click’) orqali ishga tushiring va bayroqni saqlang.
iOS’da burilish/oʻtishda suspendga tayyorlaning.
7. 3 Kirish/imo-ishoralar
Hodisa tinglovchilarini andoza passive qiling; bu yerda’preventDefault ()’- passive oʻchirilishi.
Pointer Events + Touch Events - ikki marta ishlov berishdan qoching; kirish qatlamini abstrakt qiling.
Gamepad: navigatorni tekshiring. getGamepads ()’uchun RAF tugmalarini koʻrsating.
7. 4 Fullscreen/Orientation/Safe-Area
iOS uchun’env (safe-area-inset-)’ni hisobga oling, kanvasga padding qoʻshing/Overlay UI.
Orientation lock faqatgina user gesture; ekranni aylantirish tugmasi mavjud.
7. 5 Storiji/oflayn
IndexedDB: operatsiyalarni vaqt/retrajga aylantiring; iOS kvotalari kichik - engil saqlang.
Service Worker: assetalar uchun’Stale-While-Revalidate’strategiyasi; vijdonan nogironlik versiyalari (kontent-hash).
LocalStorage shaxsiy rejimlarda mavjud boʻlmasligi mumkin - ogohlantirish bilan xotirani buzing.
7. 6 Taymer/fon
Taymerlar fonida 1 s gacha va undan ko’p bo’ladi. Qiyin mantiqni to’xtating, o’yinni to’xtating.
Intervallar oʻrniga page visibility/’ visibilitychange’va event-driven yangilanishlarini kiriting.
8) Krossbrauzer uchun payplayn yig’ish
Transpilatsiya: TypeScript/Babel’es2020’targetlari (yoki eski WebViews uchun pastroq).
Polifillar: faqat fich detection (feature detection) bo’yicha, UA bo’yicha emas.
Assetalar: sprayt-listlar, fallback formatli to’qimalar (WebP/PNG), audio (AAC/OGG/Opus).
Kodni ajratish: lazy-chunks/o’yin bo’lmagan panellar uchun.
Siqish: Brotli/Zstd; HTTP/2/3; CDN immutable versiyasiga ega.
Feature flags: WebGPU/OffscreenCanvas/Threads - oq roʻyxatga kiriting.
9) Chek-varaqlarning shablonlari
9. 1 Smartfon (Android/Chrome, iPhone/Safari)
- Touch + multi-touch; Imo-ishoralar sahifani «tortmaydi»
- Fullscreen va orientatsiya; safe-area to’g "ri
- Tovushdan keyingi birinchi tovush; mute ishlamoqda
- FPS ≥ 50 (past darajali), «yirtilgan» kadrsiz
- Qayta ishga tushirilgandan keyin taraqqiyotni saqlash/tiklash
- Oflayn sahna/SW qayta ishga tushirish
- Tizim overleylarini chaqirish (kirish qo’ng’irog’i) → to’g’ri pauza
9. 2 Ish stoli (Windows/macOS)
- Sichqon + g’ildirak + klaviatura, IME
- Geympad (XInput/Generic)
- 60/120 Hz monitorlar: barqaror frame pacing
- Alt-Tab/bir nechta monitorlar/fullscreen/windowed
- Xotira
10) Kod namunalari (parchalar)
Canvas с HiDPI:js function resizeCanvas(canvas) {
const dpr = Math. min(window. devicePixelRatio 1, 2);
const { clientWidth:w, clientHeight:h } = canvas;
canvas. width = Math. floor(w dpr);
canvas. height = Math. floor(h dpr);
const ctx = canvas. getContext('2d');
ctx. setTransform(dpr, 0, 0, dpr, 0, 0);
}js const gl = canvas. getContext('webgl', { preserveDrawingBuffer:false });
canvas. addEventListener('webglcontextlost', e => { e. preventDefault(); paused = true; });
canvas. addEventListener('webglcontextrestored', () => { reloadResources(); paused = false; });js let audioUnlocked = false;
window. addEventListener('pointerdown', () => {
if (!audioUnlocked) {
const ctx = new AudioContext();
const b = ctx. createBuffer(1, 1, 22050);
const s = ctx. createBufferSource();
s. buffer = b; s. connect(ctx. destination); s. start(0);
audioUnlocked = true;
}
}, { once:true, passive:true });js document. addEventListener('visibilitychange', () => {
if (document. hidden) pauseGame();
else resumeGame();
});11) Tavakkalchiliklarni boshqarish va ustuvorlik
iOS uchun Murfi qonuni: matritsangizdagi iOS ning har bir kichik versiyasini sinab ko’ring - regressiya tez-tez sodir bo’ladi.
WebView OEM: Eskirgan WebView Android qurilmalari - alohida xavf qatlami («greylist» moslamalarini kiriting).
Funksional bayroqlar: muammoli fichlarni brendlar/uchuvchi bozorlar bo’yicha yoqing.
Rollout: 1% → 10% → 50% → 100% RUM-geytlar bilan (FPS, crash, TTFF).
12) Kuzatuv va bud-reportlar
Har bir xato hisobotiga quyidagilarni kiriting:’ua’,’browser version’,’os’,’device’,’gpu/renderer’,’memory’,’fps’,’logs (WebGL/WebAudio xatolari)’,’steps’,’repro video’.
crash dumps (JS/resurs xatolari),’context lost’,’audio unlock failed’hodisalarini avtomatik joʻnatish.
Dashbordlar: brauzerlar/qurilmalar boʻyicha FPS, oʻrtacha TTFF, context lost ulushi, IndexedDB xatolari, SW oflayn xitlari.
13) Matritsaning yakuniy shabloni (CSV-baliq)
Platform,Browser,Version,Feature,Scenario,Expected,Status,Notes
Android,Chrome,116+,WebGL2,Context lost/restore,State restored,OK, iOS,Safari,16. 6,Audio,First sound on tap,Plays,PARTIAL,Silent switch affects
Desktop,Firefox,115+,Fullscreen,Enter/Exit,No layout jump,OK, Android,WebView,116+,Storage,IndexedDB quota,Save 5MB,PARTIAL,Quota lower on device X iOS,Safari,16. 4+,PWA,Install & relaunch,State persisted,OK, ```
---
14) Ishlab chiqarishga tayyorlik chek-varaqasi
[] Brauzer/versiyalar/qurilmalar matritsasi va yangilanish SLA matritsasi oʻrnatilgan.
[] Avtotestlarning smoke-to’plami (Playwright) PR va nightly orqali ishga tushiriladi; video/treys hisobotlari.
[] FPS/TTFF/heap/WebGL RUM telemetriyasi - brauzer/qurilmalar kesimidagi xatolar.
[] Folbeklar: WebGL1 ← WebGL2 ← WebGPU; Audio unlock; Pointer/Touch abstraksiya.
[] Qayta ishlangan lifecycle/visibility, pause/resume, offline, context lost.
[] Barqaror saqlash (IndexedDB + degradatsiya), assetalar versiyasi SW/CDN orqali immutable.
[] Real qurilmalardagi profillar (iOS/Android) va 60/120 Hz.
[] Ma’lum cheklovlar hujjatlari (iOS avtopley, IDB kvotalari, orientation).
[] Muammoli hodisalar uchun orqaga qaytish/feature-flags rejalari (WebGPU/Threads).
[] O’yindagi fikr-mulohazalar kanali (feedback + log-damp).
---
Xulosa
HTML5 o’yinlarining krossbrauzer mosligi bitta Safari chek qutisi emas, balki intizom: qattiq platforma matritsasi, o’lchanadigan metriklar (FPS/TTFF/heap), haqiqiy qurilmalardagi avtotestlar, grafika/audio/kirish folbeklari va ehtiyotkorlik oflayn va saqlash bilan ishlash. Testning barqaror payplinini kiriting, RUMni to’plang va bayroqlar orqasida chichlarni saqlang, shunda o’yin Chrome, Safari va Firefox, telefon va ish stolida bir xil silliq va oldindan aytib bo’ladi.