Ke hoʻopili ʻoe i kahi mea hoʻoponopono, kaomi ʻoe i nā pihi, hoʻoneʻe i nā lāʻau, huki i nā kumu ... a ma ke ʻano he mea hoʻomohala, ʻaʻole ʻoe e ʻike i kekahi o ia mea. Ke kiʻi nei ka polokalamu kele pūnaewele, ʻoiaʻiʻo, akā inā ʻaʻole ʻoe e hoʻopaʻa inoa i nā helu i ka console, ʻaʻole ʻike ʻia. ʻO ia ke poʻo me ka Gamepad API. Ua puni ia no nā makahiki, a he mana maoli nō. Hiki iā ʻoe ke heluhelu i nā pihi, nā lāʻau, nā kiʻi, nā hana. Akā ʻaʻole hoʻopā ka hapa nui o ka poʻe iā ia. No ke aha mai? No ka mea ʻaʻohe manaʻo. ʻAʻohe papa ma nā mea hana hoʻomohala. ʻAʻohe ala maopopo e ʻike inā ke hana nei ka mea hoʻoponopono i kou manaʻo. Me he mea lā e lele makapō ana. Ua lawa kēlā iaʻu e kūkulu i kahi mea hana liʻiliʻi: Gamepad Cascade Debugger. Ma kahi o ka nānā ʻana i ka console output, loaʻa iā ʻoe kahi hiʻohiʻona ola a pili i ka mea hoʻoponopono. E kaomi i kekahi mea a pane mai ma ka pale. A me CSS Cascade Layers, hoʻonohonoho pono nā ʻano, no laila ʻoi aku ka maʻemaʻe o ka debug. Ma kēia pou, e hōʻike wau iā ʻoe i ke kumu o ka ʻeha o ka debugging controllers, pehea e kōkua ai ka CSS i ka hoʻomaʻemaʻe ʻana, a pehea ʻoe e kūkulu ai i kahi debugger ʻike hiki ke hoʻohana hou ʻia no kāu mau papahana ponoʻī.
ʻOiai inā hiki iā ʻoe ke hoʻopaʻa inoa iā lākou āpau, e hoʻopau koke ʻoe i ka spam console hiki ʻole ke heluhelu ʻia. No ka laʻana: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Hiki iā ʻoe ke haʻi i ke pihi i kaomi ʻia? Malia paha, akā ma hope o ka hoʻopaʻa ʻana i kou mau maka a nalowale kekahi mau mea hoʻokomo. No laila, ʻaʻole, ʻaʻole hiki ke maʻalahi ka debugging i ka heluhelu ʻana i nā mea hoʻokomo. Pilikia 3: Ka hemahema o ka hale ʻOiai inā e hui pū ʻoe i kahi mea nānā wikiwiki, hiki i nā ʻano ke hele wikiwiki. Hiki ke hoʻopili ʻia nā mokuʻāina paʻamau, ʻeleu a me ka debug, a me ka ʻole o ka hoʻolālā akaka, lilo kāu CSS i mea palupalu a paʻakikī hoʻi e hoʻonui. Hiki i nā CSS Cascade Layers ke kōkua. Hoʻopili lākou i nā ʻano i loko o nā "papa" i kauoha ʻia e ka mea nui, no laila e hoʻōki ʻoe i ka hakakā ʻana i ka kikoʻī a me ka manaʻo ʻana, "No ke aha ʻaʻole e hōʻike ʻia koʻu ʻano debug?" Akā, mālama ʻoe i nā manaʻo like ʻole:
Base: ʻO ka maʻamau o ka mea hoʻoponopono, ʻike mua. Active: Nā mea koʻikoʻi no nā pihi kaomi a me nā lāʻau hoʻoneʻe. Debug: Nā uhi no nā mea hoʻomohala (e laʻa, helu helu helu, alakaʻi, a pēlā aku).
Inā mākou e wehewehe i nā papa ma CSS e like me kēia, loaʻa iā mākou: /* haʻahaʻa a hiki i ke kūlana kiʻekiʻe loa */ @layer base, ʻeleu, debug;
@papa kumu { /* ... */ }
@layer hana { /* ... */ }
@kahi hoʻopololei { /* ... */ }
No ka mea hiki ke hoʻopaʻa ʻia kēlā me kēia papa, ʻike mau ʻoe i nā lula e lanakila. ʻAʻole maʻalahi kēia wānana i ka debugging wale nō, akā hiki ke hoʻokele maoli. Ua uhi mākou i ka pilikia (ʻike ʻole ʻia, hoʻokomo ʻia) a me ke ala (kahi debugger ʻike i kūkulu ʻia me Cascade Layers). I kēia manawa e hele mākou i ke kaʻina hana i kēlā me kēia pae e kūkulu i ka debugger. Ka Manaʻo Debugger ʻO ke ala maʻalahi loa e ʻike ʻia nā mea huna huna, ʻo ke kahakiʻi wale ʻana iā ia ma ka pale. ʻO ia ka mea e hana ai kēia debugger. Loaʻa i nā pihi, nā mea hoʻoulu, a me nā lāʻau hauʻoli.
E kaomi iā A: E ʻā ana ka pōʻai. E hoʻokuʻu i ka lāʻau: Holo ka pōʻai a puni. Huki i ke kumu i ka hapalua: Hoʻopiha ka pā i ka hapalua.
I kēia manawa ʻaʻole ʻoe e nānā ana i ka 0s a me 1s, akā ke nānā maoli nei i ka mea hoʻoponopono e hana ola. ʻOiaʻiʻo, i ka manawa e hoʻomaka ai ʻoe e hoʻopili i nā mokuʻāina e like me ka paʻamau, kaomi ʻana, ka ʻike debug, a i ʻole ke ʻano hoʻopaʻa leo, hoʻomaka ka CSS e hoʻonui a paʻakikī. ʻO ia kahi e hiki mai ai nā papa cascade. Eia kahi laʻana i wehe ʻia: @papa kumu { . pihi { hope: #222; palena palena: 50%; laula: 40px; kiekie: 40px; } }
@layer hana { . pihi. kaomi { hope: #0f0; /* ʻōmaʻomaʻo ʻōmaʻomaʻo */ } }
@kahi hoʻopololei { pihi .:: ma hope o { maʻiʻo: attr(ʻikepili-waiwai); ka nui kikokikona: 12px; kala: #fff; } }
He mea nui ka papa kuhikuhi: base → active → debug.
kumu huki i ka mea hooponopono. nā lima ikaika i kaomi ʻia. hoʻolei debug ma luna o nā uhi.
ʻO ka uhaʻi ʻana e like me kēia, ʻaʻole ʻoe e hakakā i nā kaua kikoʻī. Aia kēlā me kēia papa i kona wahi, a ʻike mau ʻoe i ka mea lanakila. Kūkulu ʻia E kiʻi mua i kekahi mea ma ka pale. ʻAʻole pono ke nānā maikaʻi - pono e ola i loaʻa iā mākou kahi mea e hana pū ai.
Papa Paʻi Paʻi Paʻi Paʻi Paʻi
He mau pahu wale nō kēlā. ʻAʻole hoihoi i kēia manawa, akā hāʻawi ia iā mākou i nā lima e hopu ma hope me CSS a me JavaScript. ʻAe, ke hoʻohana nei au i nā papa cascade ma ʻaneʻi no ka mea mālama ia i nā mea i hoʻonohonoho ʻia ke hoʻohui ʻoe i nā mokuʻāina hou aʻe. Eia kahi ala paʻakikī:
/* ================================================== HOOLAHA HANA HANA Nā mea pili i ke kauoha: base → active → debug ================================================== */
/* E wehewehe i ka hoʻonohonoho papa ma mua */ @layer base, ʻeleu, debug;
/* Layer 1: Nā ʻano kumu - hiʻohiʻona paʻamau */ @papa kumu { . pihi { hope: #333; palena palena: 50%; laula: 70px; kiekie: 70px; hōʻike: flex; justify-content: kikowaena; align-items: kikowaena; }
.hoomaha { laula: 20px; kiekie: 70px; hope: #333; hōʻike: inline-block; } }
/* Layer 2: Nā kūlana hana - mālama i nā pihi i kaomi ʻia */ @layer hana { .button.active { hope: #0f0; /* ʻōmaʻomaʻo ʻōmaʻomaʻo ke kaomi ʻia */ hoʻololi: scale(1.1); /* Hoʻonui iki i ke pihi */ }
.pause.active { hope: #0f0; hoʻololi: scaleY(1.1); /* Holo pololei ke kaomi ʻana */ } }
/* Layer 3: Debug overlays - ʻike mea hoʻomohala */ @kahi hoʻopololei { pihi .:: ma hope o { maʻiʻo: attr(ʻikepili-waiwai); /* Hōʻike i ka waiwai helu */ ka nui kikokikona: 12px; kala: #fff; } }
ʻO ka nani o kēia ala ʻo ia ke kumu maopopo o kēlā me kēia papa. ʻAʻole hiki i ka papa kumu ke hoʻopau i ka hana, a ʻaʻole hiki i ka Active ke hoʻopau i ka debug, me ka nānā ʻole i ka kikoʻī. Hoʻopau kēia i nā kaua kikoʻī CSS e hoʻopilikia pinepine i nā mea hana debugging. I kēia manawa me he mea lā e noho ana kekahi mau puʻupuʻu ma kahi ʻeleʻele. ʻOiaʻiʻo, ʻaʻole ʻino loa.
Hoʻohui i ka JavaScript manawa JavaScript. ʻO kēia kahi e hana maoli ai ka mea hoʻoponopono i kekahi mea. E kūkulu mākou i kēia ʻanuʻu. KaʻAnuʻu Hana 1: Hoʻonohonoho i ka hoʻokele aupuni ʻO ka mea mua, pono mākou i nā mea hoʻololi e nānā i ke kūlana o ka debugger: // ================================================== // HOOLAHA KUAI // ==================================================
e holo = wahahee; // Tracks inā ʻeleu ka debugger e rafId; // Mālama i ka ID requestAnimationFrame no ke kāpae ʻana
Mālama kēia mau mea hoʻololi i ka loop animation e heluhelu mau ana i ka hoʻokomo gamepad. KaʻAnuʻu Hana 2: E kiʻi i ka DOM References A laila, loaʻa iā mākou nā kuhikuhi i nā mea HTML āpau a mākou e hoʻonui ai: // ================================================== // DOM ELEMENT REFERENCES // ==================================================
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("kūlana");
ʻOi aku ka maikaʻi o ka mālama ʻana i kēia mau kuhikuhi ma mua o ka nīnau pinepine ʻana i ka DOM. KaʻAnuʻu Hana 3: Hoʻohui Keyboard Fallback No ka hoʻāʻo ʻana me ka ʻole o ka mana kino, e palapala mākou i nā kī kī i nā pihi: // ================================================== // KEYBOARD FALLBACK (no ka hoʻāʻo ʻana me ka ʻole o ka mana) // ==================================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' hoʻomalu i nā pahu hoʻomaha ʻelua };
ʻAe kēia iā mākou e hoʻāʻo i ka UI ma ke kaomi ʻana i nā kī ma kahi kī. KaʻAnuʻu Hana 4: E hana i ka Main Update Loop Eia kahi e hana ai ka hana kilokilo. Ke holo mau nei kēia hana a heluhelu i ke kūlana gamepad: // ================================================== // LOOP PĀPĀPĀ NUI // ==================================================
hana updateGamepad() { // E kiʻi i nā gamepads pili const gamepads = navigator.getGamepads(); inā (!gamepads) hoʻi;
// E hoʻohana i ka gamepad pili mua const gp = gamepads[0];
ina (gp) { // Hōʻano hou i nā moku'āina ma ka hoʻololi ʻana i ka papa "active". btnA.classList.toggle("active", gp.buttons[0]. kaomi); btnB.classList.toggle("active", gp.buttons[1]. kaomi); btnX.classList.toggle("active", gp.buttons[2]. kaomi);
// E hoʻopaʻa i ke pihi hoʻomaha (ka helu helu 9 ma ka hapa nui o nā mea hoʻoponopono) const pausePressed = gp.buttons[9]. kaomi; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);
// Kūkulu i kahi papa inoa o nā pihi i kaomi ʻia i kēia manawa no ka hōʻike kūlana e kaomi = []; gp.buttons.forEach((btn, i) => { inā (btn. kaomi)kaomi.push("Pūkū " + i); });
// Hōʻano hou i ke kikokikona kūlana inā paʻi ʻia kekahi pihi inā (paʻi.lōʻihi > 0) { status.textContent = "Paʻi ʻia: " + pressed.join(", "); } }
// E hoʻomau i ka loop inā holo ka debugger inā (holo) { rafId = requestAnimationFrame(updateGamepad); } }
Hoʻohui a wehe paha ke ʻano classList.toggle() i ka papa hana ma muli o ke kaomi ʻana i ke pihi, kahi e hoʻoulu ai i kā mākou ʻano papa CSS. KaʻAnuʻu Hana 5: E mālama i nā hanana Keyboard Hoʻohana kēia mau mea hoʻolohe hanana i ka hana fallback keyboard: // ================================================== // NA LUNA HANA HANA // ==================================================
document.addEventListener("keydown", (e) => { ina (keyMap[e.key]) { // Hoʻohana i hoʻokahi a i ʻole nā mea he nui inā (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } ʻē aʻe { keyMap[e.key].classList.add("active"); } status.textContent = "Kuhi ʻia ke kī: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { ina (keyMap[e.key]) { // Wehe i ke kūlana hana ke hoʻokuʻu ʻia ke kī inā (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } ʻē aʻe { keyMap[e.key].classList.remove("active"); } status.textContent = "Hoʻokuʻu ʻia ke kī: " + e.key.toUpperCase(); } });
KaʻAnuʻu Hana 6: E hoʻohui i ka Mana Hoʻomaka/Stop ʻO ka hope, pono mākou i kahi ala e hoʻohuli ai i ka debugger a i ʻole: // ================================================== // E HOʻOLOHE I KA DEBUGGER ON/OFF // ==================================================
document.getElementById("toggle").addEventListener("kaomi", () => { holo = !holo; // Hoʻohuli i ke kūlana holo
inā (holo) { status.textContent = "Ke holo nei ka Debugger..."; updateGamepad(); // E hoʻomaka i ka loop loop } ʻē aʻe { status.textContent = "ʻAʻole hoʻokō ka mea hoʻoponopono"; cancelAnimationFrame(rafId); // Hooki i ka loop } });
No laila ʻae, kaomi i kahi pihi a ʻā. E kaomi i ka lāʻau a neʻe. ʻo ia wale nō. Hoʻokahi mea hou: nā waiwai maka. I kekahi manawa makemake wale ʻoe e ʻike i nā helu, ʻaʻole nā kukui.
I kēia pae, pono ʻoe e ʻike:
ʻO kahi mea hoʻoponopono ma ka pale maʻalahi, ʻO nā pihi e pane ana i kou launa pū ʻana me lākou, a He helu helu debug koho e hōʻike ana i nā kuhikuhi pihi pihi.
No ka hoʻohaʻahaʻa ʻana i kēia, eia kahi demo wikiwiki o ka mea hoʻokele ma ka ʻaoʻao e pane ana i ka manawa maoli:
I kēia manawa, kaomi i ka Start Recording e hoʻopaʻa i nā mea a pau a hiki i ka wā e paʻi ai ʻoe Stop Recording. 2. Ka lawe ʻana i ka ʻikepili i CSV/JSON Ke loaʻa iā mākou kahi log, makemake mākou e mālama.
KaʻAnuʻu Hana 1: hana i ka Download Helper ʻO ka mea mua, pono mākou i kahi hana kōkua e hoʻoiho i nā faila ma ka polokalamu kele pūnaewele: // ================================================== // FILE DOWNLOAD KOKUA // ==================================================
hana hoʻoihoFile(inoa faila, ʻike, ʻano = "kikokikona / paʻa") { // E hana i kahi blob mai ka ʻike const blob = hou Blob([maʻiʻo], {ʻano}); const url = URL.createObjectURL(blob);
// E hana i kahi loulou download no ka manawa pōkole a kaomi iā ia const a = document.createElement("a"); a.href = url; a.download = inoa waihona; a. kaomi ();
// E hoʻomaʻemaʻe i ka URL mea ma hope o ka hoʻoiho ʻana setTimeout(() => URL.revokeObjectURL(url), 100); }
Hana ʻia kēia hana ma ka hana ʻana i kahi Blob (mea nui binary) mai kāu ʻikepili, e hana ana i kahi URL no ka manawa pōkole, a me ke kaomi ʻana i kahi loulou download. Mālama ka hoʻomaʻemaʻe ʻaʻole mākou e hoʻomanaʻo. KaʻAnuʻu Hana 2: E lawelawe i ka JSON Export He kūpono ʻo JSON no ka mālama ʻana i ka ʻōnaehana ʻikepili piha:
// ================================================== // EXPORT AS JSON // ==================================================
document.getElementById("export-json").addEventListener("kaomi", () => { // E nānā inā loaʻa kekahi mea e lawe aku ai inā (!frames.longth) { console.warn("ʻAʻohe hoʻopaʻa hoʻopaʻa i hiki ke hoʻokuʻu aku."); hoʻi; }
// E hana i kahi uku me nā metadata a me nā kiʻi uku hoʻomau = { haku ʻia ma: lā hou ().toISOString(), nā papa };
// Hoʻoiho e like me JSON i hoʻopaʻa ʻia downloadFile( "gamepad-log.json", JSON.stringify(payload, null, 2), "noi/json" ); });
Mālama ka JSON format i nā mea a pau i hoʻonohonoho ʻia a maʻalahi hoʻi i ka parseable, i mea kūpono no ka hoʻouka hou ʻana i nā mea hana dev a i ʻole kaʻana like me nā hoa hui. KaʻAnuʻu Hana 3: E lawelawe i ka CSV Export No ka lawe ʻana aku i ka CSV, pono mākou e palahalaha i ka ʻikepili hierarchical i nā lālani a me nā kolamu:
//================================================== // KA HOʻOKE AKU I CSV // ==================================================
document.getElementById("export-csv").addEventListener("click", () => { // E nānā inā loaʻa kekahi mea e lawe aku ai inā (!frames.longth) { console.warn("ʻAʻohe hoʻopaʻa hoʻopaʻa i hiki ke hoʻokuʻu aku."); hoʻi; }
// Kūkulu i ka lālani poʻomanaʻo CSV (nā kolamu no ka hōʻailona manawa, nā pihi āpau, nā koi āpau) 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";
// Kūkulu i nā lālani ʻikepili CSV nā lālani const = frames.map(f => { const btnVals = f.buttons.map(b => b.value); hoʻi [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Hoʻoiho ma ke ʻano he CSV downloadFile("gamepad-log.csv", poʻomanaʻo + lālani, "text/csv"); });
Maikaʻi ka CSV no ka nānā ʻana i ka ʻikepili no ka mea e wehe pololei ana ia ma Excel a i ʻole Google Sheets, e ʻae iā ʻoe e hana i nā pakuhi, kānana ʻikepili, a i ʻole nā hiʻohiʻona ʻike maka. I kēia manawa aia nā pihi hoʻokuʻu aku, e ʻike ʻoe i ʻelua mau koho hou ma ka papa: Export JSON a me Export CSV. Maikaʻi ʻo JSON inā makemake ʻoe e hoʻolei i ka lāʻau maka i kāu mau mea hana dev a i ʻole e hoʻopuni a puni ka hale. ʻO CSV, ma kekahi ʻaoʻao, wehe pololei i Excel a i ʻole Google Sheets i hiki iā ʻoe ke pakuhi, kānana, a hoʻohālikelike i nā mea hoʻokomo. Hōʻike ka kiʻi ma lalo nei i ke ʻano o ka panel me kēlā mau mana hou.
3. Pūnaehana Kiʻi Kiʻi I kekahi manawa ʻaʻole pono ʻoe i kahi hoʻopaʻa hoʻopaʻa piha, ʻo kahi "screenshot" wikiwiki o nā mokuʻāina hoʻokomo. ʻO ia kahi e kōkua ai kahi pihi Take Snapshot.
A me ka JavaScript:
// ================================================== // LAWE I KA PILI // ==================================================
document.getElementById("snapshot").addEventListener("click", () => { // E kiʻi i nā gamepads pili const pads = navigator.getGamepads(); const activePads = [];
// Loop a hopu i ke kūlana o kēlā me kēia gamepad pili no (const gp of pads) { ina (!gp) hoomau; // Hoʻokuʻu i nā pahu hakahaka
activePads.push({ id: gp.id, // Ka inoa hoʻomalu/hoʻohālike hōʻailona manawa: performance.now(), pihi: gp.buttons.map(b => ({ kaomi: b. kaomi, waiwai: b.waiwai })), koʻi: [...gp.axes] }); }
// E nānā inā loaʻa kekahi gamepads inā (!activePads.length) { console.warn("ʻAʻohe gamepads i hoʻopili ʻia no ka snapshot."); alert("ʻAʻole i ʻike ʻia ka mea hoʻokele!"); hoʻi; }
// Log a hoʻomaopopo i ka mea hoʻohana console.log("Snapshot:", activePads); makaʻala(Paʻi kiʻi! Paʻa ${activePads.length} mea hoʻoponopono; });
Hoʻokuʻu nā kiʻi paʻi kiʻi i ke kūlana pololei o kāu mea hoʻoponopono i ka manawa hoʻokahi. 4. Hoʻokomo hou ʻana i ka ʻuhane I kēia manawa no ka mea leʻaleʻa: hoʻokani hou i ka hoʻokomo ʻuhane. Lawe kēia i kahi lāʻau a pāʻani iā ia me he mea lā e hoʻohana ana kahi mea pāʻani phantom i ka mea hoʻoponopono.
JavaScript no ka hana hou: // ================================================== // HANUI REPLAY // ==================================================
document.getElementById("replay").addEventListener("click", () => { // E hōʻoia e loaʻa iā mākou kahi leo e hoʻokani hou inā (!frames.longth) { alert("ʻAʻohe leo e hoʻokani hou!"); hoʻi; }
console.log("E hoʻomaka ana i ka hoʻokani hou ʻana o ka ʻuhane ...");
// Hoʻopaʻa manawa no ka pāʻani ʻana i hoʻonohonoho ʻia let startTime = performance.now(); e waiho frameIndex = 0;
// Hoʻokani hou i ka loop animation pae hana () { const i kēia manawa = performance.now(); const elapsed = kēia manawa - startTime;
// E hana i nā papa āpau i hana ʻia i kēia manawa ʻoiai (frameIndex < frames.longth && frames[frameIndex].t <= elapsed) { const frame = mau papa[frameIndex];
// Hoʻohou i ka UI me nā kī kī i hoʻopaʻa ʻia btnA.classList.toggle("active", frame.buttons [0]. kaomi); btnB.classList.toggle("active", frame.buttons [1]. kaomi); btnX.classList.toggle("active", frame.buttons [2]. kaomi);
// Hōʻike hōʻike kūlana e kaomi = []; frame.buttons.forEach((btn, i) => { inā (btn.pressed) pressed.push("Button " + i); }); inā (paʻi.lōʻihi > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// E hoʻomau i ka loop inā nui nā papa inā (frameIndex < frames.longth) { requestAnimationFrame(step); } ʻē aʻe { console.log("Hoʻokani houpau."); status.textContent = "Paʻi hou ʻia"; } }
// Hoʻomaka i ka pāʻani hou ʻanuʻu (); });
No ka hana ʻana i ka debugging i kahi lima hou aku, ua hoʻohui au i kahi replay ghost. Ke hoʻopaʻa ʻoe i kahi kau, hiki iā ʻoe ke paʻi hou a nānā i ka hana ʻana o ka UI, kokoke e like me ka mea pāʻani phantom e holo ana i ka pad. Hōʻike ʻia kahi pihi Replay Ghost hou i ka papa no kēia.
Hit Record, huikau iki me ka mea hooponopono, hooki, a hookani hou. Hoʻokani wale ka UI i nā mea a pau āu i hana ai, e like me ka ʻuhane ma hope o kāu mau hoʻokomo. No ke aha e pilikia ai kēia mau mea ʻokoʻa?
He mea maʻalahi ka hoʻopaʻa ʻana/hoʻokuʻu aku i nā mea hoʻāʻo e hōʻike pololei i ka mea i hana ʻia. Paʻa nā kiʻi paʻi kiʻi i kekahi manawa i ka manawa, maikaʻi loa i ka wā e alualu ana ʻoe i nā pōpoki ʻino. He mea maikaʻi ka Ghost replay no nā aʻo aʻo ʻana, ka nānā ʻana i ka hiki, a i ʻole ka hoʻohālikelike ʻana i nā hoʻonohonoho mana ma kēlā ʻaoʻao.
I kēia manawa, ʻaʻole ia he demo maʻemaʻe wale nō, akā he mea hiki iā ʻoe ke hana maoli. Nā hihia hoʻohana o ka honua maoli I kēia manawa ua loaʻa iā mākou kēia debugger hiki ke hana nui. Hōʻike ia i ka hoʻokomo ola, hoʻopaʻa i nā lāʻau, hoʻokuʻu aku iā lākou, a hōʻike hou i nā mea. Akā ʻo ka nīnau maoli: ʻo wai ka mea mālama? No wai kēia pono? Nā mea hoʻomohala pāʻani ʻO nā mea hoʻomalu he ʻāpana o ka hana, akā ke hoʻopau nei iā lākou? He ʻeha maʻamau. E noʻonoʻo ʻoe e hoʻāʻo nei i kahi hui pāʻani hakakā, e like me ↓ → + punch. Ma kahi o ka pule ʻana, kaomi ʻelua ʻelua, hoʻopaʻa ʻoe i hoʻokahi manawa, a hoʻokani hou. Pau. A i ʻole ʻoe e hoʻololi i nā lāʻau JSON me kahi hoa hui e nānā inā like ke ʻano o kāu code multiplayer ma kā lākou mīkini. Nui kēlā. Nā Laʻau Loaʻa ʻO kēia kahi kokoke i koʻu puʻuwai. ʻAʻole pāʻani nā mea a pau me kahi mea hoʻokele "maʻamau". Kiola nā mea hoʻoponopono hoʻololi i nā hōʻailona ʻano ʻē i kekahi manawa. Me kēia mea hana, hiki iā ʻoe ke ʻike pololei i ka mea e hana nei. Nā kumu, nā mea noiʻi, ʻo wai lā. Hiki iā lākou ke hopu i nā lāʻau, hoʻohālikelike iā lākou, a hoʻokani hou i nā mea hoʻokomo ʻaoʻao. Hiki koke, ʻike ʻia nā mea ʻike ʻole. ʻO ka hōʻoia ʻana i ka maikaʻi E kākau maʻamau nā mea hōʻike i nā memo e like me "Ua paʻi au i nā pihi ma ʻaneʻi a haki ia." ʻAʻole kōkua nui. I kēia manawa? Hiki iā lākou ke hopu i nā paʻi pololei, hoʻokuʻu aku i ka log, a hoʻouna aku. ʻAʻohe kuhi. Nā mea hoʻonaʻauao Inā ʻoe e hana nei i nā aʻo aʻo a i ʻole YouTube vids, he gula ke kiʻi hou ʻana i ka ʻuhane. Hiki iā ʻoe ke ʻōlelo maoli, "Eia kaʻu i hana ai me ka mea hoʻoponopono," ʻoiai ke hōʻike nei ka UI e hana ana. Maikaʻi ka wehewehe ʻana. Ma waho aʻe o nā pāʻani A ʻae, ʻaʻole pili wale kēia i nā pāʻani. Ua hoʻohana ka poʻe i nā mea hoʻoponopono no nā robots, nā papahana noʻeau, a me nā pilina hiki ke loaʻa. Hoʻokahi pilikia i kēlā me kēia manawa: he aha ka mea e ʻike maoli ai ka polokalamu kele? Me kēia, ʻaʻole pono ʻoe e kuhi. Ka hopena ʻO ka hoʻopau ʻana i kahi hoʻokomo mea hoʻoponopono e like me ka lele makapō. ʻAʻole like me ka DOM a i ʻole CSS, ʻaʻohe mea nānā i kūkulu ʻia no nā gamepads; He helu maka wale ia i ka console, nalowale maʻalahi i ka walaʻau. Me kekahi mau laina laina o HTML, CSS, a me JavaScript, kūkulu mākou i kahi mea ʻokoʻa:
ʻO kahi debugger hiʻohiʻona e ʻike ʻia nā mea hoʻokomo i ʻike ʻole ʻia. He ʻōnaehana CSS layered e mālama i ka UI maʻemaʻe a hiki ke hoʻopau. He pūʻulu o nā mea hoʻonui (hoʻopaʻa, hoʻokuʻu aku, paʻi kiʻi, hoʻokani hou ʻana i ka ʻuhane) e hoʻokiʻekiʻe iā ia mai ka demo i ka mea hana mea hoʻomohala.
Hōʻike kēia papahana i kahi mamao e hiki ai iā ʻoe ke hele ma ka hoʻohui ʻana i ka mana o ka Pūnaewele Pūnaewele me kahi mea hoʻomohala liʻiliʻi ma CSS Cascade Layers. ʻO ka mea hana aʻu i wehewehe ai i kona holoʻokoʻa he open-source. Hiki iā ʻoe ke clone i ka GitHub repo a hoʻāʻo iā ʻoe iho. Akā ʻo ka mea nui, hiki iā ʻoe ke hana iā ʻoe iho. Hoʻohui i kāu mau papa ponoʻī. Kūkulu ʻoe i kāu loiloi replay ponoʻī. E hoʻohui pū me kāu prototype pāʻani. A i ʻole e hoʻohana i nā ala aʻu i noʻonoʻo ʻole ai. No ke aʻo ʻana, hiki ke loaʻa, a i ʻole ka nānā ʻana i ka ʻikepili. I ka hopena o ka lā, ʻaʻole kēia e pili ana i ka debugging gamepads. E pili ana i ka hoʻomālamalama ʻana i nā mea huna huna, a hāʻawi i nā mea hoʻomohala i ka hilinaʻi e hana me nā lako lako ʻaʻole i hoʻopili piha ʻia ka pūnaewele. No laila, hoʻopili i kāu mea hoʻoponopono, wehe i kāu mea hoʻoponopono, a hoʻomaka i ka hoʻokolohua. Mahalo paha ʻoe i ka mea hiki i kāu polokalamu kele pūnaewele a me kāu CSS ke hoʻokō maoli.
