In This Article

Markaad xirto kontaroolaha, waxaad shiishaa badhamada, dhaqaaqdaa ulaha, jiid kiciyeyaasha… horumariye ahaan, midna ma arkaysid. Browser-ku wuu soo qaadanayaa, hubaal, laakiin haddii aadan lambarrada ku qorin console-ka, waa wax aan la arki karin. Taasi waa madax xanuunka Gamepad API. Waxay jirtay sanado, runtiina waa mid aad u awood badan. Waxaad akhrin kartaa badhamada, ulaha, kiciyeyaasha, shaqooyinka. Laakiin dadka intooda badan ma taabtaan. Waa maxay sababtu? Sababtoo ah ma jirto jawaab celin. Ma jiro guddi ku jira qalabka horumariyaha Ma jirto hab cad oo lagu ogaan karo haddii maamuluhu uu xitaa samaynayo waxaad u malaynayso. Waxay u muuqataa sidii indhoole duulaya. Taasi waxay igu dhibtay inaan dhiso qalab yar: Gamepad Cascade Debugger. Halkii aad ku eegi lahayd wax soo saarka console-ka, waxaad helaysaa muuqaal toos ah, is dhexgal ah oo ku saabsan xakamaynta. Wax taabo oo waxay kaga falcelinaysaa shaashadda. Iyo CSS Cascade Layers, qaababku waa ay habaysan yihiin, marka way ka nadiifsan tahay in la saxo. Maqaalkan, waxaan ku tusi doonaa sababta xakamaynta cilladaha ay u xanuun badan tahay, sida CSS ay u caawiso nadiifinta, iyo sida aad u dhisi karto cilladaha muuqaalka dib loo isticmaali karo mashaariicdaada.

Xitaa haddii aad awooddo inaad wada qorto, waxaad si dhakhso ah ugu dambayn doontaa spam console oo aan la akhrin karin. Tusaale ahaan: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]

Ma sheegi kartaa batoonka la riixay? Waxaa laga yaabaa, laakiin kaliya ka dib markaad fiirsato indhahaaga oo aad weydo wax yar oo la geli karo. Markaa, maya, khaladku si fudud kuma yimaado marka ay timaado akhrinta agabka. Dhibaatada 3: La'aanta Qaab-dhismeed Xitaa haddii aad isku tuurto sawir-qaade degdeg ah, qaab-dhismeedyadu si dhakhso ah ayey u qasan karaan. Dawladaha caadiga ah, firfircoon, iyo kuwa khaladka wax ka beddelaya way is-dul-qaadi karaan, haddii aanay jirin qaab-dhismeed cad, CSS-taadu waxay noqotaa mid jajaban oo ay adag tahay in la kordhiyo. Lakabyada Cascade ee CSS ayaa ku caawin kara. Waxay u qaabeeyaan qaababka "lakabyada" kuwaas oo lagu dalbado mudnaanta, si aad u joojiso dagaalka gaarka ah oo aad qiyaasto, "Maxay tahay sababta qaabka khaladkaygu u muujin waayay?" Taa beddelkeeda, waxaad ilaalinaysaa walaacyo kala duwan:

Saldhig: Halbeegga kantaroolaha, muuqaalka hore. Firfircoon: Waxyaabaha ugu muhiimsan ee badhamada la riixay iyo ulaha dhaqaaqay. Debug: Duldhigidda soosaarayaasha (tusaale, akhrin tirooyin ah, hagitaan, iyo wixii la mid ah).

Haddii aan ku qeexno lakabyada CSS sida tan, waxaan yeelan lahayn: /* ugu hooseeya ilaa mudnaanta ugu sareysa */ @Layer base, firfircoon, cillad;

@lakabka saldhiga { /*...*/ }

@lakab firfircoon { /*...*/ }

@lakabka qaladka { /*...*/ }

