ඔබ පාලකයක් පේනුගත කරන විට, ඔබ බොත්තම් පොඩි කර, කූරු චලනය, ප්රේරක අදින්න... සහ සංවර්ධකයෙකු ලෙස, ඔබට ඒ කිසිවක් නොපෙනේ. බ්රවුසරය එය ලබා ගනී, විශ්වාසයි, නමුත් ඔබ කොන්සෝලයේ අංක ලොග් කරන්නේ නම් මිස, එය නොපෙනේ. 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 කැස්කැඩ් ස්ථර වලට උදව් විය හැක. ඔවුන් ප්රමුඛතාවය අනුව ඇණවුම් කරන ලද "ස්ථර" ලෙස මෝස්තර සමූහ කරයි, එබැවින් ඔබ නිශ්චිතභාවය සමඟ සටන් කිරීම නවත්වා, "මගේ දෝශ නිරාකරණ විලාසය නොපෙන්වන්නේ ඇයි?" ඒ වෙනුවට, ඔබ වෙනම ගැටළු පවත්වා ගෙන යයි:
පදනම: පාලකයේ සම්මතය, ආරම්භක පෙනුම. සක්රිය: තද කළ බොත්තම් සහ ගෙන ගිය සැරයටි සඳහා උද්දීපනය. නිදොස්කරණය: සංවර්ධකයින් සඳහා ආවරණ (උදා: සංඛ්යාත්මක කියවීම්, මාර්ගෝපදේශ, සහ යනාදිය).
අපි මේ අනුව CSS හි ස්ථර නිර්වචනය කරන්නේ නම්, අපට ඇත්තේ: /* අඩුම සිට ඉහළම ප්රමුඛතාවය */ @ස්ථර පදනම, සක්රීය, නිදොස්කරණය;
@ස්ථර පදනම { /* ... */ }
@layer සක්රීය { /* ... */ }
@layer debug { /* ... */ }
සෑම ස්ථරයක්ම පුරෝකථනය කළ හැකි ලෙස ගොඩගැසී ඇති නිසා, ඔබ සැම විටම දිනන්නේ කුමන නීතිද යන්න දනී. එම පුරෝකථනය දෝශ නිරාකරණය පහසු කරනවා පමණක් නොව ඇත්ත වශයෙන්ම කළමනාකරණය කරයි. අපි ගැටලුව (නොපෙනෙන, අවුල් සහගත ආදානය) සහ ප්රවේශය (කැස්කැඩ් ස්ථර සමඟ ගොඩනගා ඇති දෘශ්ය නිදොස්කරණයක්) ආවරණය කර ඇත. දැන් අපි නිදොස්කරණය ගොඩනැගීම සඳහා පියවරෙන් පියවර ක්රියාවලිය හරහා ගමන් කරමු. දෝශ නිරාකරණ සංකල්පය සැඟවුණු ආදානය දෘශ්යමාන කිරීමට ඇති පහසුම ක්රමය නම් එය තිරය මත ඇඳීමයි. මෙම නිදොස්කරණය කරන්නේ එයයි. බොත්තම්, ප්රේරක සහ ජොයිස්ටික් සියල්ල දෘෂ්යමාන වේ.
A ඔබන්න: කවයක් දැල්වෙයි. සැරයටිය තල්ලු කරන්න: රවුම වටේට ලිස්සා යයි. ප්රේරකයක් අඩක් අදින්න: බාර් එකක් අඩක් පිරේ.
දැන් ඔබ 0s සහ 1s දෙස බලා සිටින්නේ නැත, නමුත් ඇත්ත වශයෙන්ම පාලකය සජීවීව ප්රතික්රියා කරන ආකාරය නරඹයි. ඇත්ත වශයෙන්ම, ඔබ පෙරනිමි, තද කළ, නිදොස් කිරීමේ තොරතුරු, සමහර විට පටිගත කිරීමේ මාදිලිය වැනි තත්වයන් ගොඩගැසීමට පටන් ගත් පසු, CSS විශාල හා සංකීර්ණ වීමට පටන් ගනී. කැස්කැඩ් ස්ථර ප්රයෝජනවත් වන්නේ එහිදීය. මෙන්න ඉවත් කළ උදාහරණයක්: @ස්ථර පදනම { .බොත්තම { පසුබිම: #222; මායිම් අරය: 50%; පළල: 40px; උස: 40px; } }
@layer සක්රීය { .බොත්තම පසුබිම: #0f0; /* දීප්තිමත් කොළ */ } }
@layer debug { .බොත්තම::පසු { අන්තර්ගතය: attr(දත්ත අගය); අකුරු ප්රමාණය: 12px; වර්ණය: #fff; } }
ස්ථරයේ අනුපිළිවෙල වැදගත් වේ: පාදය → ක්රියාකාරී → නිදොස්කරණය.
පදනම පාලකය ඇද ගනී. ක්රියාකාරී හසුරුවන පීඩන රාජ්යයන්. debug overlays මත විසි කරයි.
එය මේ ආකාරයෙන් බිඳ දැමීමෙන් අදහස් වන්නේ ඔබ අමුතු නිශ්චිතතා යුද්ධ නොකරන බවයි. සෑම ස්ථරයක්ම එහි ස්ථානයක් ඇති අතර, ඔබ සැමවිටම ජයග්රහණය කරන්නේ කුමක්දැයි ඔබ දන්නවා. එය ගොඩ නැගීම අපි මුලින්ම තිරය මත යමක් ලබා ගනිමු. එය හොඳ පෙනුමක් අවශ්ය නොවේ - පැවතීමට අවශ්ය නිසා අපට වැඩ කිරීමට යමක් තිබේ.
Gamepad Cascade Debugger
එය වචනාර්ථයෙන් පෙට්ටි පමණි. තවම උද්යෝගිමත් නැත, නමුත් එය CSS සහ JavaScript සමඟ පසුව ග්රහණය කර ගැනීමට අපට හසුරු ලබා දෙයි. හරි, ඔබ තවත් ප්රාන්ත එකතු කළ පසු එය දේවල් සංවිධානය කර තබන නිසා මම මෙහි කඳුරැල්ල ස්ථර භාවිත කරමි. මෙන්න දළ පාස් එකක්:
/* ==================================== කැස්කැඩ් ස්ථර සැකසුම ඇණවුම් කරුණු: පදනම → ක්රියාකාරී → නිදොස්කරණය =================================== */
/* ස්ථර අනුපිළිවෙල කලින් නිර්වචනය කරන්න */ @ස්ථර පදනම, සක්රීය, නිදොස්කරණය;
/* ස්ථරය 1: මූලික මෝස්තර - පෙරනිමි පෙනුම */ @ස්ථර පදනම { .බොත්තම { පසුබිම: #333; මායිම් අරය: 50%; පළල: 70px; උස: 70px; සංදර්ශකය: flex; යුක්ති සහගත-අන්තර්ගතය: මධ්යස්ථානය; align-items: මධ්යස්ථානය; }
.විරාමය { පළල: 20px; උස: 70px; පසුබිම: #333; සංදර්ශකය: inline-block; } }
/* 2 ස්ථරය: සක්රීය තත්ත්වයන් - තද කළ බොත්තම් හසුරුවයි */ @layer සක්රීය { .button.active { පසුබිම: #0f0; /* තද කළ විට දීප්තිමත් කොළ */ පරිවර්තනය: පරිමාණය (1.1); /* බොත්තම තරමක් විශාල කරයි */ }
.pause.active { පසුබිම: #0f0; පරිවර්තනය: පරිමාණY(1.1); /* තද කළ විට සිරස් අතට දිගු වේ */ } }
/* ස්ථරය 3: දෝශ නිරාකරණ ආවරණ - සංවර්ධක තොරතුරු */ @layer debug { .බොත්තම::පසු { අන්තර්ගතය: attr(දත්ත අගය); /* සංඛ්යාත්මක අගය පෙන්වයි */ අකුරු ප්රමාණය: 12px; වර්ණය: #fff; } }
මෙම ප්රවේශයේ අලංකාරය නම් සෑම ස්ථරයක්ම පැහැදිලි අරමුණක් ඇත. පාදක ස්තරයට කිසි විටෙක සක්රියව ප්රතික්ෂේප කළ නොහැකි අතර, සක්රියට කිසිවිටක නිශ්චිතභාවයකින් තොරව නිදොස්කරණය අභිබවා යා නොහැක. මෙය සාමාන්යයෙන් දෝශ නිරාකරණ මෙවලම් වලට බලපාන CSS විශේෂිතතා යුද්ධ ඉවත් කරයි. දැන් පෙනෙන්නේ සමහර පොකුරු අඳුරු පසුබිමක වාඩි වී සිටින බවයි. අවංකවම, නරක නැහැ.
JavaScript එකතු කිරීම JavaScript කාලය. පාලකය ඇත්ත වශයෙන්ම යමක් කරන්නේ මෙහිදීය. අපි මෙය පියවරෙන් පියවර ගොඩනඟමු. පියවර 1: රාජ්ය කළමනාකරණය සකසන්න පළමුව, නිදොස්කරණයේ තත්වය නිරීක්ෂණය කිරීමට අපට විචල්යයන් අවශ්ය වේ: // ===================================== // රාජ්ය කළමනාකරණය // =====================================
දිවීමට ඉඩ දෙන්න = බොරු; // නිදොස්කරණය සක්රියද යන්න නිරීක්ෂණය කරයි ඉඩ rafId; // අවලංගු කිරීම සඳහා requestAnimationFrame ID ගබඩා කරයි
මෙම විචල්යයන් Gamepad ආදානය අඛණ්ඩව කියවන සජීවිකරණ ලූපය පාලනය කරයි. පියවර 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: ප්රධාන යාවත්කාලීන ලූපය සාදන්න මැජික් සිදු වන්නේ මෙන්නය. මෙම ශ්රිතය අඛණ්ඩව ක්රියාත්මක වන අතර Gamepad තත්ත්වය කියවයි: // ===================================== // ප්රධාන ගේම්පෑඩ් යාවත්කාලීන ලූපය // =====================================
ශ්රිතය යාවත්කාලීන Gamepad() { // සියලුම සම්බන්ධිත ගේම් පෑඩ් ලබා ගන්න const gamepads = navigator.getGamepads(); (!gamepads) ආපසු නම්;
// පළමු සම්බන්ධිත ගේම් පෑඩ් භාවිතා කරන්න const gp = gamepads[0];
නම් (gp) { // "ක්රියාකාරී" පන්තිය ටොගල් කිරීමෙන් යාවත්කාලීන බොත්තම සඳහන් කරයි btnA.classList.toggle("ක්රියාකාරී", gp.buttons[0].pressed); btnB.classList.toggle("ක්රියාකාරී", gp.buttons[1].pressed); btnX.classList.toggle("ක්රියාකාරී", gp.buttons[2].pressed);
// විරාම බොත්තම හසුරුවන්න (බොත්තම දර්ශක 9 බොහෝ පාලක මත) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("ක්රියාකාරී", pausePressed); pause2.classList.toggle("ක්රියාකාරී", pausePressed);
// තත්ව සංදර්ශකය සඳහා දැනට එබූ බොත්තම් ලැයිස්තුවක් සාදන්න තද කරමු = []; gp.buttons.forEach((btn, i) => { (btn.pressed) නම්pressed.push("බොත්තම" + i); });
// කිසියම් බොත්තමක් එබූ විට තත්ව පෙළ යාවත්කාලීන කරන්න නම් (pressed.length > 0) { status.textContent = "Exed:" + pressed.join(", "); } }
// නිදොස්කරණය ක්රියාත්මක වන්නේ නම් ලූපය දිගටම කරගෙන යන්න (ධාවනය) නම් { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() ක්රමය මඟින් බොත්තම එබුවාද යන්න මත පදනම්ව ක්රියාකාරී පන්තිය එක් කරයි හෝ ඉවත් කරයි, එය අපගේ CSS ස්ථර විලාසයන් අවුලුවයි. පියවර 5: යතුරුපුවරු සිදුවීම් හසුරුවන්න මෙම සිදුවීම් සවන්දෙන්නන් යතුරුපුවරුව පසුබැසීම ක්රියා කරයි: // ===================================== // යතුරුපුවරු සිදුවීම් හසුරුවන්න // =====================================
document.addEventListener("keydown", (e) => { නම් (යතුරු සිතියම[e.key]) { // තනි හෝ බහු මූලද්රව්ය හසුරුවන්න නම් (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } වෙනත් { keyMap[e.key].classList.add("ක්රියාකාරී"); } status.textContent = "යතුර එබීම:" + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { නම් (යතුරු සිතියම[e.key]) { // යතුර මුදා හරින විට ක්රියාකාරී තත්ත්වය ඉවත් කරන්න නම් (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } වෙනත් { keyMap[e.key].classList.remove("ක්රියාකාරී"); } status.textContent = "යතුර නිකුත් කරන ලදී:" + e.key.toUpperCase(); } });
පියවර 6: ආරම්භක/නැවතුම් පාලනය එක් කරන්න අවසාන වශයෙන්, අපට නිදොස්කරණය සක්රිය සහ අක්රිය කිරීමට ක්රමයක් අවශ්යයි: // ===================================== // නිදොස්කරණය ක්රියාත්මක/අක්රිය ටොගල් කරන්න // =====================================
document.getElementById("toggle").addEventListener("ක්ලික් කරන්න", () => { ධාවනය = !ධාවනය; // ධාවන තත්ත්වය පෙරළන්න
(ධාවනය) නම් { status.textContent = "Debugger run..."; updateGamepad(); // යාවත්කාලීන ලූපය ආරම්භ කරන්න } වෙනත් { status.textContent = "නිදොස්කරණය අක්රිය"; අවලංගු AnimationFrame(rafId); // ලූප් එක නවත්වන්න } });
ඉතින් ඔව්, බොත්තමක් ඔබන්න, එය දිදුලයි. සැරයටිය තල්ලු කර එය චලනය වේ. ඒක තමයි. තවත් එක් දෙයක්: අමු අගයන්. සමහර විට ඔබට අවශ්ය වන්නේ අංක බලන්න මිස ලයිට් නොවේ.
මෙම අදියරේදී, ඔබ දැකිය යුත්තේ:
සරල තිරයේ පාලකයක්, ඔබ ඔවුන් සමඟ අන්තර් ක්රියා කරන විට ප්රතික්රියා කරන බොත්තම්, සහ තද කළ බොත්තම් දර්ශක පෙන්වන විකල්ප නිදොස් කියවීමක්.
මෙය අඩු වියුක්ත කිරීම සඳහා, තිරයේ පාලකය තත්ය කාලීනව ප්රතිචාර දක්වන ඉක්මන් නිරූපණයක් මෙන්න:
දැන්, Start Recording එබීමෙන් ඔබ Stop Recording ඔබන තෙක් සියල්ල ලඝු කරයි. 2. CSV/JSON වෙත දත්ත අපනයනය කිරීම අපට ලොගයක් ලැබුණු පසු, අපට එය සුරැකීමට අවශ්ය වනු ඇත.
පියවර 1: බාගැනීම් උපකාරකය සාදන්න පළමුව, අපට බ්රවුසරයේ ගොනු බාගැනීම් හසුරුවන උපකාරක කාර්යයක් අවශ්ය වේ: // ===================================== // ගොනු බාගැනීම් සහයකයා // =====================================
කාර්යය බාගත ගොනු (ගොනු නාමය, අන්තර්ගතය, වර්ගය = "පෙළ/සරල") { // අන්තර්ගතයෙන් බ්ලොබ් එකක් සාදන්න const blob = නව Blob ([අන්තර්ගතය], {type }); 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("අපනයනය කිරීමට පටිගත කිරීමක් නොමැත."); ආපසු; }
// පාර-දත්ත සහ රාමු සමඟ ගෙවීමක් සාදන්න අඛණ්ඩ ගෙවීම = { තනන ලද්දේ: නව දිනය().toISOSstring(), රාමු };
// ආකෘතිගත JSON ලෙස බාගන්න බාගත ගොනුව( "gamepad-log.json", JSON.stringify(ගෙවීම්, ශුන්ය, 2), "යෙදුම/json" ); });
JSON ආකෘතිය සෑම දෙයක්ම ව්යුහගත සහ පහසුවෙන් විග්රහ කළ හැකි ලෙස තබා ගනී, එය නැවත dev මෙවලම් වෙත පැටවීමට හෝ කණ්ඩායම් සගයන් සමඟ බෙදා ගැනීමට වඩාත් සුදුසු වේ. පියවර 3: CSV අපනයනය හසුරුවන්න CSV අපනයන සඳහා, අපට ධූරාවලි දත්ත පේළි සහ තීරුවලට සමතලා කිරීමට අවශ්ය වේ:
//======================================== // CSV ලෙස අපනයනය කරන්න // =====================================
document.getElementById("export-csv").addEventListener("ක්ලික් කරන්න", () => { // අපනයනය කිරීමට යමක් තිබේදැයි පරීක්ෂා කරන්න නම් (!frames.length) { console.warn("අපනයනය කිරීමට පටිගත කිරීමක් නොමැත."); ආපසු; }
// CSV ශීර්ෂ පේළිය සාදන්න (වේලා මුද්රාව සඳහා තීරු, සියලුම බොත්තම්, සියලුම අක්ෂ) const headerButtons = රාමු[0].buttons.map((_, i) => btn${i}); const headerAxes = රාමු[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV දත්ත පේළි සාදන්න const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); ආපසු [f.t, ...btnVals, ...f.axes].join(","); }).එකතු වන්න("\n");
// CSV ලෙස බාගන්න බාගත ගොනුව ("gamepad-log.csv", ශීර්ෂකය + පේළි, "පෙළ/csv"); });
CSV දත්ත විශ්ලේෂණය සඳහා විශිෂ්ට වන්නේ එය Excel හෝ Google Sheets හි සෘජුවම විවෘත වන නිසා, ඔබට ප්රස්ථාර සෑදීමට, දත්ත පෙරහන් කිරීමට, හෝ දෘශ්යමය වශයෙන් රටා ස්ථානගත කිරීමට ඉඩ සලසයි. දැන් නිර්යාත බොත්තම් ඇත, ඔබ පැනලයේ නව විකල්ප දෙකක් දකිනු ඇත: අපනයන JSON සහ අපනයන CSV. ඔබට අමු ලොගය නැවත ඔබේ dev මෙවලම් වෙත විසි කිරීමට හෝ ව්යුහය වටා විදීමට අවශ්ය නම් JSON හොඳයි. අනෙක් අතට, CSV කෙලින්ම Excel හෝ Google Sheets වෙත විවෘත වන අතර එමඟින් ඔබට ආදාන ප්රස්ථාර කිරීමට, පෙරීමට, හෝ සංසන්දනය කිරීමට හැකිය. පහත රූපයේ දැක්වෙන්නේ එම අමතර පාලන සමඟ පැනලය පෙනෙන ආකාරයයි.
3. Snapshot පද්ධතිය සමහර විට ඔබට සම්පූර්ණ පටිගත කිරීමක් අවශ්ය නොවේ, ආදාන ප්රාන්තවල ඉක්මන් "තිර රුවක්" පමණි. Take Snapshot බොත්තම උපකාර වන්නේ එහිදීය.
සහ 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 => ({ pressed: b.pressed, අගය: b.value })), අක්ෂ: [...gp.axes] }); }
// කිසියම් ගේම් පෑඩ් එකක් හමු වූයේ දැයි පරීක්ෂා කරන්න නම් (!activePads.length) { console.warn("snapshot සඳහා ගේම් පෑඩ් සම්බන්ධ කර නොමැත."); අනතුරු ඇඟවීම ("පාලකයක් අනාවරණය කර ගෙන නොමැත!"); ආපසු; }
// ලොග් වී පරිශීලකයාට දැනුම් දෙන්න console.log("Snapshot:", activePads); අනතුරු ඇඟවීම (Snapshot ගන්නා ලදී! ${activePads.length} පාලක(ය) අල්ලා ගන්නා ලදී); });
ස්නැප්ෂොට් එක මොහොතකින් ඔබේ පාලකයේ නියම තත්ත්වය කැටි කරයි. 4. Ghost Input Replay දැන් විනෝදය සඳහා: අවතාර ආදාන නැවත ධාවනය. මෙය ලොගයක් ගෙන එය ෆැන්ටම් වාදකයෙකු පාලකය භාවිතා කරන ආකාරයට දෘශ්ය ලෙස නැවත ධාවනය කරයි.
නැවත ධාවනය සඳහා JavaScript: // ===================================== // GHOST REPLAY // =====================================
document.getElementById("replay").addEventListener("ක්ලික් කරන්න", () => { // අපට නැවත ධාවනය කිරීමට පටිගත කිරීමක් ඇති බව සහතික කර ගන්න නම් (!frames.length) { අනතුරු ඇඟවීම ("නැවත ධාවනය කිරීමට පටිගත කිරීමක් නැත!"); ආපසු; }
console.log("ආරම්භක අවතාර නැවත ධාවනය...");
// සමමුහුර්ත නැවත ධාවනය සඳහා වේලාව නිරීක්ෂණය කරන්න startTime = performance.now(); ඉඩ රාමු දර්ශකය = 0;
// සජීවිකරණ ලූපය නැවත ධාවනය කරන්න කාර්යය පියවර () { const now = performance.now(); const elapsed = දැන් - startTime;
// මේ වන විට සිදු විය යුතු සියලුම රාමු සකසන්න අතරතුර (frameIndex < frames.length && frames[frameIndex].t <= ගතවී ඇත) { const frame = රාමු[frameIndex];
// පටිගත කරන ලද බොත්තම සමඟ UI යාවත්කාලීන කරන්න btnA.classList.toggle("ක්රියාකාරී", frame.buttons[0].pressed); btnB.classList.toggle("ක්රියාකාරී", frame.buttons[1].pressed); btnX.classList.toggle("ක්රියාකාරී", frame.buttons[2].pressed);
// තත්ත්ව සංදර්ශකය යාවත්කාලීන කරන්න තද කරමු = []; frame.buttons.forEach((btn, i) => { (btn.pressed) pressed.push("Button" + i); }); නම් (pressed.length > 0) { status.textContent = "Ghost:" + pressed.join(", "); }
රාමු දර්ශකය ++; }
// තව රාමු තිබේ නම් දිගටම ලූප් කරන්න නම් (frameIndex < frames.length) { requestAnimationFrame(පියවර); } වෙනත් { console.log("නැවත ධාවනයඅවසන්."); status.textContent = "නැවත ධාවනය සම්පූර්ණයි"; } }
// නැවත ධාවනය ආරම්භ කරන්න පියවර (); });
නිදොස්කරණය තව ටිකක් ප්රායෝගික කිරීමට, මම අවතාර නැවත ධාවනයක් එක් කළෙමි. ඔබ සැසියක් පටිගත කළ පසු, ඔබට නැවත ධාවනය කර UI එය ක්රියාත්මක කිරීම නැරඹිය හැකිය, ෆැන්ටම් වාදකයෙකු පෑඩය ධාවනය කරන ආකාරයටම. මේ සඳහා පැනලයේ නව Replay Ghost බොත්තමක් පෙන්වයි.
පටිගත කරන්න, පාලකය සමඟ ටිකක් අවුල් කරන්න, නවත්වන්න, පසුව නැවත ධාවනය කරන්න. UI ඔබගේ යෙදවුම් අනුගමනය කරන අවතාරයක් මෙන් ඔබ කළ සියල්ල ප්රතිරාවය කරයි. මෙම අමතර දේවල් ගැන කරදර වන්නේ ඇයි?
පටිගත කිරීම/අපනයනය සිදු වූ දේ හරියටම පෙන්වීමට පරීක්ෂකයින්ට පහසු කරයි. ස්නැප්ෂොට් මොහොතකට කැටි වේ, ඔබ අමුතු දෝෂ පසුපස හඹා යන විට ඉතා ප්රයෝජනවත් වේ. නිබන්ධන, ප්රවේශ්යතා පිරික්සුම්, හෝ පාලන සැකසුම් එක පැත්තකින් සංසන්දනය කිරීම සඳහා අවතාර නැවත ධාවනය විශිෂ්ටයි.
මෙම අවස්ථාවෙහිදී, එය තවදුරටත් පිළිවෙලට නිරූපණයක් පමණක් නොව, ඔබට සැබවින්ම වැඩ කිරීමට හැකි දෙයක්. සැබෑ ලෝක භාවිත අවස්ථා දැන් අපට බොහෝ දේ කළ හැකි මෙම නිදොස්කරණයක් තිබේ. එය සජීවී ආදානය පෙන්වයි, ලොග වාර්තා කරයි, ඒවා අපනයනය කරයි, සහ දේවල් නැවත ධාවනය කරයි. නමුත් සැබෑ ප්රශ්නය නම්: ඇත්තටම සැලකිලිමත් වන්නේ කවුද? මෙය ප්රයෝජනවත් වන්නේ කාටද? ක්රීඩා සංවර්ධකයින් පාලකයන් කාර්යයේ කොටසකි, නමුත් ඒවා නිදොස් කිරීමද? සාමාන්යයෙන් වේදනාවක්. ඔබ ↓ → + පන්ච් වැනි සටන් ක්රීඩා සංයෝජනයක් පරීක්ෂා කරන බව සිතන්න. යාච්ඤා කරනවා වෙනුවට, ඔබ එය එකම ආකාරයෙන් දෙවරක් ඔබන්න, ඔබ එය එක් වරක් පටිගත කර නැවත ධාවනය කරන්න. කළා. නැතහොත් ඔබේ බහු ක්රීඩක කේතය ඔවුන්ගේ යන්ත්රය මත එලෙසම ප්රතික්රියා කරන්නේ දැයි පරීක්ෂා කිරීමට ඔබ කණ්ඩායමේ සගයකු සමඟ JSON ලොග හුවමාරු කර ගන්න. එය අති විශාලයි. ප්රවේශ්යතා වෘත්තිකයන් මෙය මගේ හදවතට සමීප එකක්. සෑම කෙනෙකුම "සම්මත" පාලකයක් සමඟ සෙල්ලම් නොකරයි. අනුවර්තන පාලකයන් සමහර විට අමුතු සංඥා නිකුත් කරයි. මෙම මෙවලම සමඟ, ඔබට සිදුවන්නේ කුමක්ද යන්න හරියටම දැක ගත හැකිය. ගුරුවරු, පර්යේෂකයෝ කවුරු වුණත්. ඔවුන්ට ලඝු-සටහන් ග්රහණය කර ගැනීමට, ඒවා සංසන්දනය කිරීමට හෝ යෙදවුම් දෙපැත්තට නැවත ධාවනය කිරීමට හැකිය. හදිසියේම, නොපෙනෙන දේවල් පැහැදිලිව පෙනේ. තත්ත්ව සහතික පරීක්ෂාව පරීක්ෂකයින් සාමාන්යයෙන් ලියන්නේ "මම මෙහි බොත්තම් පොඩි කළ අතර එය කැඩී ගියේය." ඉතා ප්රයෝජනවත් නොවේ. දැන්? ඔවුන්ට නිශ්චිත මුද්රණ යන්ත්ර ග්රහණය කර ගැනීමට, ලොගය අපනයනය කිරීමට සහ එය යැවීමට හැකිය. අනුමාන කිරීමක් නැත. අධ්යාපනඥයින් ඔබ නිබන්ධන හෝ YouTube වීඩියෝ සාදන්නේ නම්, අවතාර නැවත ධාවනය රන් වේ. UI එය සිදුවන බව පෙන්වන අතර, ඔබට වචනානුසාරයෙන්, "මෙන්න මම පාලකය සමඟ කළ දේ" යැයි පැවසිය හැකිය. පැහැදිලි කිරීම් වඩාත් පැහැදිලි කරයි. ක්රීඩා වලින් ඔබ්බට ඔව්, මෙය ක්රීඩා ගැන පමණක් නොවේ. මිනිසුන් රොබෝවරුන්, කලා ව්යාපෘති සහ ප්රවේශ්යතා අතුරුමුහුණත් සඳහා පාලකයන් භාවිතා කර ඇත. සෑම විටම එකම ගැටළුව: බ්රවුසරය ඇත්ත වශයෙන්ම දකින්නේ කුමක්ද? මේ සමඟ, ඔබ අනුමාන කළ යුතු නැත. නිගමනය පාලක ආදානයක් නිදොස් කිරීම සැමවිටම අන්ධ ලෙස පියාසර කිරීමක් ලෙස හැඟී ඇත. DOM හෝ CSS මෙන් නොව, ගේම් පෑඩ් සඳහා බිල්ට් ඉන්ස්පෙක්ටරයක් නොමැත; එය කොන්සෝලයේ ඇති අමු අංක පමණි, ශබ්දයෙන් පහසුවෙන් නැති වී යයි. HTML, CSS සහ JavaScript පේළි සිය ගණනක් සමඟින්, අපි වෙනස් දෙයක් ගොඩනඟා ගත්තෙමු:
නොපෙනෙන යෙදවුම් දෘශ්යමාන කරන දෘශ්ය නිදොස්කරණයකි. UI පිරිසිදුව සහ දෝශ නිරාකරණය කර තබන ස්ථර CSS පද්ධතියකි. වැඩිදියුණු කිරීම් සමූහයක් (පටිගත කිරීම, අපනයනය කිරීම, ස්නැප්ෂොට්, අවතාර නැවත ධාවනය) එය demo සිට සංවර්ධක මෙවලම දක්වා ඉහළ නංවයි.
මෙම ව්යාපෘතිය මඟින් CSS Cascade Layers හි කුඩා නිර්මාණශීලීත්වයක් සමඟ වෙබ් වේදිකාවේ බලය මිශ්ර කිරීමෙන් ඔබට කොපමණ දුරක් යා හැකිද යන්න පෙන්වයි. මම දැන් සම්පූර්ණයෙන් පැහැදිලි කළ මෙවලම විවෘත මූලාශ්ර වේ. ඔබට GitHub repo ක්ලෝන කර එය ඔබම උත්සාහ කළ හැකිය. නමුත් වඩා වැදගත් දෙය නම්, ඔබට එය ඔබේම කර ගත හැකිය. ඔබේම ස්ථර එකතු කරන්න. ඔබේම නැවත ධාවනය කිරීමේ තර්කයක් ගොඩනඟා ගන්න. එය ඔබගේ ක්රීඩා මූලාකෘතිය සමඟ ඒකාබද්ධ කරන්න. එහෙමත් නැත්නම් මම නොහිතපු විදිහට පාවිච්චි කරනවා. ඉගැන්වීම, ප්රවේශ්යතාව හෝ දත්ත විශ්ලේෂණය සඳහා. දවස අවසානයේදී, මෙය ගේම් පෑඩ් නිදොස් කිරීම පමණක් නොවේ. එය සැඟවුණු යෙදවුම් මත ආලෝකයක් දැල්වීම සහ වෙබය තවමත් සම්පූර්ණයෙන් වැලඳ නොගත් දෘඩාංග සමඟ වැඩ කිරීමට සංවර්ධකයින්ට විශ්වාසය ලබා දීමයි. එබැවින්, ඔබේ පාලකය සම්බන්ධ කර, ඔබේ සංස්කාරකය විවෘත කර, අත්හදා බැලීම ආරම්භ කරන්න. ඔබේ බ්රවුසරයට සහ ඔබේ CSS වලට සැබවින්ම ඉටු කළ හැකි දේ ගැන ඔබ පුදුම විය හැක.
