Контроллерди туташтырганда, баскычтарды эзип, таякчаларды кыймылдатасыз, триггерлерди тартасыз... жана иштеп чыгуучу катары анын эч бирин көрбөйсүз. Браузер аны тандап алат, албетте, бирок консолго сандарды киргизбесеңиз, ал көрүнбөйт. Бул 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 жардам бере алат. Алар стилдерди артыкчылыктары боюнча иреттелген "катмарларга" топтошот, ошондуктан сиз өзгөчөлүк менен күрөшүүнү токтотуп, "Эмне үчүн менин мүчүлүштүктөрдү оңдоо стилим көрүнбөй жатат?" Анын ордуна, сиз өзүнчө кооптонууларды сактайсыз:
Негизги: контроллердин стандарттуу, баштапкы көрүнүшү. Активдүү: Басылган баскычтар жана жылдырылган таякчалар үчүн өзгөчөлүктөр. Мүчүлүштүктөрдү оңдоо: Иштеп чыгуучулар үчүн катмарлар (мисалы, сандык окуулар, жол көрсөткүчтөр жана башкалар).
Эгер биз CSSдеги катмарларды ушуга ылайык аныктай турган болсок, бизде: /* эң төмөнкүдөн эң чоң артыкчылыкка */ @layer базасы, активдүү, мүчүлүштүктөрдү оңдоо;
@layer base { /* ... */ }
@layer активдүү { /* ... */ }
@layer debug { /* ... */ }
Ар бир катмар болжолдуу түрдө топтолгондуктан, кайсы эрежелер жеңерин дайыма билесиз. Бул алдын ала билүү мүчүлүштүктөрдү оңдоону оңой эле эмес, иш жүзүндө башкара турган кылат. Биз көйгөйдү (көзгө көрүнбөгөн, баш аламан киргизүү) жана мамилени (Cascade Layers менен курулган визуалдык мүчүлүштүктөрдү оңдоочу) карадык. Эми биз мүчүлүштүктөрдү оңдоочу түзүүнү этап-этабы менен карап чыгабыз. Мүчүлүштүктөрдү оңдоочу концепция Жашыруун киргизүүнү көрүнөө кылуунун эң оңой жолу - аны жөн гана экранга тартуу. Бул мүчүлүштүктөрдү оңдоочу ушундай кылат. Баскычтар, триггерлер жана джойстиктердин бардыгы визуалдык көрүнүшкө ээ.
A баскычын басыңыз: Тегерек күйөт. Таякты түртүңүз: Тегерек тегерете жылат. Триггерди жарым жолго тартыңыз: тилке жарымын толтурат.
Эми сиз 0 жана 1 ге карап отурбайсыз, бирок чындыгында контроллердин түз эфирде реакциясын көрүп жатасыз. Албетте, сиз демейки, басылган, мүчүлүштүктөрдү аныктоо маалыматы, жада калса жаздыруу режими сыяктуу абалдарды топтой баштаганда, CSS чоңоюп, татаалдана баштайт. Бул жерде каскаддык катмарлар жардамга келет. Бул жерде кыскартылган мисал: @layer base { .button { фон: #222; чек ара радиусу: 50%; туурасы: 40px; бийиктиги: 40px; } }
@layer активдүү { .button.басылган { background: #0f0; /* ачык жашыл */ } }
@layer debug { .button::кийин { мазмун: attr(маалымат-маани); шрифт өлчөмү: 12px; түс: #fff; } }
Катмардын тартиби маанилүү: база → активдүү → мүчүлүштүктөрдү оңдоо.
база контроллерди тартат. жигердүү басылган абалдарды иштетет. мүчүлүштүктөрдү оңдоо катмарларга ыргытат.
Аны ушинтип бузуу сиз кызыктай өзгөчөлүк согуштары менен күрөшпөй жатканыңызды билдирет. Ар бир катмардын өз орду бар жана сиз ар дайым эмне жеңерин билесиз. Building It Out Адегенде экранда бир нерсе алалы. Бул жакшы көрүнбөшү керек - жөн гана бар болушу керек, ошондуктан биз менен иштей турган бир нерсе бар.
Gamepad Cascade Debugger
Бул жөн гана кутулар. Азырынча кызыктуу эмес, бирок бул бизге кийинчерээк CSS жана JavaScript менен иштөө үчүн туткаларды берет. Макул, мен бул жерде каскаддык катмарларды колдонуп жатам, анткени сиз көбүрөөк штаттарды кошсоңуз, ал нерселерди иретке келтирет. Бул жерде орой өтүү:
/* ================================== КАСКАДЫК КАТМАРЛАРДЫ ЖОНУНДОО Тартип маселеси: база → активдүү → мүчүлүштүктөрдү оңдоо ==================================== */
/* Кабат тартибин алдын ала аныктоо */ @layer базасы, активдүү, мүчүлүштүктөрдү оңдоо;
/* 1-кабат: Негизги стилдер - демейки көрүнүш */ @layer base { .button { фон: #333; чек ара радиусу: 50%; туурасы: 70px; бийиктиги: 70px; дисплей: flex; актоо-мазмуну: борбор; тегиздөө: борбор; }
.пауза { туурасы: 20px; бийиктиги: 70px; фон: #333; дисплей: inline-block; } }
/* 2-кабат: активдүү абалдар - басылган баскычтарды иштетет */ @layer активдүү { .button.active { background: #0f0; /* Басканда ачык жашыл */ transform: scale(1.1); /* Баскычты бир аз чоңойтот */ }
.pause.active { background: #0f0; transform: scaleY(1.1); /* Басканда вертикалдуу созулат */ } }
/* 3-кабат: мүчүлүштүктөрдү оңдоо - иштеп чыгуучу маалымат */ @layer debug { .button::кийин { мазмун: attr(маалымат-маани); /* Сандык маанини көрсөтөт */ шрифт өлчөмү: 12px; түс: #fff; } }
Бул ыкманын кооздугу ар бир катмардын айкын максаты бар. Негизги катмар эч качан активдүүнү жокко чыгара албайт жана активдүү өзгөчөлүгүнө карабастан мүчүлүштүктөрдү эч качан жокко чыгара албайт. Бул, адатта, мүчүлүштүктөрдү оңдоо куралдарын кыйнаган CSS өзгөчөлүгү согуштарын жок кылат. Азыр кээ бир кластерлер караңгы фондо отурат окшойт. Чынын айтсам, өтө жаман эмес.
JavaScript кошуу JavaScript убактысы. Бул жерде контроллер иш жүзүндө бир нерсе кылат. Биз муну этап-этабы менен курабыз. 1-кадам: Мамлекеттик башкарууну орнотуу Биринчиден, мүчүлүштүктөрдү оңдоочунун абалын көзөмөлдөө үчүн өзгөрмөлөр керек: // =================================== // МАМЛЕКЕТТИК БАШКАРУУ // ===================================
let run = false; // Мүчүлүштүктөрдү оңдоочу активдүү экендигин көзөмөлдөйт let rafId; // жокко чыгаруу үчүн requestAnimationFrame ID сактайт
Бул өзгөрмөлөр геймпаддын киргизүүсүн үзгүлтүксүз окуган анимация циклин башкарат. 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("статус");
Бул шилтемелерди алдын ала сактоо DOMды кайра-кайра суроого караганда натыйжалуураак. 3-кадам: Клавиатураны кайра кошуу Физикалык контроллерсуз тестирлөө үчүн клавиатура баскычтарын баскычтарга салыштырабыз: // =================================== // Клавиатураны кайра кайтаруу (контроллери жок сыноо үчүн) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' баскычы эки тыным тилкесин башкарат };
Бул клавиатурадагы баскычтарды басуу аркылуу UIди сынап көрүүгө мүмкүнчүлүк берет. 4-кадам: Негизги жаңыртуу циклин түзүңүз Бул жерде сыйкыр болот. Бул функция тынымсыз иштейт жана геймпаддын абалын окуйт: // =================================== // НЕГИЗГИ ОЮН ПАДАНДАРЫН ЖАҢЫРТУУ цикли // ===================================
функция updateGamepad() { // Бардык туташкан геймпаддарды алыңыз const gamepads = navigator.getGamepads(); if (!gamepads) кайтып келсе;
// Биринчи туташкан геймпадды колдонуңуз const gp = геймпаддар[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].pressed; pause1.classList.toggle("активдүү", pausePressed); pause2.classList.toggle("активдүү", pausePressed);
// Статус көрсөтүү үчүн учурда басылган баскычтардын тизмесин түзүңүз басылсын = []; gp.buttons.forEach((btn, i) => { эгерде (btn.басылган)pressed.push("Button" + i); });
// Эгерде кандайдыр бир баскыч басылса, статус текстин жаңыртыңыз эгерде (басылган. узундук > 0) { status.textContent = "Басылды: " + pressed.join(", "); } }
// Эгерде мүчүлүштүктөрдү оңдоочу иштеп жатса, циклди улантыңыз эгерде (чуркоо) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() методу баскыч басылганына жараша активдүү классты кошот же жок кылат, бул биздин CSS катмарынын стилдерин козгойт. 5-кадам: Баскычтоп окуяларын башкаруу Бул окуянын угуучулары клавиатураны кайра иштетүүнү камсыздайт: // =================================== // Клавиатура ОКУЯЛАРЫН ИШТЕГЕНЧИЛЕР // ===================================
document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // Бир же бир нече элементтерди иштетүү if (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) => { if (keyMap[e.key]) { // Ачкыч бошотулганда активдүү абалды алып салуу if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("активдүү")); } башка { keyMap[e.key].classList.remove("активдүү"); } status.textContent = "Ачкыч бошотулду: " + e.key.toUpperCase(); } });
6-кадам: Start/Stop Control кошуу Акыр-аягы, бизге мүчүлүштүктөрдү оңдоочуну күйгүзүү жана өчүрүү ыкмасы керек: // =================================== // МҮЧӨЧҮКТҮ КҮЙГҮЗҮҮ/ӨЧҮРҮҮ // ===================================
document.getElementById("toggle").addEventListener("click", () => { running = !running; // Иштеп жаткан абалды которуу
эгерде (чуркоо) { status.textContent = "Debugger иштеп жатат..."; updateGamepad(); // Жаңыртуу циклин баштоо } башка { status.textContent = "Debugger жигердүү эмес"; cancelAnimationFrame(rafId); // Циклди токтотуу } });
Ооба, баскычты басып, ал жаркырап турат. Таякты түртүңүз, ал кыймылдайт. Дал ушул. Дагы бир нерсе: чийки баалуулуктар. Кээде жарыкты эмес, сандарды көргүң келет.
Бул этапта сиз көрүшүңүз керек:
Жөнөкөй экрандагы контроллер, Алар менен баарлашканыңызда реакция кылган баскычтар жана Басылган баскычтардын индекстерин көрсөтүүчү кошумча мүчүлүштүктөрдү оңдоо көрсөткүчү.
Муну азыраак абстракттуу кылуу үчүн, бул жерде реалдуу убакытта реакция кылган экрандагы контроллердин тез демонстрациясы:
Эми "Жазууну баштоо" баскычын басуу "Жазууну токтотуу" баскычын басмайынча бардыгын журналга киргизет. 2. Маалыматтарды CSV/JSONга экспорттоо Биз журналга ээ болгондон кийин, аны сактап калгыбыз келет.
1-кадам: Жүктөп алуу жардамчысын түзүңүз Биринчиден, браузерде файлдарды жүктөө менен алектенген жардамчы функция керек: // =================================== // ФАЙЛДЫ ЖҮКТӨӨГӨ ЖАРДАМЧЫ // ===================================
DownloadFile функциясы (файлдын аты, мазмуну, түрү = "текст/жөнөкөй") { // Мазмундан блоб түзүңүз const blob = new 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("click", () => { // Экспорттоо үчүн бир нерсе бар-жогун текшериңиз эгерде (!frames.length) { console.warn("Экспорттоого эч кандай жазуу жок."); кайтаруу; }
// Метаберилиштер жана фреймдер менен пайдалуу жүктү түзүңүз const пайдалуу жүк = { түзүлгөн: new Date().toISOString(), алкактар };
// JSON форматталган катары жүктөө жүктөө файлы( "gamepad-log.json", JSON.stringify(пайдалуу жүк, null, 2), "колдонмо/json" ); });
JSON форматы бардыгын структураланган жана оңой талданууга мүмкүндүк берет, бул аны кайра иштеп чыгуу куралдарына жүктөө же командалаштар менен бөлүшүү үчүн идеалдуу кылат. 3-кадам: CSV экспортун иштетиңиз CSV экспорту үчүн биз иерархиялык маалыматтарды саптарга жана мамычаларга тегиздешибиз керек:
//==================================== // CSV КАТАРЫ ЭКСПОРТ // ===================================
document.getElementById("export-csv").addEventListener("click", () => { // Экспорттоо үчүн бир нерсе бар-жогун текшериңиз эгерде (!frames.length) { console.warn("Экспорттоого эч кандай жазуу жок."); кайтаруу; }
// CSV баш сабын түзүү (убакыт белгиси үчүн мамычалар, бардык баскычтар, бардык октор) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[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(","); }).join("\n");
// CSV катары жүктөө downloadFile("gamepad-log.csv", баш жана саптар, "текст/csv"); });
CSV маалыматтарды талдоо үчүн эң сонун, анткени ал түздөн-түз Excel же Google Sheets'те ачылып, диаграммаларды, маалыматтарды чыпкалоо же так үлгүлөрүн визуалдык түрдө түзүүгө мүмкүндүк берет. Эми экспорт баскычтары киргенден кийин, панелде эки жаңы опцияны көрөсүз: JSON экспорттоо жана CSV экспорттоо. Эгерде сиз чийки журналды кайра иштеп чыгуучу куралдарыңызга ыргыткыңыз келсе же структураны тегеректеп алгыңыз келсе, JSON жакшы. Ал эми CSV түз эле Excel же Google Sheetsке ачылат, андыктан киргизүүлөрдү диаграммалап, чыпкалап же салыштыра аласыз. Төмөнкү сүрөттө бул кошумча башкаруу элементтери менен панелдин кандай көрүнөрү көрсөтүлгөн.
3. Snapshot системасы Кээде толук жазуунун кереги жок, жөн гана киргизүү мамлекеттеринин тез "скриншоту". Бул жерде "Сүрөттү тартуу" баскычы жардам берет.
Жана JavaScript:
// =================================== // ТАРТУУ // ===================================
document.getElementById("snapshot").addEventListener("click", () => { // Бардык туташкан геймпаддарды алыңыз const pads = navigator.getGamepads(); const activePads = [];
// Ар бир туташкан геймпаддын абалын айлантыңыз жана басып алыңыз үчүн (const gp of pads) { эгерде (!gp) улантуу; // Бош орундарды өткөрүп жиберүү
activePads.push({ id: gp.id, // Контроллердин аты/модел убакыт белгиси: performance.now(), баскычтар: gp.buttons.map(b => ({ басылган: б.басылган, мааниси: b.value }))) октор: [...gp.axes] }); }
// Геймпаддар табылганын текшериңиз if (!activePads.length) { console.warn("Эч кандай геймпаддар сүрөткө туташтырылган эмес."); alert("Контроллер табылган жок!"); кайтаруу; }
// Каттоо жана колдонуучуга кабарлоо console.log("Snapshot:", activePads); эскертүү(Сүрөт алынды! ${activePads.length} контроллер(лар) тартылды); });
Көз ирмемдик сүрөттөр контроллеруңуздун так абалын бир учурда кармап турат. 4. Ghost Input Replay Эми кызыктуусу: арбак киргизүүнү кайра ойнотуу. Бул журналды алып, аны фантомдук оюнчу контроллерди колдонуп жаткандай визуалдык түрдө ойнойт.
Кайталоо үчүн JavaScript: // =================================== // GHOST PLAY // ===================================
document.getElementById("replay").addEventListener("click", () => { // Бизде кайра ойнотуу үчүн жаздыруу бар экенин текшериңиз эгерде (!frames.length) { alert("Кайра ойнотуу үчүн жазуу жок!"); кайтаруу; }
console.log("Элести кайра ойнотуу башталууда...");
// Шайкештирилген ойнотуу үчүн трек убактысы let startTime = performance.now(); let frameIndex = 0;
// Анимация циклин кайталоо кадам() { const now = performance.now(); const elapsed = now - 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) => { if (btn.pressed) pressed.push("Button " + i); }); эгерде (басылган. узундук > 0) { status.textContent = "Арбак: " + pressed.join(", "); }
frameIndex++; }
// Көбүрөөк рамкалар болсо, циклди улантыңыз if (frameIndex < frames.length) { requestAnimationFrame(кадам); } башка { console.log("Кайра ойнотуубүттү."); status.textContent = "Кайра ойнотуу аяктады"; } }
// Кайталоону баштоо step(); });
Мүчүлүштүктөрдү оңдоону бир аз көбүрөөк колдонуу үчүн, мен арбактын кайталоосун коштум. Сеансты жаздыргандан кийин, сиз кайталап ойнотууну басып, UI анын аткарылышын көрө аласыз, дээрлик фантомдук оюнчу аянтчаны иштетип жаткандай. Бул үчүн панелде жаңы Replay Ghost баскычы пайда болот.
Жазууну басыңыз, контроллер менен бир аз аралашып, токтоп, анан кайра ойнотуңуз. UI жөн гана киргизген нерселериңизди ээрчиген арбак сыяктуу сиз жасаган нерселердин баарын кайталайт. Эмне үчүн бул кошумчалар менен убара?
Жаздыруу/экспорттоо сыноочуларга эмне болгонун так көрсөтүүнү жеңилдетет. Көз ирмемдик сүрөттөр көз ирмемде токтоп калат, сиз таң калыштуу мүчүлүштүктөрдү издеп жүргөнүңүздө абдан пайдалуу. Ghost кайра ойнотуу окуу куралдары, жеткиликтүүлүктү текшерүү же жөн гана башкаруу жөндөөлөрүн жанаша салыштыруу үчүн эң сонун.
Бул учурда, бул жөн гана тыкан демо эмес, бирок сиз иш жүзүндө иштей турган нерсе. Чыныгы дүйнөдө колдонуу учурлары Азыр бизде көп нерсени жасай турган бул мүчүлүштүктөрдү оңдоочу бар. Бул жандуу киргизүүнү көрсөтөт, журналдарды жаздырат, аларды экспорттойт, жада калса нерселерди кайталайт. Бирок чыныгы суроо: ким чындап кам көрөт? Бул ким үчүн пайдалуу? Оюнду иштеп чыгуучулар Контроллерлор жумуштун бир бөлүгү, бирок аларды оңдообу? Көбүнчө оору. ↓ → + Punch сыяктуу мушташ оюнун сынап жатканыңызды элестетиңиз. Намаз окугандын ордуна бир эле жолу эки жолу басып, бир жолу жаздырып, кайра ойнотосуз. Бүттү. Же болбосо, сиз JSON журналдарын командалашыңыз менен алмаштырып, сиздин көп оюнчу кодуңуз алардын машинасында бирдей реакция кылаарын текшересиз. Бул абдан чоң. Жеткиликтүүлүк практиктери Бул менин жүрөгүмө жакын. Баары эле "стандарттык" контроллер менен ойной бербейт. Адаптивдүү контроллерлор кээде кызыктай сигналдарды чыгарышат. Бул курал менен сиз эмне болуп жатканын так көрө аласыз. Мугалимдер, илимий кызматкерлер, ким болбосун. Алар журналдарды кармап, аларды салыштырып же киргизүүлөрдү жанаша кайталай алышат. Күтүлбөгөн жерден көзгө көрүнбөгөн нерселер айкын болуп калат. Сапаттын кепилдик тести Сыноочулар адатта "мен бул жерде баскычтарды эзип койдум, ал сынып калды" деген жазууларды жазышат. Өтө пайдалуу эмес. Эми? Алар так басууларды басып, журналды экспорттоп жана жөнөтө алышат. Жок. педагогдор Эгер сиз окуу куралдарын же YouTube видеолорун жасап жатсаңыз, арбактарды кайталоо алтын. Сиз түзмө-түз: "Мына мен контроллер менен эмне кылдым" деп айта аласыз, ал эми UI анын болуп жатканын көрсөтүп турат. Түшүндүрмөлөрдү айкыныраак кылат. Beyond Games Ооба, бул жөн гана оюндар жөнүндө эмес. Адамдар роботтор, көркөм долбоорлор жана жеткиликтүүлүк интерфейстери үчүн контроллерлорду колдонушкан. Ар дайым бир эле маселе: браузер чындыгында эмнени көрүп жатат? Муну менен, сиз болжолдоп кереги жок. Корутунду Контроллердин киришин оңдоо дайыма сокур учуп бараткандай сезилип келген. DOM же CSSтен айырмаланып, геймпаддар үчүн орнотулган инспектор жок; бул консолдогу чийки сандар, ызы-чуу менен оңой эле жоголуп кетет. HTML, CSS жана JavaScript бир нече жүз саптары менен биз башка нерсени курдук:
Көрүнбөгөн киргизүүлөрдү көрүнөө кылган визуалдык мүчүлүштүктөрдү оңдоочу. UI таза жана мүчүлүштүктөрдү оңдоого мүмкүн болгон катмарлуу CSS системасы. Аны демодан иштеп чыгуучунун куралына көтөргөн өркүндөтүүлөрдүн жыйындысы (жаздыруу, экспорттоо, көз ирмемдик сүрөттөр, арбактарды кайра ойнотуу).
Бул долбоор CSS Cascade Layers программасында бир аз чыгармачылык менен Веб-платформанын күчүн аралаштырып, канчалык деңгээлде бара аларыңызды көрсөтөт. Мен толугу менен түшүндүргөн курал ачык булак. Сиз GitHub репо клондоштуруу жана аны өзүңүз үчүн аракет кылсаңыз болот. Бирок андан да маанилүүсү, сиз аны өзүңүз кыла аласыз. Өз катмарларыңызды кошуңуз. Өзүңүздүн кайталоо логикаңызды түзүңүз. Аны оюндун прототиби менен интеграциялаңыз. Же мен ойлобогон жолдор менен колдонуңуз. Окутуу, жеткиликтүүлүк же маалыматтарды талдоо үчүн. Акыр-аягы, бул жөн гана геймпаддарды оңдоо жөнүндө эмес. Бул жашыруун киргизүүлөргө жарык чачуу жана иштеп чыгуучуларга веб дагы деле толук камтылбаган жабдыктар менен иштөөгө ишеним берүү. Ошентип, контроллеруңузду туташтырыңыз, редакторуңузду ачыңыз жана экспериментти баштаңыз. Браузериңиз жана CSSиңиз чындап эмнеге жетише аларына таң калышыңыз мүмкүн.
