Вақте ки шумо контроллерро васл мекунед, шумо тугмаҳоро маш мезанед, чӯбҳоро ҳаракат медиҳед, триггерҳоро мекашед… ва ҳамчун таҳиякунанда, шумо ҳеҷ яке аз онҳоро намебинед. Браузер онро мегирад, албатта, аммо агар шумо рақамҳоро дар консол сабт накунед, он ноаён аст. Ин дарди сар бо Gamepad API аст. Он солҳост ва он воқеан хеле пурқувват аст. Шумо метавонед тугмаҳо, чӯбҳо, триггерҳо, корҳоро хонед. Аммо аксари одамон ба он даст намезананд. Чаро? Зеро ҳеҷ гуна фикру мулоҳиза вуҷуд надорад. Дар абзорҳои таҳиягар панел нест. Ягон роҳи возеҳ барои фаҳмидани он ки контроллер ҳатто он чизеро, ки шумо фикр мекунед, иҷро мекунад ё не. Чунин ҳис мекунад, ки кӯр парвоз мекунад. Ин ба ман кофӣ буд, то як асбоби каме созам: Gamepad Cascade Debugger. Ба ҷои он ки ба баромади консол нигоҳ кунед, шумо манзараи зинда ва интерактивии контроллерро ба даст меоред. Чизеро пахш кунед ва он дар экран реаксия мекунад. Ва бо CSS Cascade Layers, сабкҳо муташаккил боқӣ мемонанд, бинобар ин ислоҳ кардани он тозатар аст. Дар ин паём, ман ба шумо нишон медиҳам, ки чаро ислоҳ кардани контроллерҳо ин қадар дард аст, чӣ гуна CSS барои тоза кардани он кӯмак мекунад ва чӣ гуна шумо метавонед як ислоҳкунандаи визуалии такрорӣ барои лоиҳаҳои худ созед.
Ҳатто агар шумо қодир бошед, ки ҳамаи онҳоро сабт кунед, шумо зуд бо спамҳои консолии хонданашаванда дучор мешавед. Масалан: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Метавонед бигӯед, ки кадом тугма пахш шудааст? Шояд, аммо танҳо пас аз шиддат гирифтани чашмҳо ва гум кардани чанд вуруд. Ҳамин тавр, не, вақте ки сухан дар бораи хондани воридот меравад, ислоҳкунӣ осон нест. Мушкилоти 3: Набудани сохтор Ҳатто агар шумо як визуализатори зудро якҷоя кунед, услубҳо метавонанд зуд бесарусомон шаванд. Ҳолатҳои пешфарз, фаъол ва дебаг метавонанд ба ҳам мувофиқат кунанд ва бидуни сохтори равшан, CSS-и шумо ноустувор ва дароз кардан душвор мешавад. CSS Cascade Layers метавонад кӯмак кунад. Онҳо услубҳоро ба "қабатҳо", ки аз рӯи афзалият тартиб дода шудаанд, гурӯҳбандӣ мекунанд, аз ин рӯ шумо мубориза бо мушаххасот ва тахмин карданро бас мекунед: "Чаро услуби ислоҳи ман нишон намедиҳад?" Ба ҷои ин, шумо нигарониҳои алоҳида доред:
Асос: Стандарти контроллер, намуди аввалия. Фаъол: Нишондиҳандаҳо барои тугмаҳои пахшшуда ва чӯбҳои интиқолшуда. Debug: Объектҳо барои таҳиягарон (масалан, хондани рақамӣ, роҳнамо ва ғайра).
Агар мо мувофиқи ин қабатҳоро дар CSS муайян мекардем, мо чунин медоштем: /* аз пасттарин ба баландтарин афзалият */ @базаи қабат, фаъол, ислоҳ;
@базаи қабат { /* ... */ }
@қабат фаъол { /* ... */ }
@layer debug { /* ... */ }
Азбаски ҳар як қабат пешгӯинашаванда аст, шумо ҳамеша медонед, ки кадом қоидаҳо ғолиб меоянд. Ин пешгӯӣ хатогиро на танҳо осонтар мекунад, балки воқеан идорашаванда аст. Мо мушкилот (вориди ноаён, бесарусомон) ва равишро (деблагери визуалӣ бо қабатҳои Cascade сохта шудааст) баррасӣ кардем. Ҳоло мо раванди зина ба зина барои сохтани ислоҳкунандаро меомӯзем. Консепсияи Debugger Роҳи осонтарини намоён кардани вуруди пинҳон ин танҳо дар экран кашидани он аст. Ин он чизест, ки ин ислоҳкунанда мекунад. Тугмаҳо, триггерҳо ва джойстикҳо ҳама визуалӣ мегиранд.
A пахш кунед: Доира равшан мешавад. Асбобро тела диҳед: Доира дар гирду атроф лағжиш мекунад. Триггерро нисфи роҳ кашед: Бар нисфи роҳ пур мешавад.
Ҳоло шумо ба 0 ва 1 нигоҳ намекунед, балки воқеан реаксияи контроллерро мустақиман тамошо мекунед. Албатта, вақте ки шумо ба ҷамъ кардани ҳолати нобаёнӣ, пахшшуда, маълумоти дебаг, шояд ҳатто реҷаи сабт шурӯъ кунед, CSS калонтар ва мураккабтар мешавад. Дар он ҷо қабатҳои каскадӣ муфиданд. Дар ин ҷо як мисоли ҷудошуда: @базаи қабат { .тугма { замина: #222; радиуси сарҳад: 50%; паҳно: 40px; баландӣ: 40px; } }
@қабат фаъол { .тугма. пахш карда шуд { замина: #0f0; /* сабзи дурахшон */ } }
@layer debug { .тугма :: баъд аз { мундариҷа: attr(маълумот-арзиш); андозаи шрифт: 12px; ранг: #fff; } }
Тартиби қабат муҳим аст: асос → фаъол → дебаг.
пойгоҳ контроллерро ҷалб мекунад. фаъол ҳолатҳои фишорро идора мекунад. debug ба overlays мепартояд.
Ин тавр вайрон кардани он маънои онро дорад, ки шумо бо ҷангҳои аҷиби мушаххас мубориза намебаред. Ҳар як қабат ҷои худро дорад ва шумо ҳамеша медонед, ки чӣ ғолиб меояд. Сохтани он Биёед аввал дар экран чизе гирем. Он набояд зебо бошад - танҳо вуҷуд доштан лозим аст, то мо чизе барои кор бошем.
Debugger Cascade Gamepad
Ин аслан танҳо қуттиҳост. Ҳаяҷоновар нест, аммо он ба мо дастаҳое медиҳад, ки баъдтар бо CSS ва JavaScript истифода барем. Хуб, ман дар ин ҷо қабатҳои каскадиро истифода мебарам, зеро вақте ки шумо штатҳои бештар илова мекунед, он чизҳоро ба тартиб меандозад. Ин аст як гузариши ноҳамвор:
/* =================================== КАСКАДИ ҚАТЪАТҲО Масъалаҳои фармоиш: асос → фаъол → дебаг ===================================== */
/* Тартиби қабатро пешакӣ муайян кунед */ @базаи қабат, фаъол, ислоҳ;
/* Қабати 1: Услубҳои асосӣ - намуди пешфарз */ @базаи қабат { .тугма { замина: #333; радиуси сарҳад: 50%; паҳно: 70px; баландӣ: 70px; намоиш: flex; асоснок кардани мазмун: марказ; ҳамвор кардани ашё: марказ; }
.pause { паҳно: 20px; баландӣ: 70px; замина: #333; намоиш: inline-block; } }
/* Қабати 2: Ҳолатҳои фаъол - тугмаҳои пахшшударо идора мекунад */ @қабат фаъол { .button.active { замина: #0f0; /* Ҳангоми пахш кардан сабзи дурахшон */ табдил додан: миқёс (1.1); /* Тугмаро каме калон мекунад */ }
.pause.active { замина: #0f0; табдил додан: scaleY(1.1); /* Ҳангоми пахш кардан амудӣ дароз мешавад */ } }
/* Қабати 3: қабатҳои ислоҳи хатогиҳо - маълумоти таҳиякунанда */ @layer debug { .тугма :: баъд аз { мундариҷа: attr(маълумот-арзиш); /* Қимати рақамиро нишон медиҳад */ андозаи шрифт: 12px; ранг: #fff; } }
Зебоии ин равиш дар он аст, ки ҳар як қабат ҳадафи равшан дорад. Қабати асосӣ ҳеҷ гоҳ наметавонад фаъолро бекор кунад ва фаъол бошад, новобаста аз мушаххасият, ҳеҷ гоҳ хатогиҳоро бекор карда наметавонад. Ин ҷангҳои мушаххаси CSS-ро, ки одатан асбобҳои ислоҳи хатогиҳоро ба вуҷуд меоранд, нест мекунад. Ҳоло чунин ба назар мерасад, ки баъзе кластерҳо дар заминаи торик нишастаанд. Рости гап, на он қадар бад.
Илова кардани JavaScript Вақти JavaScript. Дар ин ҷо назоратчӣ воқеан коре мекунад. Мо ин корро қадам ба қадам месозем. Қадами 1: Танзими идоракунии давлатӣ Аввалан, ба мо тағирёбандаҳо лозиманд, то ҳолати ислоҳкунандаро пайгирӣ кунем: // ==================================== // ИДОРАИ ДАВЛАТ // ====================================
бигзор давида = бардурӯғ; // Пайгирӣ мекунад, ки ислоҳкунанда фаъол аст ё не бигузор рафИд; // ID requestAnimationFrame-ро барои бекоркунӣ нигоҳ медорад
Ин тағирёбандаҳо ҳалқаи аниматсияро назорат мекунанд, ки пайваста вуруди геймпадро мехонанд. Қадами 2: Гирифтани истинодҳои DOM Баъдан, мо ба ҳама унсурҳои HTML истинод мегирем, ки мо навсозӣ мекунем: // ==================================== // МАЪЛУМОТИ ЭЛСЕМЕНТИ DOM // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const status = document.getElementById("status");
Дар пеш нигоҳ доштани ин истинодҳо назар ба дархости такрории DOM самараноктар аст. Қадами 3: Иловаи бозгашти клавиатура Барои санҷиш бе контролери ҷисмонӣ, мо калидҳои клавиатураро бо тугмаҳо харита мекунем: // ==================================== // Бозгашти клавиатура (барои санҷиш бе контроллер) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // Калиди 'p' ҳарду панҷараи таваққуфро назорат мекунад };
Ин ба мо имкон медиҳад, ки UI-ро тавассути пахш кардани тугмаҳо дар клавиатура санҷем. Қадами 4: Сохтани ҳалқаи навсозии асосӣ Дар ин ҷо ҷодугарӣ рӯй медиҳад. Ин функсия пайваста кор мекунад ва ҳолати геймпадро мехонад: // ==================================== // АСОСИИ ГАМЕПАДАИ НАВОРӢ // ====================================
Функсияи updateGamepad () { // Ҳама геймпадҳои пайвастшударо гиред const gamepads = navigator.getGamepads(); агар (!gamepads) баргардад;
// Аввалин геймпади пайвастшударо истифода баред const gp = gamepads[0];
агар (gp) { // Тугмаи ҳолати навсозӣ бо иваз кардани синфи "фаъол" btnA.classList.toggle("фаъол", gp.buttons[0].фишор карда мешавад); btnB.classList.toggle("фаъол", gp.buttons[1].фишор карда мешавад); btnX.classList.toggle("фаъол", gp.buttons[2].фишор карда мешавад);
// Тугмаи таваққуфро идора кунед (индекси тугмаи 9 дар аксари контроллерҳо) const pausePressed = gp.buttons[9].фишор; pause1.classList.toggle("фаъол", pausePressed); pause2.classList.toggle("фаъол", pausePressed);
// Рӯйхати тугмаҳои дар айни замон пахшшударо барои намоиши ҳолат созед бигзор пахш карда шавад = []; gp.buttons.forEach((btn, i) => { агар (btn. пахш карда шавад)pressed.push("Тугма" + i); });
// Матни вазъро навсозӣ кунед, агар ягон тугма пахш карда шавад агар (паҳншуда. дарозӣ > 0) { status.textContent = "Фишонида шуд: " + pressed.join(", "); } }
// Давомро идома диҳед, агар ислоҳкунанда кор кунад агар (давидан) { rafId = requestAnimationFrame (updateGamepad); } }
Усули classList.toggle() синфи фаъолро вобаста ба пахш шудани тугма, ки сабкҳои қабати CSS-и моро ба вуҷуд меорад, илова мекунад ё нест мекунад. Қадами 5: Идоракунии рӯйдодҳои клавиатура Ин шунавандагони рӯйдодҳо бозгашти клавиатураро кор мекунанд: // ==================================== // ТАМОМИ ХОДИСАХОИ Клавиатура // ====================================
document.addEventListener("keydown", (e) => { агар (keyMap[e.key]) { // Мубориза бо унсурҳои як ё якчанд агар (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("фаъол")); } дигар { keyMap[e.key].classList.add("фаъол"); } status.textContent = "Тугма пахш шуд: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { агар (keyMap[e.key]) { // Ҳангоми озод кардани калид ҳолати фаъолро нест кунед агар (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("фаъол")); } дигар { keyMap[e.key].classList.remove("фаъол"); } status.textContent = "Калиди озод: " + e.key.toUpperCase(); } });
Қадами 6: Иловаи Оғоз / Қатъи назорати Ниҳоят, ба мо роҳе лозим аст, ки ислоҳкунандаро фаъол ва хомӯш кунем: // ==================================== // ГУЗАРОНИДАНИ ДОБГЕРИ ФУРӮЗАНД/ХОМУШ // ====================================
document.getElementById("toggle").addEventListener("клик кунед", () => { давидан = !давидан; // Ҳолати иҷрошударо гардонед
агар (давидан) { status.textContent = "Debugger кор мекунад..."; updateGamepad(); // Давраи навсозӣ оғоз кунед } дигар { status.textContent = "Debugger ғайрифаъол"; cancelAnimationFrame(rafId); // Давраро қатъ кунед } });
Пас, ҳа, тугмаро пахш кунед ва он медурахшад. Чубро тела диҳед ва он ҳаракат мекунад. Ана тамом. Боз як чизи дигар: арзишҳои хом. Баъзан шумо мехоҳед танҳо рақамҳоро бубинед, на чароғҳоро.
Дар ин марҳила, шумо бояд бубинед:
Назоратчии оддии экран, Тугмаҳое, ки ҳангоми муошират бо онҳо амал мекунанд ва Хониши ихтиёрии дебаг, ки индексҳои пахшшудаи тугмаро нишон медиҳад.
Барои он ки ин камтар абстракт бошад, дар ин ҷо як намоиши зуди контроллер дар экран мавҷуд аст, ки дар вақти воқеӣ вокуниш нишон медиҳад:
Ҳоло, пахшкунии Оғози сабт ҳама чизро сабт мекунад, то он даме, ки шумо Қатъи Сабтро пахш кунед. 2. Содироти маълумот ба CSV/JSON Вақте ки мо гузориш дорем, мо мехоҳем онро захира кунем.
Қадами 1: Ёвари зеркашӣ эҷод кунед Аввалан, ба мо функсияи ёрирасон лозим аст, ки зеркашии файлҳоро дар браузер идора мекунад: // ==================================== // ЁРДАМИ ЗЕРГИРИИ ФАЙЛ // ====================================
Функсияи downloadFile (номи файл, мундариҷа, навъи = "матн/ҳамвор") { // Аз мундариҷа blob эҷод кунед const blob = Blob нав([мазмун], {навъ }); const url = URL.createObjectURL(blob);
// Истиноди муваққатии зеркашӣ эҷод кунед ва онро клик кунед const a = document.createElement("a"); a.href = URL; a.download = номи файл; a.click();
// URL-и объектро пас аз зеркашӣ тоза кунед setTimeout(() => URL.revokeObjectURL(url), 100); }
Ин функсия тавассути сохтани Blob (объекти калони дуӣ) аз маълумоти шумо, тавлиди URL-и муваққатӣ барои он ва ба таври барномавӣ пахш кардани истиноди зеркашӣ кор мекунад. Тозакунӣ кафолат медиҳад, ки мо хотираро ихроҷ намекунем. Қадами 2: Идоракунии содироти JSON JSON барои нигоҳ доштани сохтори пурраи додаҳо комил аст:
// ==================================== // ЭКСПОРТ ҳамчун JSON // ====================================
document.getElementById("export-json").addEventListener("клик кунед", () => { // Санҷед, ки оё чизе барои содирот вуҷуд дорад агар (!frames.length) { console.warn("Ягон сабт барои содирот дастрас нест."); бозгашт; }
// Бо метамаълумотҳо ва чаҳорчӯбаҳои боркаш эҷод кунед const бори = { Дар сохташуда: Санаи нав ().toISOString(), чорчубахо };
// Зеркашӣ ҳамчун JSON формат файлро зеркашӣ кунед ( "gamepad-log.json", JSON.stringify(борбор, нул, 2), "ариза/json" ); });
Формати JSON ҳама чизро сохторӣ ва ба осонӣ таҳлилшаванда нигоҳ медорад, ки онро барои дубора бор кардан ба абзорҳои таҳиякунанда ё мубодила бо ҳамкасбон беҳтарин мекунад. Қадами 3: Идоракунии содироти CSV Барои содироти CSV, мо бояд маълумоти иерархикиро ба сатрҳо ва сутунҳо ҳамвор созем:
//==================================== // ЭКСПОРТ ҳамчун CSV // ====================================
document.getElementById("export-csv").addEventListener("клик кунед", () => { // Санҷед, ки оё чизе барои содирот вуҷуд дорад агар (!frames.length) { console.warn("Ягон сабт барои содирот дастрас нест."); бозгашт; }
// Сохтани сатри сарлавҳаи CSV (сутунҳо барои тамғаи вақт, ҳама тугмаҳо, ҳама меҳварҳо) const headerButtons = Frames[0].buttons.map((_, i) => btn${i}); const headerAxes = фоторамкахо[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Сохтани сатрҳои маълумоти CSV сатрҳои const = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).пайванд ("\n");
// Ҳамчун CSV зеркашӣ кунед DownloadFile("gamepad-log.csv", сарлавҳа + сатрҳо, "матн/csv"); });
CSV барои таҳлили додаҳо олиҷаноб аст, зеро он мустақиман дар Excel ё Google Sheets кушода мешавад ва ба шумо имкон медиҳад диаграммаҳо, филтр маълумот ё намунаҳои визуалӣ эҷод кунед. Ҳоло, ки тугмаҳои содирот дар дохили панел ҳастанд, шумо ду имконоти навро хоҳед дид: содироти JSON ва содироти CSV. JSON хуб аст, агар шумо хоҳед, ки журнали хомро дубора ба асбобҳои таҳияи худ партоед ё дар атрофи сохтор ҷӯед. Аз тарафи дигар, CSV мустақиман ба Excel ё Google Sheets мекушояд, то шумо метавонед воридҳоро диаграмма, филтр ё муқоиса кунед. Дар расми зерин нишон дода шудааст, ки панел бо он назорати иловагӣ чӣ гуна аст.
3. Системаи аксбардорӣ Баъзан ба шумо сабти пурра лозим нест, танҳо "скриншот"-и фаврии ҳолати вуруд лозим аст. Дар ин ҷо тугмаи гирифтани аксбардорӣ кӯмак мекунад.
Ва JavaScript:
// ==================================== // НАВОР ГИРИФТ // ====================================
document.getElementById("snapshot").addEventListener("клик кунед", () => { // Ҳама геймпадҳои пайвастшударо гиред const pads = navigator.getGamepads(); const activePads = [];
// Доиравӣ кунед ва ҳолати ҳар як геймпади пайвастшударо сабт кунед барои (const gp of pads) { агар (!gp) идома ёбад; // Ҷойҳои холӣ гузаред
activePads.push ({ ID: gp.id, // Номи контроллер/модели тамғаи вақт: performance.now(), тугмаҳо: gp.buttons.map(b => ({ пахшшуда: б.фишоршуда, арзиш: б.арзиш }))) меҳварҳо: [...gp.axes] }); }
// Санҷед, ки оё ягон геймпад ёфт шудааст агар (!activePads.length) { console.warn("Ягон геймпад барои аксбардорӣ пайваст нашудааст."); alert ("Ягон контроллер ошкор нашудааст!"); бозгашт; }
// Сабт кунед ва корбарро огоҳ кунед console.log("Сурат:", activePads); огоҳӣ(Акс гирифта шуд! Забтшуда ${activePads.length} контроллер(ҳо).); });
Суратҳо ҳолати дақиқи контроллери шуморо дар як лаҳза ях мекунанд. 4. Бозии вуруди арвоҳ Акнун барои шавқовар: такрори вуруди арвоҳ. Ин сабтро мегирад ва онро ба таври визуалӣ боз мекунад, ки гӯё плеери фантом контроллерро истифода бурда бошад.
JavaScript барои такрор: // ==================================== // Бозии арвоҳ // ====================================
document.getElementById("replay").addEventListener("клик кунед", () => { // Боварӣ ҳосил кунед, ки мо сабти такрорӣ дорем агар (!frames.length) { alert ("Нест сабт барои такрори!"); бозгашт; }
console.log("Оғози такрори арвоҳ...");
// Вақти пайгирӣ барои бозикунии ҳамоҳангшуда бигзор startTime = performance.now(); бигзор frameIndex = 0;
// Давраи аниматсияро такрор кунед қадами функсия () { const now = performance.now(); const lapsed = ҳоло - startTime;
// Коркарди ҳама чаҳорчӯбаҳое, ки бояд ҳоло рух медоданд дар ҳоле ки (frameIndex < frames.length && frames[frameIndex].t <= гузашт) { чаҳорчӯбаи const = чаҳорчӯба[frameIndex];
// Навсозии UI бо ҳолати тугмаи сабтшуда btnA.classList.toggle("фаъол", frame.buttons[0].фишор карда мешавад); btnB.classList.toggle("фаъол", frame.buttons[1].фишор карда мешавад); btnX.classList.toggle("фаъол", frame.buttons[2].фишор карда мешавад);
// Намоиши ҳолати навсозӣ бигзор пахш карда шавад = []; frame.buttons.forEach((btn, i) => { агар (btn.pressed) pressed.push("Тугма " + i); }); агар (паҳншуда. дарозӣ > 0) { status.textContent = "Арвоҳ: " + pressed.join(", "); }
frameIndex++; }
// Давомро идома диҳед, агар чаҳорчӯба бештар бошад агар (frameIndex < frames.length) { requestAnimationFrame(қадам); } дигар { console.log ("Такрортамом шуд."); status.textContent = "Навозиши такрорӣ анҷом ёфт"; } }
// Бозиро оғоз кунед қадам (); });
Барои он ки хатогиҳоро каме дастӣ бештар кунад, ман такрори арвоҳро илова кардам. Вақте ки шумо сессияро сабт кардед, шумо метавонед такрорро пахш кунед ва UI-ро тамошо кунед, ки онро иҷро мекунад, тақрибан ба мисли плеери фантомӣ дар паҳлӯ кор мекунад. Барои ин дар панел тугмаи нави Replay Ghost пайдо мешавад.
Сабт -ро пахш кунед, бо контроллер каме омехта кунед, бас кунед ва сипас такрор кунед. UI танҳо ҳама корҳоеро, ки шумо кардаед, аксбардорӣ мекунад, ба монанди арвоҳ аз воридоти шумо. Чаро бо ин изофаҳо ташвиш мекашед?
Сабт / содирот ба озмоишгарон нишон медиҳад, ки маҳз чӣ рӯй додааст. Суратҳо лаҳзае ях мекунанд, вақте ки шумо хатогиҳои аҷибро пайгирӣ мекунед, хеле муфид аст. Бозии Ghost барои дарсҳо, санҷиши дастрасӣ ё танҳо муқоисаи танзимоти назоратӣ паҳлӯ ба паҳлӯ бузург аст.
Дар ин лаҳза, он на танҳо як намоиши тозаву озода, балки чизест, ки шумо воқеан ба кор андохта метавонед. Ҳолатҳои истифодаи воқеии ҷаҳонӣ Ҳоло мо ин ислоҳкунанда дорем, ки метавонад бисёр корҳоро анҷом диҳад. Он вуруди мустақимро нишон медиҳад, гузоришҳоро сабт мекунад, онҳоро содир мекунад ва ҳатто ашёро такрор мекунад. Аммо саволи аслӣ ин аст: воқеан кӣ ғамхорӣ мекунад? Ин барои кӣ муфид аст? Таҳиягарони бозӣ Назоратчиён як қисми кор мебошанд, аммо ислоҳ кардани онҳо? Одатан дард. Тасаввур кунед, ки шумо комбои бозии ҷангиро месанҷед, ба монанди ↓ → + punch. Ба ҷои дуо кардан, шумо онро ду маротиба ҳамон тавр пахш мекунед, як бор сабт мекунед ва такрор мекунед. Иҷро шуд. Ё шумо сабтҳои JSON-ро бо як ҳамдаста иваз мекунед, то тафтиш кунед, ки оё коди мултипликатори шумо дар мошини онҳо ҳамин хел вокуниш нишон медиҳад. Ин бузург аст. Таҷрибаомӯзони дастрасӣ Ин ба дили ман наздик аст. На ҳама бо контролери "стандартӣ" бозӣ мекунанд. Контроллерҳои мутобиқшавӣ баъзан сигналҳои аҷибро берун мекунанд. Бо ин асбоб, шумо метавонед дақиқ бубинед, ки чӣ рӯй дода истодааст. Муаллимон, олимон, хар кй. Онҳо метавонанд гузоришҳоро гиранд, муқоиса кунанд ё вурудҳоро паҳлӯ ба паҳлӯ такрор кунанд. Ногаҳон чизҳои ноаён аён мешаванд. Санҷиши кафолати сифат Озмоишгарон одатан ёддоштҳо менависанд, ба монанди "Ман тугмаҳоро дар ин ҷо пора кардам ва он шикаст." На он қадар муфид. Акнун? Онҳо метавонанд прессҳои дақиқро сабт кунанд, логро содир кунанд ва фиристанд. Тахмин нест. Муаллимон Агар шумо дарсҳо ё видеоҳои YouTube эҷод кунед, такрори арвоҳ тилло аст. Шумо айнан метавонед бигӯед: "Ин аст он чизе ки ман бо контроллер кардам", дар ҳоле ки UI ин рӯй медиҳад. Тавзеҳҳоро равшантар мекунад. Ғайр аз бозиҳо Ва ҳа, ин танҳо дар бораи бозиҳо нест. Одамон контроллерҳоро барои роботҳо, лоиҳаҳои санъат ва интерфейсҳои дастрас истифода кардаанд. Ҳар дафъа як масъала: браузер воқеан чиро мебинад? Бо ин, шумо набояд тахмин кунед. Хулоса Ислоҳоти вуруди контроллер ҳамеша мисли парвози нобино эҳсос мешуд. Баръакси DOM ё CSS, ягон инспектори дарунсохт барои геймпадҳо вуҷуд надорад; ин танҳо рақамҳои хом дар консол аст, ки ба осонӣ дар садо гум мешаванд. Бо чандсад сатри HTML, CSS ва JavaScript мо чизи дигаре сохтем:
Debuger визуалӣ, ки вуруди ноаёнро намоён месозад. Системаи қабати CSS, ки UI-ро тоза ва ислоҳшаванда нигоҳ медорад. Маҷмӯи такмилҳо (сабт кардан, содирот, аксҳо, такрори арвоҳ), ки онро аз намоишӣ ба абзори таҳиягар баланд мекунанд.
Ин лоиҳа нишон медиҳад, ки шумо бо омезиши қудрати веб-платформа бо каме эҷодкорӣ дар CSS Cascade Layers чӣ қадар дур рафта метавонед. Воситае, ки ман ба таври пурра шарҳ додам, манбаи кушода аст. Шумо метавонед репои GitHub-ро клон кунед ва онро барои худ санҷед. Аммо муҳимтар аз ҳама, шумо метавонед онро худатон созед. Қабатҳои худро илова кунед. Мантиқи такрории худро созед. Онро бо прототипи бозии худ ҳамгиро кунед. Ё ҳатто онро ба тарзе истифода баред, ки ман тасаввур накардаам. Барои таълим, дастрасӣ ё таҳлили додаҳо. Дар охири рӯз, ин танҳо дар бораи ислоҳи геймпадҳо нест. Ин дар бораи дурахши равшанӣ ба воридоти пинҳонӣ ва додани эътимод ба таҳиягарон барои кор бо сахтафзоре, ки веб то ҳол пурра қабул намекунад. Пас, контроллератонро васл кунед, муҳаррири худро кушоед ва таҷрибаро оғоз кунед. Шумо шояд ҳайрон шавед, ки браузери шумо ва CSS-и шумо воқеан чӣ кор карда метавонанд.