Sababtoo ah lakab kastaa wuxuu isku dhejiyaa saadaasha, had iyo jeer waxaad taqaanaa xeerarka guuleysta. Saadaashaas ayaa ka dhigaysa qaladka oo keliya ma fududa, laakiin run ahaantii la maareyn karo. Waxaan daboolnay dhibaatada (aan la arki karin, gelinta khariban) iyo habka (qalab-qalab muuqaal ah oo lagu dhisay lakabyo Cascade ah). Hadda waxaan ku socon doonaa habka tallaabo-tallaabo si aan u dhisno cilladaha. Fikradda Debugger Sida ugu fudud ee wax gelinta qarsoon loo muujin karo waa in kaliya lagu sawiro shaashadda. Taasi waa waxa uu sameeyo cilladaha. Badhamada, kiciyeyaasha, iyo joysticks dhamaantood waxay helayaan muuqaal.

Riix A: Goobo ayaa ifaysa. Duji usha: goobaabintu way wareegaysaa. Jiid kiciye kala bar: Bar ayaa buuxinaysa kala bar.

Hadda ma eegaysid 0s iyo 1s, laakiin dhab ahaantii daawashada kontaroolaha oo si toos ah uga falcelinaya. Dabcan, marka aad bilowdo inaad ku ururiso gobolada sida default, la riixay, macluumaadka debug, laga yaabee xitaa qaabka duubista, CSS wuxuu bilaabaa inuu sii weynaado oo ka sii adag yahay. Taasi waa meesha lakabyada cascade ay ku anfacaan. Waa kuwan tusaale hoos loo dhigay: @lakabka saldhiga { .badhanka { asalka: # 222; xadka-radius: 50%; ballac: 40px; dhererka: 40px; } }

@lakab firfircoon { .badhanka.lagu riixay { asalka: # 0f0; /* cagaar dhalaalaya */ } }

@lakabka qaladka { .button::ka dib { content: attr (data-qiimaha); cabbirka font: 12px; midab: #ff; } }

Amarka lakabka arrimaha: saldhiga → firfircoon → debug.

salku waxa uu sawiraa kantaroolaha. fir-fircooni waxay qabataa gobolada la cadaadiyo. cilad-saarku waxay ku tuurtaa dul-kordhinta.

Sidan oo kale u jebintu waxay la macno tahay inaadan la dagaalamayn dagaallo qaas ah oo qariib ah. Lakab kastaa meel buu leeyahay, mar walbana waad garanaysaa waxa guulaysta. Dhisidda Out Marka hore aan wax ka helno shaashadda. Looma baahna inay si fiican u muuqato - kaliya waxay u baahan tahay inay jiraan si aan u helno wax aan ku shaqeyno.

Gamepad Cascade Debugger

Beddel Debug

Taasi dhab ahaantii waa sanduuqyo. Weli ma faraxsanayn, laakiin waxa ay na siinaysaa gacan-qabsi aan hadhow ku qabsanno CSS iyo JavaScript. Hagaag, waxaan halkan ku isticmaalayaa lakabyo cascade sababtoo ah waxay ilaalinaysaa alaabta marka aad ku darto gobolo badan. Halkan waxaa ah baas adag:

/* =================================== Dejinta lakabyada Cascade Arrimaha dalbashada: saldhiga → firfircoon → debug =================================

/* Qeex dalbashada lakabka hore */ @Layer base, firfircoon, cillad;

/* Lakabka 1: Qaababka salka - muuqaalka caadiga ah */ @lakabka saldhiga { .badhanka { asalka: # 333; xadka-radius: 50%; ballac: 70px; dhererka: 70px; bandhig: dabacsanaan; qiil-content: xarun; isku toosi walxaha: xarun; }

hakin { ballac: 20px; dhererka: 70px; asalka: # 333; bandhig: xariiqda-block; } }

/* Lakabka 2: Dawladaha firfircoon - waxay qabtaan badhamada la riixay */ @lakab firfircoon { .badhanka.firfircoon { asalka: # 0f0; /* Cagaar dhalaalaya marka la riixo */ isbeddel: miisaan (1.1); /* Wax yar bay badhanka weynaysaa */ }

hakin. firfircoon { asalka: # 0f0; isbeddel: miisaanY (1.1); /* Wuxuu u fidiyaa si toosan marka la riixo */ } }

/* Lakabka 3: Dejinta dulsaarrada - macluumaadka horumariyaha */ @lakabka qaladka { .button::ka dib { content: attr (data-qiimaha); /* Wuxuu muujiyaa qiimaha nambarada */ cabbirka font: 12px; midab: #ff; } }

Quruxda habkani waa in lakab kastaa leeyahay ujeedo cad. Lakabka salku waligii ma baabi'in karo firfircoonida, firfircoonina waligii ma baabi'in karo cilladaha, iyada oo aan loo eegin gaar ahaaneed. Tani waxay meesha ka saaraysaa dagaalada gaarka ah ee CSS ee sida caadiga ah aafeeya aaladaha wax-ka-darida. Hadda waxa ay u egtahay in kooxaha qaar ay ku fadhiyaan asal madow. Daacadnimo, ma xuma.

Ku darida JavaScript Waqtiga JavaScript. Tani waa meesha koontarooluhu dhab ahaantii wax ku sameeyo. Waxaan u dhisi doonaa tan tallaabo tallaabo. Tallaabada 1: Deji Maamulka Gobolka Marka hore, waxaan u baahanahay doorsoomayaal si aan ula socono xaalada debugger: // ================================== // MAAMULKA GOBOLKA // ==================================

orod = been; // Wuxuu la socdaa haddii cilladaha uu firfircoon yahay ha rafId; // Waxay kaydisaa codsigaAnimationFrame ID si loo tirtiro

Doorsoomayaashani waxay xakameeyaan loop animation-ka kaas oo si joogto ah u akhriya galinta gamepad. Tallaabada 2: Qabo Tixraacyada DOM Marka xigta, waxaan helnaa tixraacyo dhammaan walxaha HTML ee aan cusboonaysiin doono: // ================================== // Tixraacyada Qaybta 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");

Ku kaydinta tixraacyadan xagga hore way ka waxtar badan tahay in DOM la waydiiyo si isdaba joog ah. Tallaabada 3: Kudar Soo-celinta Kiiboodhka Tijaabada la'aanteed kantaroolaha jireed, waxaan u khariidaynaa furayaasha kiiboodhka badhamada: // ================================== // DIB-u-dhacista KEYBOARD (si loo tijaabiyo haye la'aan) // ==================================

Const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [hakin1, pause2] // 'p' furaha ayaa koontaroola labada baararka joogsiga };

Tani waxay noo ogolaanaysaa in aan tijaabino UI anagoo ku riixaya furayaasha kiiboodhka. Tallaabada 4: Samee Loop Cusbooneysii Ugu Weyn Waa kan meesha uu sixirku ka dhaco. Shaqadani si joogto ah ayay u socotaa oo waxay akhridaa gamepad state: // ================================== // CUSBOONAYSIINTA CIYAARAHA UGU WEYN // ==================================

update functionGamepad() { // Hel dhammaan qalabka ciyaarta ee ku xiran const gamepads = navigator.getGamepads (); haddii (! gamepads) soo noqdaan;

// Isticmaal gamepad-ka ugu horreeya ee ku xiran const gp = gamepads [0];

haddii (gp) { // Cusbooneysii gobolada badhanka adiga oo rogaya fasalka "firfircoon". btnA.classList.toggle ("firfircoon", gp.buttons[0]. la riixay); btnB.classList.toggle("firfircoon", gp.buttons[1].la riixay); btnX.classList.toggle("firfircoon", gp.buttons[2].la riixay);

// Qabo badhanka hakinta (button index 9 ee inta badan kantaroolayaasha) const pausePressed = gp.buttons[9].la riixay; pause1.classList.toggle("firfircoon", hakad la saaray); pause2.classList.toggle("firfircoon", hakad la saaray);

// Dhis liiska badhamada hadda la riixay si loo muujiyo heerka ha la cadaadiyo = []; gp.buttons.forEach((btn, i) => { haddii (btn. la cadaadiyo)riix ("Button" + i); }

// Cusbooneysii qoraalka heerka haddii badhamada la riixo haddii (la cadaadiyo. dhererka> 0) { status.textContent = "Raadiyey:" + la riixay.join(","); } }

// Sii wad wareegga haddii cilladaha uu socdo haddii (orod) { rafId = CodsigaAnimationFrame (updateGamepad); } }

Habka classList.toggle() wuxuu ku daraa ama ka saarayaa fasalka firfircoon iyadoo ku saleysan in badhanka la riixo, kaas oo kiciya qaababka lakabka CSS-ka. Tallaabada 5: Xakamee Dhacdooyinka Kiiboodhka Dhagaystayaashan dhacdada waxay ka dhigaan dib u dhaca kiiboodhka: // ================================== // MAAMULAYAASHA DHACDOOYINKA BOORKA KEYBARKA // ==================================

document.addEventListener("keydown", (e) => { haddii (keyMap[e.key]) { // Xakamayso hal ama xubno badan haddii (Array.isArray (keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("firfircoon")); } kale { keyMap[e.key].classList.add("firfircoon"); } status.textContent = "Furaha la riixay:" + e.key.toUpperCase(); } }

document.addEventListener("keyup", (e) => { haddii (keyMap[e.key]) { // Ka saar gobolka firfircoon marka furaha la sii daayo haddii (Array.isArray (keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("firfircoon")); } kale { keyMap[e.key].classList.remove("firfircoon"); } status.textContent = "Furaha la sii daayay:" + e.key.toUpperCase(); } }

Tallaabada 6: Ku dar Xakamaynta Bilawga/ Joojinta Ugu dambayntii, waxaan u baahanahay hab lagu shido ama damiyo cilladaha: // ================================== // TOGGLE DEBUGGER DAAR/Dami // ==================================

document.getElementById("toggle").addEventListener("guji", () => { orod = !orod; // Rogdi xaaladda orodka

haddii (orod) { status.textContent = "Debugger socda..."; updateGamepad (); // Bilow wareegga cusboonaysiinta } kale { status.textContent = "Debugger aan firfircoonayn"; cancelAnimationFrame(rafId); // Jooji wareegga } }

Markaa haa, taabo badhan wuuna iftiimay. Usha ku riix way dhaqaaqday. Taasi waa. Hal shay oo kale: qiimaha cayriin. Mararka qaarkood waxaad rabtaa inaad aragto nambaro, ma rabto inaad aragto nalal.

Marxaladdan, waa inaad aragto:

Koontaroolaha shaashadda fudud, Badhamada ka falceliya markaad la falgasho, iyo Akhrinta khaladka khaladka ah ee ikhtiyaarka ah oo muujinaya tusmooyinka badhanka la riixay.

Si tan looga dhigo mid aan la taaban karin, halkan waxaa ah muujinta degdega ah ee kantaroolaha shaashadda oo ka falcelinaya wakhtiga dhabta ah:

Hadda, adigoo riixaya Bilawga Duubista ayaa wax walba kaydisa ilaa aad ku dhufatid Jooji Duubista. 2. U Dhoofinta Xogta CSV/JSON Marka aan haysanno log, waxaan rabnaa inaan badbaadino.

Tallaabada 1: Samee Caawinta Soo Dejinta Marka hore, waxaan u baahanahay shaqo caawiye ka shaqeysa soo dejinta faylka browserka: // ================================== // FIICAN SOO dejiso GARGAAR // ==================================

shaqada soo dejintaFile (magaca faylka, nuxurka, nooca = "qoraal/ cad") { // Ka samee boodh ka kooban waxa ku jira const blob = Blob cusub ([content], {nooca}); const url = URL.createObjectURL(blob);

// Samee xiriirinta soo dejinta ku meel gaadhka ah oo guji const a = document.createElement("a"); a.href = url; a.download = filename; a.guji();

// Nadiifi shayga URL ka dib soo dejinta setTimeout(() => URL.revokeObjectURL(url), 100); }

Shaqadani waxay ku shaqeysaa iyadoo ka abuureysa Blob (shay weyn oo laba-laaban ah) xogtaada, u soo saarta URL ku meel gaar ah, oo si barnaamij ahaan u gujinaya xiriirinta soo dejinta. Nadiifintu waxay xaqiijinaysaa inaynaan daadin xusuusta. Talaabada 2: Xakamee Dhoofinta JSON JSON waxay ku fiican tahay ilaalinta qaab dhismeedka xogta oo dhamaystiran:

// ================================== // U Dhoofiso SIDA JSON // ==================================

document.getElementById("export-json").addEventListener("guji", () => { // Hubi haddii ay jiraan wax la dhoofiyo haddii (!frames.dhererka) { console.warn ("Ma jiro wax duubis ah oo la dhoofin karo."); soo noqoshada; }

// Abuur culeys badan oo leh xog-badan iyo fareemo culeyska culeyska = { la sameeyayAt: Taariikh cusub ().toISOString(), looxyada };

// Soo deji sida loo qaabeeyey JSON soo dejiso File ( "gamepad-log.json", JSON.stringify (load-load, bura, 2), "application/json" ; }

Qaabka JSON waxa uu ilaaliyaa wax kasta oo habaysan oo si fudud loo miisaami karo, taas oo ka dhigaysa mid ku habboon in dib loogu shubo agabka dev ama lala wadaago asxaabta. Tallaabada 3: Xakamee dhoofinta CSV CSV Dhoofinta, waxaan u baahanahay inaan u kala dhigno xogta kala sareynta safafka iyo tiirarka:

//================================= // U Dhoofinta SIDA CSV // ==================================

document.getElementById("export-csv").addEventListener("guji", () => { // Hubi haddii ay jiraan wax la dhoofiyo haddii (!frames.dhererka) { console.warn ("Ma jiro wax duubis ah oo la dhoofin karo."); soo noqoshada; }

// Dhis safka madaxa ee CSV ( tiirarka loogu talagalay shaambada wakhtiga, dhammaan badhamada, dhammaan faasasyada) const headButts = fareemo[0].buttons.map((_, i) => btn${i}); const headerAxes = firam[0].axes.map((_, i) => dhidibka${i}); const madax = ["t", ...headerButts, ...headerAxes].ku biir(",") + "\n";

// Dhis xogta safafka CSV safafka const = frames.map(f => { const btnVals = f.buttons.map(b => b.qiimaha); soo noqo [f.t, ...btnVals, ...f.axes].ku biir(","); }).ku biir("\n");

// Soo dejiso sida CSV soo dejisan ("gamepad-log.csv", madax + saf, "qoraal/csv"); }

CSV waxay u fiican tahay falanqaynta xogta sababtoo ah waxay si toos ah uga furan tahay Excel ama Google Sheets, taasoo kuu ogolaanaysa inaad abuurto jaantusyo, shaandhayso xogta, ama qaababka dhibcaha muuqaal ahaan. Hadda oo badhamada dhoofinta ay ku jiraan, waxaad arki doontaa laba ikhtiyaar oo cusub guddiga: Dhoofinta JSON iyo Dhoofinta CSV. JSON way fiican tahay haddii aad rabto inaad dib ugu soo celiso log-ga ceeriin qalabkaaga wax-soo-saarka ama aad ka muquurto dhismaha. CSV, dhanka kale, waxay si toos ah ugu furaa Excel ama Google Sheets si aad u jaan-gooyso, u shaandhayso, ama barbardhigto wax-soo-gelinta. Jaantuska soo socdaa waxa uu tusinayaa sida guddigu u eg yahay kantarooladan dheeraadka ah.

3. Habka sawir-qaadista Mararka qaarkood uma baahnid duubis buuxa, kaliya "screenshot" degdeg ah ee gobolada gelinta. Taasi waa halka ay ku caawiso badhanka Qaado Snapshot.

Iyo JavaScript:

// ================================== // KA qaad sawir sawir // ==================================

document.getElementById("snapshot").addEventListener("guji", () => { // Hel dhammaan qalabka ciyaarta ee ku xiran const pads = navigator.getGamepads (); const activePads = [];

// Lasoco oo qabso xaalada gamepad kasta oo ku xidhan loogu talagalay (const gp of pads) { haddii (!gp) sii socoto; // Ka bood boosaska madhan

firfircoon Pads.push ({ id: gp.id, // Magaca maamulaha/qaabka timestamp: waxqabadka.now(), badhamada: gp.buttons.map(b => ({{ la riixay: b. la riixay, qiimaha: b.qiimaha })) faasas: [...gp.axes] } }

// Hubi haddii wax gamepads ah la helay haddii (!activePads.dherer) { console.warn ("Ma jiro gamepads ku xiran sawirka."); digtoonaan ("Ktaroole lama helin!"); soo noqoshada; }

// Gal oo ogeysii isticmaalayaasha console.log ("Snapshot:", firfircoonida Pads); heegan (Sawirka la qaaday }

Sawirada sawir-qaadista ayaa qaboojiya xaaladda saxda ah ee maamulahaaga hal daqiiqad gudaheed. 4. Ku Celinta Ruuxa Hadda midda madadaalada leh: ku celcelinta ghost gelinta. Tani waxay qaadanaysaa log waxayna dib ugu ciyaareysaa muuqaal ahaan sidii haddii ciyaaryahan fantastik ah uu isticmaalayey kantaroolaha.

JavaScript si loogu celiyo: // ================================== // ku celiska rooxaanta // ==================================

document.getElementById("ku celis").addEventListener("guji", () => { // Hubi inaan haysano duubis si aan dib ugu ciyaarno haddii (!frames.dhererka) { digniin ("Ma jiro wax duubis ah oo dib loo daawado!"); soo noqoshada; }

console.log ("Bilaabida ku celiska rooxaanta...");

// Lasoco wakhtiga dib u ciyaarida la isku daray ha startTime = waxqabadka. hadda (); ha u ogolaato frameIndex = 0;

// Ku celi loop animation tallaabada shaqada() { const hadda = waxqabadka. hadda (); const elapsed = hadda - startTime;

// Ka baaraandega dhammaan xirmooyinka ay ahayd inay hadda dhacaan halka (frameIndex

// Cusbooneysii UI oo leh gobolada badhanka la duubay btnA.classList.toggle("firfircoon", frame.buttons[0].la riixay); btnB.classList.toggle("firfircoon", frame.buttons[1].la riixay); btnX.classList.toggle("firfircoon", frame.buttons[2].la riixay);

// Cusbooneysii bandhigga heerka ha la cadaadiyo = []; frame.buttons.forEach((btn, i) => { haddii (btn.pressed) la riixo. riix ("Badhanka" + i); } haddii (la cadaadiyo. dhererka> 0) { status.textContent = "Ruux:" + pressed.join(","); }

frameIndex++; }

// Sii wad haddii ay jiraan meelo badan haddii (frameIndex < frames.length) { CodsigaAnimationFrame (tallaabo); } kale { console.log("ku celidhammaatay."); status.textContent = "Ku celisku waa dhammaatay"; } }

// Bilow ku celiska tallaabo(); }

Si aan khaladka uga dhigo xoogaa gacan-qabsi ah, waxaan ku daray dib-u-play ruuxeed. Markaad duubto fadhi, waxaad garaaci kartaa dib-u-ciyaar oo aad daawato UI-ga oo u dhaqmaya, ku dhawaad sida ciyaaryahan fantastik ah uu u wado suufka. Badhan cusub oo dib-u-play Ghost ah ayaa ka muuqda guddiga tan.

Ku dhufo Diiwaanka, ku qas kontaroolaha xoogaa, jooji, ka dibna dib u ciyaar. UI-gu waxa uu ku celcelinayaa wax kasta oo aad samaysay, sida ruuxa oo raacaya gelintaada. Maxaad u dhibaysaa waxyaalahan dheeraadka ah?

Duubista/Dhoofinta waxay u fududaynaysaa tijaabiyeyaashu inay muujiyaan sida saxda ah ee dhacay. Sawirada sawirku waxay barafoobaan waqti ka dib, aad u faa'iido badan marka aad cayrsanayso dhiqlaha. Dib u daawaynta rooxaantu waxay ku fiican tahay casharrada, hubinta gelitaanka, ama isbarbardhigga dejinta xakamaynta dhinac dhinac.

Halkaa marka ay marayso, ma aha oo kaliya demo nadiif ah, laakiin wax aad dhab ahaantii ku shaqayn karto. Kiisaska Isticmaalka Adduunka-Dhabta ah Hadda waxaan helnay cilladahaan wax badan qaban kara. Waxa ay tusinaysaa wax gelinta tooska ah, diiwaan gelisa diiwaanka, dhoofisa, iyo xitaa dib u soo celisa walxaha. Laakiin su'aasha dhabta ah waa: yaa dhab ahaantii danaynaya? Yaa faa'iido u leh? Horumarinta Ciyaarta Koontaroolayaashu waa qayb ka mid ah shaqada, laakiin iyaga ayaa ciribtiraya? Caadiyan xanuun. Bal qiyaas inaad tijaabinayso isku-darka ciyaarta dagaalka, sida ↓ →+ feeray. Halkii aad ka tukan lahayd, waxaad ku cadaadiday si la mid ah laba jeer, waxaad duubtaa hal mar, oo ku celisaa. La sameeyay Ama waxaad ku beddelan kartaa diiwaannada JSON saaxiibkiis si aad u hubiso in koodka ciyaartoyga badan uu ka falcelinayo isla mashiinkooda. Taasi waa mid weyn. Xirfadlayaasha Helitaanka Midkani wuxuu u dhow yahay qalbigayga. Qof kastaa kuma ciyaaro kontaroolaha “standard”. Koontaroolayaasha la qabsiga waxay tuurayaan calaamado yaab leh mararka qaarkood. Qalabkan, waxaad si sax ah u arki kartaa waxa dhacaya. Macallimiinta, cilmi-baarayaasha, cid kastaba. Waxay qabsan karaan logu, is barbardhigi karaan, ama waxay ku celin karaan gelinta dhinac-dhinac. Isla markiiba, walxaha aan la arki karin ayaa muuqda. Tijaabinta Hubinta Tayada Tijaabayaashu waxay badanaa qoraan qoraallo sida "halkan baan ku shiiday badhamada wayna jabeen." Ma aha mid aad waxtar u leh. Hadda? Waxay qabsan karaan saxamada saxda ah, dhoofin karaan log, oo ay diri karaan. Malaha malahan. Barayaasha Haddii aad samaynayso casharro ama fiidyowga YouTube, ku celcelinta ghost waa dahab. Waxaad si dhab ah u odhan kartaa, "Waa kan waxa aan ku sameeyay kontaroolaha," halka UI uu muujinayo inay dhacayso. Sharaxaad ka dhigaa si cad. Wixii ka dambeeya Ciyaaraha Haa, tani maahan ciyaaraha oo keliya. Dadku waxay u isticmaaleen kontaroolayaal robots, mashruucyo farshaxan, iyo is-dhexgal la geli karo. Arrin isku mid ah mar kasta: muxuu yahay browserka dhabta ah? Tan, uma baahnid inaad qiyaasto. Gabagabo Ciribtirka gelinta kontoroolka waxay had iyo jeer dareemaysay sidii indhoole duulaya. Si ka duwan DOM ama CSS, ma jiro wax kormeere ku dhex dhisan oo ciyaartapad-yada ah; waa tirooyinka cayriin ee konsole-ka, oo si fudud u lumaya buuqa. Iyada oo leh dhowr boqol oo xariiq oo HTML, CSS, iyo JavaScript ah, waxaan dhisnay wax ka duwan:

Qalab muuqaal ah oo ka dhigaya wax gelinta aan muuqan mid muuqda. Nidaam CSS lakabaysan oo UI ka dhigaya mid nadiif ah oo laga saari karo. Qayb ka mid ah hagaajinta (duubista, dhoofinta, sawir-qaadista, dib-u-play ghost) kuwaas oo kor uga qaadaya demo una gudbaya qalab horumariye.

Mashruucani wuxuu muujinayaa ilaa inta aad aadi karto adoo isku daraya awooda Shabakadda Shabakadda iyo hal-abuur yar oo ku jira CSS Cascade Layers. Qalabka aan hadda sharaxay oo dhan waa il furan. Waad xidhi kartaa GitHub repo oo isku day naftaada. Laakiin waxaa ka sii muhiimsan, waxaad samayn kartaa adiga. Ku dar lakabyadaada. Dhis caqligaaga ku celiska ah. Ku dhex dar nooca ciyaartaada. Ama xitaa u isticmaal siyaabo aanan u malaynaynin. Waxbarid, helitaan, ama falanqaynta xogta. Dhammaadka maalinta, tani maaha kaliya in la tirtiro gamepads. Waxay ku saabsan tahay iftiiminta iftiinka agabyada qarsoon, iyo siinta horumariyeyaasha kalsoonida inay ku shaqeeyaan qalab aan shabakadu wali si buuxda u qaadan. Markaa, geli kontaroolahaaga, fur tafatirahaaga, oo bilow tijaabinta. Waxaa laga yaabaa inaad la yaabto waxa biraawsarkaaga iyo CSS-gaaga ay si dhab ah u fulin karaan.

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw