நீங்கள் ஒரு கன்ட்ரோலரைச் செருகும்போது, பொத்தான்களை பிசைந்து, குச்சிகளை நகர்த்தவும், தூண்டுதல்களை இழுக்கவும்... மேலும் டெவலப்பராக, நீங்கள் எதையும் பார்க்க மாட்டீர்கள். உலாவி அதை எடுக்கிறது, நிச்சயமாக, ஆனால் நீங்கள் கன்சோலில் எண்களை பதிவு செய்யாவிட்டால், அது கண்ணுக்கு தெரியாதது. கேம்பேட் ஏபிஐயின் தலைவலி இதுதான். இது பல ஆண்டுகளாக உள்ளது, அது உண்மையில் மிகவும் சக்தி வாய்ந்தது. நீங்கள் பொத்தான்கள், குச்சிகள், தூண்டுதல்கள், படைப்புகளைப் படிக்கலாம். ஆனால் பெரும்பாலானோர் அதைத் தொடுவதில்லை. ஏன்? ஏனெனில் எந்த பின்னூட்டமும் இல்லை. டெவலப்பர் கருவிகளில் பேனல் இல்லை. கட்டுப்படுத்தி நீங்கள் நினைப்பதைச் செய்கிறதா என்பதை அறிய தெளிவான வழி இல்லை. குருட்டுத்தனமாக பறப்பது போன்ற உணர்வு. கேம்பேட் கேஸ்கேட் பிழைத்திருத்தம்: ஒரு சிறிய கருவியை உருவாக்க இது எனக்கு போதுமானதாக இருந்தது. கன்சோல் வெளியீட்டை உற்றுப் பார்ப்பதற்குப் பதிலாக, கட்டுப்படுத்தியின் நேரடி, ஊடாடும் காட்சியைப் பெறுவீர்கள். எதையாவது அழுத்தினால் அது திரையில் வினைபுரியும். மேலும் CSS அடுக்கு அடுக்குகளுடன், பாணிகள் ஒழுங்கமைக்கப்பட்டிருக்கும், எனவே பிழைத்திருத்தம் செய்வது சுத்தமாக இருக்கும். இந்த இடுகையில், கன்ட்ரோலர்களை பிழைத்திருத்துவது ஏன் மிகவும் வேதனையானது, 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 பிழைத்திருத்தம் { /* ... */ }
ஒவ்வொரு அடுக்கும் கணிக்கக்கூடிய வகையில் அடுக்கி வைக்கப்படுவதால், எந்த விதிகள் வெற்றி பெறுகின்றன என்பதை நீங்கள் எப்போதும் அறிவீர்கள். அந்த முன்கணிப்பு பிழைத்திருத்தத்தை எளிதாக்குகிறது, ஆனால் உண்மையில் சமாளிக்கிறது. பிரச்சனை (கண்ணுக்கு தெரியாத, குழப்பமான உள்ளீடு) மற்றும் அணுகுமுறை (கேஸ்கேட் லேயர்களுடன் கட்டமைக்கப்பட்ட காட்சி பிழைத்திருத்தி) ஆகியவற்றை நாங்கள் உள்ளடக்கியுள்ளோம். இப்போது பிழைத்திருத்தியை உருவாக்குவதற்கான படிப்படியான செயல்முறையின் மூலம் நடப்போம். பிழைத்திருத்த கருத்து மறைக்கப்பட்ட உள்ளீட்டைக் காணக்கூடிய எளிதான வழி, அதை திரையில் வரைவதாகும். அதைத்தான் இந்த பிழைத்திருத்தி செய்கிறது. பொத்தான்கள், தூண்டுதல்கள் மற்றும் ஜாய்ஸ்டிக்ஸ் அனைத்தும் ஒரு காட்சியைப் பெறுகின்றன.
A ஐ அழுத்தவும்: ஒரு வட்டம் ஒளிரும். குச்சியை அசைக்கவும்: வட்டம் சுற்றி வளைகிறது. ஒரு தூண்டுதலை பாதியாக இழுக்கவும்: ஒரு பட்டி பாதியிலேயே நிரப்புகிறது.
இப்போது நீங்கள் 0வி மற்றும் 1 வினாடிகளை உற்றுப் பார்க்கவில்லை, ஆனால் உண்மையில் கன்ட்ரோலர் நேரலையில் செயல்படுவதைப் பார்க்கிறீர்கள். நிச்சயமாக, நீங்கள் இயல்புநிலை, அழுத்தப்பட்ட, பிழைத்திருத்தத் தகவல், ஒருவேளை பதிவு செய்யும் முறை போன்ற நிலைகளில் குவியத் தொடங்கியவுடன், CSS பெரியதாகவும் சிக்கலானதாகவும் மாறத் தொடங்குகிறது. அங்குதான் அடுக்கு அடுக்குகள் கைக்கு வரும். அகற்றப்பட்ட எடுத்துக்காட்டு இங்கே: @லேயர் அடிப்படை { .பொத்தான் { பின்னணி: #222; எல்லை-ஆரம்: 50%; அகலம்: 40px; உயரம்: 40px; } }
@layer செயலில் { .button.அழுத்தப்பட்டது { பின்னணி: #0f0; /* பிரகாசமான பச்சை */ } }
@layer பிழைத்திருத்தம் { .பொத்தான்::பிறகு { உள்ளடக்கம்: attr(data-value); எழுத்துரு அளவு: 12px; நிறம்: #fff; } }
அடுக்கு வரிசை முக்கியமானது: அடிப்படை → செயலில் → பிழைத்திருத்தம்.
அடிப்படை கட்டுப்படுத்தியை ஈர்க்கிறது. செயலில் கையாளுகிறது அழுத்தப்பட்ட மாநிலங்கள். பிழைத்திருத்தம் மேலடுக்குகளில் வீசுகிறது.
இதை இப்படி உடைப்பது என்பது நீங்கள் வித்தியாசமான குறிப்பிட்ட போர்களில் ஈடுபடவில்லை என்று அர்த்தம். ஒவ்வொரு அடுக்குக்கும் அதன் இடம் உள்ளது, மேலும் எது வெற்றி பெறுகிறது என்பது உங்களுக்கு எப்போதும் தெரியும். பில்டிங் இட் அவுட் முதலில் திரையில் ஒன்றைப் பார்ப்போம். இது அழகாக இருக்க வேண்டிய அவசியமில்லை - இருக்க வேண்டும், எனவே எங்களிடம் ஏதாவது வேலை செய்ய வேண்டும்.
கேம்பேட் கேஸ்கேட் பிழைத்திருத்தி
அது உண்மையில் பெட்டிகள் தான். இன்னும் உற்சாகமாக இல்லை, ஆனால் இது CSS மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் பின்னர் அடைய கைப்பிடிகளை வழங்குகிறது. சரி, நான் இங்கே கேஸ்கேட் லேயர்களைப் பயன்படுத்துகிறேன், ஏனென்றால் நீங்கள் கூடுதல் மாநிலங்களைச் சேர்த்தவுடன் அது பொருட்களை ஒழுங்கமைத்து வைத்திருக்கும். இங்கே ஒரு கடினமான பாஸ்:
/* ====================================== அடுக்கு அடுக்குகள் அமைப்பு ஆர்டர் விஷயங்கள்: அடிப்படை → செயலில் → பிழைத்திருத்தம் ====================================*/
/* லேயர் ஆர்டரை முன்கூட்டியே வரையறுக்கவும் */ @லேயர் அடிப்படை, செயலில், பிழைத்திருத்தம்;
/* அடுக்கு 1: அடிப்படை பாணிகள் - இயல்புநிலை தோற்றம் */ @லேயர் அடிப்படை { .பொத்தான் { பின்னணி: #333; எல்லை-ஆரம்: 50%; அகலம்: 70px; உயரம்: 70px; காட்சி: நெகிழ்வு; நியாயப்படுத்து-உள்ளடக்கம்: மையம்; align-items: மையம்; }
.இடைநிறுத்தம் { அகலம்: 20px; உயரம்: 70px; பின்னணி: #333; காட்சி: இன்லைன்-பிளாக்; } }
/* அடுக்கு 2: செயலில் உள்ள நிலைகள் - அழுத்தப்பட்ட பொத்தான்களைக் கையாளுகிறது */ @layer செயலில் { .button.active { பின்னணி: #0f0; /* அழுத்தும் போது பிரகாசமான பச்சை */ உருமாற்றம்: அளவு (1.1); /* பட்டனை சிறிது பெரிதாக்குகிறது */ }
.pause.active { பின்னணி: #0f0; உருமாற்றம்: அளவிலானY(1.1); /* அழுத்தும் போது செங்குத்தாக நீட்டுகிறது */ } }
/* அடுக்கு 3: பிழைத்திருத்த மேலடுக்குகள் - டெவலப்பர் தகவல் */ @layer பிழைத்திருத்தம் { .பொத்தான்::பிறகு { உள்ளடக்கம்: attr(data-value); /* எண் மதிப்பைக் காட்டுகிறது */ எழுத்துரு அளவு: 12px; நிறம்: #fff; } }
இந்த அணுகுமுறையின் அழகு என்னவென்றால், ஒவ்வொரு அடுக்குக்கும் தெளிவான நோக்கம் உள்ளது. அடிப்படை லேயர் செயலில் ஒருபோதும் மேலெழுத முடியாது, மேலும் செயலில் உள்ள பிழைத்திருத்தத்தை மீற முடியாது. இது பொதுவாக பிழைத்திருத்தக் கருவிகளைப் பாதிக்கும் CSS குறிப்பிட்ட போர்களை நீக்குகிறது. இப்போது சில கொத்துகள் இருண்ட பின்னணியில் அமர்ந்திருப்பது போல் தெரிகிறது. நேர்மையாக, மிகவும் மோசமாக இல்லை.
ஜாவாஸ்கிரிப்டைச் சேர்த்தல் ஜாவாஸ்கிரிப்ட் நேரம். இங்குதான் கட்டுப்படுத்தி உண்மையில் ஏதாவது செய்கிறது. இதை படிப்படியாக உருவாக்குவோம். படி 1: மாநில நிர்வாகத்தை அமைக்கவும் முதலில், பிழைத்திருத்தியின் நிலையைக் கண்காணிக்க நமக்கு மாறிகள் தேவை: // ====================================== // மாநில மேலாண்மை // ======================================
ஓடட்டும் = பொய்யான; // பிழைத்திருத்தி செயலில் உள்ளதா என்பதைக் கண்காணிக்கும் rafId விடுங்கள்; // கோரிக்கை அனிமேஷன் பிரேம் ஐடியை ரத்துசெய்வதற்காக சேமிக்கிறது
கேம்பேட் உள்ளீட்டைத் தொடர்ந்து படிக்கும் அனிமேஷன் லூப்பை இந்த மாறிகள் கட்டுப்படுத்துகின்றன. படி 2: DOM குறிப்புகளைப் பெறவும் அடுத்து, நாங்கள் புதுப்பிக்கும் அனைத்து HTML உறுப்புகளுக்கும் குறிப்புகளைப் பெறுவோம்: // ====================================== // டோம் உறுப்பு குறிப்புகள் // ======================================
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"); நிலை நிலை = document.getElementById("நிலை");
DOM ஐ மீண்டும் மீண்டும் வினவுவதை விட இந்த குறிப்புகளை முன் வைப்பது மிகவும் திறமையானது. படி 3: விசைப்பலகை ஃபால்பேக்கைச் சேர்க்கவும் இயற்பியல் கட்டுப்படுத்தி இல்லாமல் சோதனை செய்வதற்கு, விசைப்பலகை விசைகளை பொத்தான்களுக்கு வரைபடமாக்குவோம்: // ====================================== // கீபோர்டு ஃபால்பேக் (கண்ட்ரோலர் இல்லாமல் சோதனை செய்ய) // ======================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' விசை இரண்டு இடைநிறுத்தப்பட்டிகளையும் கட்டுப்படுத்துகிறது };
விசைப்பலகையில் விசைகளை அழுத்துவதன் மூலம் UI ஐ சோதிக்க இது உதவுகிறது. படி 4: முக்கிய புதுப்பிப்பு வளையத்தை உருவாக்கவும் மந்திரம் நடக்கும் இடம் இங்கே. இந்த செயல்பாடு தொடர்ச்சியாக இயங்குகிறது மற்றும் கேம்பேட் நிலையைப் படிக்கிறது: // ====================================== // முதன்மை கேம்பேட் புதுப்பிப்பு லூப் // ======================================
செயல்பாடு மேம்படுத்தல் கேம்பேட்() { // இணைக்கப்பட்ட அனைத்து கேம்பேடுகளையும் பெறுங்கள் const கேம்பேடுகள் = navigator.getGamepads(); (!கேம்பேடுகள்) திரும்பினால்;
// இணைக்கப்பட்ட முதல் கேம்பேடைப் பயன்படுத்தவும் கான்ஸ்ட் ஜிபி = கேம்பேடுகள்[0];
என்றால் (ஜிபி) { // "செயலில்" வகுப்பை மாற்றுவதன் மூலம் புதுப்பிப்பு பொத்தான் கூறுகிறது 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. அழுத்தினால்)அழுத்தப்பட்டது.புஷ்("பொத்தான்" + i); });
// ஏதேனும் பொத்தான்கள் அழுத்தப்பட்டால் நிலை உரையைப் புதுப்பிக்கவும் என்றால் (அழுத்தப்பட்ட நீளம் > 0) { status.textContent = "அழுத்தப்பட்டது: " + 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 = "பிழைத்திருத்தி இயங்குகிறது..."; updateGamepad(); // புதுப்பிப்பு வளையத்தைத் தொடங்கவும் } வேறு { status.textContent = "பிழைத்திருத்தி செயலற்றது"; ரத்துஅனிமேஷன் பிரேம்(rafId); // வளையத்தை நிறுத்து } });
ஆம், ஒரு பொத்தானை அழுத்தவும், அது ஒளிரும். குச்சியை அழுத்தவும், அது நகரும். அது தான். இன்னும் ஒரு விஷயம்: மூல மதிப்புகள். சில நேரங்களில் நீங்கள் எண்களைப் பார்க்க விரும்புகிறீர்கள், விளக்குகளை அல்ல.
இந்த கட்டத்தில், நீங்கள் பார்க்க வேண்டும்:
ஒரு எளிய திரை கட்டுப்படுத்தி, நீங்கள் அவர்களுடன் தொடர்பு கொள்ளும்போது செயல்படும் பொத்தான்கள் மற்றும் அழுத்தப்பட்ட பட்டன் குறியீடுகளைக் காட்டும் விருப்ப பிழைத்திருத்த வாசிப்பு.
இதை சுருக்கமாக மாற்ற, திரையில் கட்டுப்படுத்தி நிகழ்நேரத்தில் செயல்படும் விரைவான டெமோ இங்கே:
இப்போது, ஸ்டார்ட் ரெக்கார்டிங்கை அழுத்தினால், ஸ்டாப் ரெக்கார்டிங்கை அழுத்தும் வரை அனைத்தையும் பதிவுசெய்கிறது. 2. CSV/JSONக்கு தரவை ஏற்றுமதி செய்கிறது எங்களிடம் ஒரு பதிவு கிடைத்ததும், அதைச் சேமிக்க விரும்புவோம்.
படி 1: பதிவிறக்க உதவியாளரை உருவாக்கவும் முதலில், உலாவியில் கோப்பு பதிவிறக்கங்களைக் கையாளும் ஒரு உதவி செயல்பாடு நமக்குத் தேவை: // ====================================== // கோப்பு பதிவிறக்க உதவியாளர் // ======================================
செயல்பாடு பதிவிறக்கக் கோப்பு (கோப்புப் பெயர், உள்ளடக்கம், வகை = "உரை/வெற்று") { // உள்ளடக்கத்திலிருந்து ஒரு குமிழியை உருவாக்கவும் const blob = புதிய ப்ளாப்([உள்ளடக்கம்], {வகை}); const url = URL.createObjectURL(blob);
// ஒரு தற்காலிக பதிவிறக்க இணைப்பை உருவாக்கி அதை கிளிக் செய்யவும் const a = document.createElement("a"); a.href = url; a.download = கோப்பு பெயர்; a.click();
// பதிவிறக்கம் செய்த பிறகு பொருள் URL ஐ சுத்தம் செய்யவும் setTimeout(() => URL.revokeObjectURL(url), 100); }
உங்கள் தரவிலிருந்து ஒரு குமிழியை (பைனரி பெரிய பொருள்) உருவாக்கி, அதற்கான தற்காலிக URL ஐ உருவாக்கி, பதிவிறக்க இணைப்பை நிரல் முறையில் கிளிக் செய்வதன் மூலம் இந்தச் செயல்பாடு செயல்படுகிறது. சுத்தப்படுத்துதல் நினைவகத்தை கசியவிடாது என்பதை உறுதி செய்கிறது. படி 2: JSON ஏற்றுமதியைக் கையாளவும் முழுமையான தரவு கட்டமைப்பைப் பாதுகாக்க JSON சரியானது:
// ====================================== // JSON ஆக ஏற்றுமதி // ======================================
document.getElementById("export-json").addEventListener("click", () => { // ஏற்றுமதி செய்ய ஏதாவது இருக்கிறதா என்று பார்க்கவும் என்றால் (!frames.length) { console.warn("ஏற்றுமதி செய்ய பதிவு இல்லை."); திரும்ப; }
// மெட்டாடேட்டா மற்றும் பிரேம்களுடன் பேலோடை உருவாக்கவும் கான்ஸ்ட் பேலோட் = { உருவாக்கப்பட்ட நேரத்தில்: புதிய தேதி().toISOSstring(), சட்டங்கள் };
// வடிவமைக்கப்பட்ட 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 = சட்டங்கள்[0].buttons.map((_, i) => btn${i}); const headerAxes = சட்டங்கள்[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV தரவு வரிசைகளை உருவாக்கவும் நிலையான வரிசைகள் = 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. மூலப் பதிவை உங்கள் டெவ் டூல்களில் மீண்டும் வீச விரும்பினால் அல்லது கட்டமைப்பைச் சுற்றிக் குத்த விரும்பினால் JSON நன்றாக இருக்கும். மறுபுறம், CSV நேராக Excel அல்லது Google Sheetsஸில் திறக்கும், எனவே நீங்கள் உள்ளீடுகளை விளக்கப்படம் செய்யலாம், வடிகட்டலாம் அல்லது ஒப்பிடலாம். அந்த கூடுதல் கட்டுப்பாடுகளுடன் பேனல் எப்படி இருக்கும் என்பதை பின்வரும் படம் காட்டுகிறது.
3. ஸ்னாப்ஷாட் சிஸ்டம் சில நேரங்களில் உங்களுக்கு முழு பதிவு தேவையில்லை, உள்ளீட்டு நிலைகளின் விரைவான "ஸ்கிரீன்ஷாட்". அங்குதான் Take Snapshot பட்டன் உதவுகிறது.
மற்றும் ஜாவாஸ்கிரிப்ட்:
// ====================================== // ஸ்னாப்ஷாட் எடுக்கவும் // ======================================
document.getElementById("snapshot").addEventListener("click", () => { // இணைக்கப்பட்ட அனைத்து கேம்பேடுகளையும் பெறுங்கள் const pads = navigator.getGamepads(); const activePads = [];
// இணைக்கப்பட்ட ஒவ்வொரு கேம்பேட்டின் நிலையையும் சுழற்றிப் பிடிக்கவும் (கான்ஸ்ட் ஜிபி ஆஃப் பேட்கள்) { (!gp) தொடர்ந்தால்; // வெற்று இடங்களைத் தவிர்க்கவும்
activePads.push({ ஐடி: gp.id, // கன்ட்ரோலர் பெயர்/மாடல் நேர முத்திரை: performance.now(), பொத்தான்கள்: gp.buttons.map(b => ({ அழுத்தப்பட்டது: பி.அழுத்தப்பட்டது, மதிப்பு: b.value })), அச்சுகள்: [...gp.axes] }); }
// ஏதேனும் கேம்பேடுகள் கண்டுபிடிக்கப்பட்டதா எனச் சரிபார்க்கவும் என்றால் (!activePads.length) { console.warn("ஸ்னாப்ஷாட்டுக்கு கேம்பேட்கள் இணைக்கப்படவில்லை."); எச்சரிக்கை ("கட்டுப்படுத்தி எதுவும் கண்டறியப்படவில்லை!"); திரும்ப; }
// உள்நுழைந்து பயனருக்கு அறிவிக்கவும் console.log("ஸ்னாப்ஷாட்:", ஆக்டிவ்பேட்ஸ்); எச்சரிக்கை(ஸ்னாப்ஷாட் எடுக்கப்பட்டது! ${activePads.length} கட்டுப்படுத்தி(கள்) கைப்பற்றப்பட்டது); });
ஸ்னாப்ஷாட்கள் உங்கள் கன்ட்ரோலரின் சரியான நிலையை ஒரே நேரத்தில் உறைய வைக்கும். 4. கோஸ்ட் இன்புட் ரீப்ளே இப்போது வேடிக்கையான ஒன்று: பேய் உள்ளீடு மீண்டும். பாண்டம் பிளேயர் கன்ட்ரோலரைப் பயன்படுத்துவதைப் போல இது ஒரு பதிவை எடுத்து மீண்டும் பார்வைக்கு இயக்குகிறது.
மீண்டும் இயக்குவதற்கான ஜாவாஸ்கிரிப்ட்: // ====================================== // கோஸ்ட் ரீப்ளே // ======================================
document.getElementById("replay").addEventListener("கிளிக்", () => { // ரீப்ளே செய்ய எங்களிடம் ஒரு ரெக்கார்டிங் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் என்றால் (!frames.length) { எச்சரிக்கை ("ரீப்ளே செய்ய பதிவு இல்லை!"); திரும்ப; }
console.log("கோஸ்ட் ரீப்ளே தொடங்குகிறது...");
// ஒத்திசைக்கப்பட்ட பிளேபேக்கிற்கான நேரத்தைக் கண்காணிக்கவும் தொடக்க நேரம் = செயல்திறன். இப்போது (); லெட் பிரேம்இண்டெக்ஸ் = 0;
// அனிமேஷன் லூப்பை மீண்டும் இயக்கவும் செயல்பாடு படி() { இப்போது நிலைத்தன்மை = செயல்திறன். இப்போது (); 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) அழுத்தினால்.push("Button" + i); }); என்றால் (அழுத்தப்பட்ட நீளம் > 0) { status.textContent = "பேய்: " + அழுத்தப்பட்டது.join(", "); }
பிரேம்இண்டெக்ஸ்++; }
// அதிக பிரேம்கள் இருந்தால் லூப்பைத் தொடரவும் என்றால் (frameIndex < frames.length) { கோரிக்கை அனிமேஷன் பிரேம்(படி); } வேறு { console.log("மீண்டும் விளையாடுமுடிந்தது."); status.textContent = "ரீப்ளே முடிந்தது"; } }
// மறுபதிவைத் தொடங்கவும் படி (); });
பிழைத்திருத்தத்தை இன்னும் கொஞ்சம் அதிகமாகச் செய்ய, பேய் ரீப்ளேயைச் சேர்த்துள்ளேன். ஒரு அமர்வை நீங்கள் பதிவுசெய்ததும், ரீப்ளேவை அழுத்தி, UI செயல்படுவதைப் பார்க்கலாம், கிட்டத்தட்ட ஒரு பாண்டம் பிளேயர் பேடை இயக்குவது போல. இதற்கான பேனலில் புதிய ரீப்ளே கோஸ்ட் பொத்தான் காண்பிக்கப்படும்.
ரெக்கார்டைத் தட்டவும், கன்ட்ரோலரைக் கொஞ்சம் குழப்பி, நிறுத்தவும், பிறகு மீண்டும் இயக்கவும். உங்கள் உள்ளீடுகளைப் பின்பற்றும் பேய் போல நீங்கள் செய்த அனைத்தையும் UI எதிரொலிக்கிறது. இந்த கூடுதல் விஷயங்களில் ஏன் கவலைப்பட வேண்டும்?
ரெக்கார்டிங்/ஏற்றுமதி சோதனையாளர்களுக்கு என்ன நடந்தது என்பதைக் காட்ட எளிதாக்குகிறது. ஸ்னாப்ஷாட்கள் சிறிது நேரத்தில் உறைந்துவிடும், நீங்கள் ஒற்றைப்படை பிழைகளைத் துரத்தும்போது மிகவும் பயனுள்ளதாக இருக்கும். பயிற்சிகள், அணுகல்தன்மை சோதனைகள் அல்லது கட்டுப்பாட்டு அமைப்புகளை அருகருகே ஒப்பிடுவதற்கு கோஸ்ட் ரீப்ளே சிறந்தது.
இந்த கட்டத்தில், இது இனி ஒரு நேர்த்தியான டெமோ அல்ல, ஆனால் நீங்கள் உண்மையில் வேலை செய்யக்கூடிய ஒன்று. நிஜ உலக பயன்பாட்டு வழக்குகள் இப்போது இந்த பிழைத்திருத்தி நிறைய செய்யக்கூடியது. இது நேரடி உள்ளீட்டைக் காட்டுகிறது, பதிவுகளை பதிவு செய்கிறது, அவற்றை ஏற்றுமதி செய்கிறது மற்றும் பொருட்களை மீண்டும் இயக்குகிறது. ஆனால் உண்மையான கேள்வி: உண்மையில் யார் கவலைப்படுகிறார்கள்? இது யாருக்கு பயன்படும்? விளையாட்டு டெவலப்பர்கள் கட்டுப்பாட்டாளர்கள் வேலையின் ஒரு பகுதி, ஆனால் அவற்றை பிழைத்திருத்தவா? பொதுவாக ஒரு வலி. ↓ → + பஞ்ச் போன்ற சண்டை விளையாட்டு கலவையை நீங்கள் சோதிக்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள். பிரார்த்தனை செய்வதற்குப் பதிலாக, நீங்கள் அதை இரண்டு முறை ஒரே மாதிரியாக அழுத்தி, ஒரு முறை பதிவு செய்து, அதை மீண்டும் இயக்குகிறீர்கள். முடிந்தது. அல்லது உங்கள் மல்டிபிளேயர் குறியீடு அவர்களின் கணினியில் வினைபுரிகிறதா என்பதைச் சரிபார்க்க, JSON பதிவுகளை ஒரு குழு உறுப்பினருடன் மாற்றவும். அது மிகப்பெரியது. அணுகல் பயிற்சியாளர்கள் இது என் இதயத்திற்கு நெருக்கமானது. எல்லோரும் "நிலையான" கட்டுப்படுத்தியுடன் விளையாடுவதில்லை. தகவமைப்பு கட்டுப்படுத்திகள் சில நேரங்களில் வித்தியாசமான சமிக்ஞைகளை வீசுகின்றன. இந்த கருவி மூலம், என்ன நடக்கிறது என்பதை நீங்கள் சரியாகப் பார்க்கலாம். ஆசிரியர்கள், ஆராய்ச்சியாளர்கள், யாராக இருந்தாலும் சரி. அவர்கள் பதிவுகளைப் பிடிக்கலாம், அவற்றை ஒப்பிடலாம் அல்லது உள்ளீடுகளை அருகருகே மீண்டும் இயக்கலாம். திடீரென்று, கண்ணுக்கு தெரியாத விஷயங்கள் தெளிவாகின்றன. தர உறுதி சோதனை சோதனையாளர்கள் பொதுவாக "நான் இங்கே பொத்தான்களை பிசைந்தேன், அது உடைந்தது" போன்ற குறிப்புகளை எழுதுகிறது. மிகவும் பயனுள்ளதாக இல்லை. இப்போது? அவர்கள் சரியான அழுத்தங்களைப் பிடிக்கலாம், பதிவை ஏற்றுமதி செய்யலாம் மற்றும் அதை அனுப்பலாம். யூகம் இல்லை. கல்வியாளர்கள் நீங்கள் பயிற்சிகள் அல்லது YouTube வீடியோக்களை உருவாக்குகிறீர்கள் என்றால், பேய் ரீப்ளே தங்கமானது. "கண்ட்ரோலருடன் நான் என்ன செய்தேன்" என்று நீங்கள் சொல்லலாம், UI அது நடப்பதைக் காட்டுகிறது. விளக்கங்களை தெளிவாக்குகிறது. விளையாட்டுகளுக்கு அப்பால் ஆம், இது விளையாட்டுகளைப் பற்றியது மட்டுமல்ல. ரோபோக்கள், கலைத் திட்டங்கள் மற்றும் அணுகல்தன்மை இடைமுகங்களுக்கு மக்கள் கட்டுப்படுத்திகளைப் பயன்படுத்துகின்றனர். ஒவ்வொரு முறையும் இதே பிரச்சினை: உலாவி உண்மையில் எதைப் பார்க்கிறது? இதை வைத்து, நீங்கள் யூகிக்க வேண்டியதில்லை. முடிவுரை கன்ட்ரோலர் உள்ளீட்டில் பிழைத்திருத்தம் செய்வது குருட்டுத்தனமாக பறப்பது போல் எப்போதும் உணரப்படுகிறது. DOM அல்லது CSS போலல்லாமல், கேம்பேட்களுக்கு உள்ளமைக்கப்பட்ட இன்ஸ்பெக்டர் இல்லை; இது கன்சோலில் உள்ள மூல எண்கள், சத்தத்தில் எளிதில் தொலைந்துவிடும். HTML, CSS மற்றும் JavaScript இன் சில நூறு வரிகளுடன், நாங்கள் வேறு ஒன்றை உருவாக்கினோம்:
கண்ணுக்குத் தெரியாத உள்ளீடுகளைக் காணக்கூடிய காட்சி பிழைத்திருத்தி. UI ஐ சுத்தமாகவும் பிழைத்திருத்தக்கூடியதாகவும் வைத்திருக்கும் அடுக்கு CSS அமைப்பு. மேம்பாடுகளின் தொகுப்பு (பதிவு செய்தல், ஏற்றுமதி செய்தல், ஸ்னாப்ஷாட்கள், கோஸ்ட் ரீப்ளே) அதை டெமோவிலிருந்து டெவலப்பர் கருவியாக உயர்த்தும்.
CSS கேஸ்கேட் லேயர்களில் வெப் பிளாட்ஃபார்மின் சக்தியை சிறிது படைப்பாற்றலுடன் கலந்து நீங்கள் எவ்வளவு தூரம் செல்ல முடியும் என்பதை இந்தத் திட்டம் காட்டுகிறது. நான் முழுவதுமாக விளக்கிய கருவி திறந்த மூலமாகும். நீங்கள் கிட்ஹப் ரெப்போவை குளோன் செய்து நீங்களே முயற்சி செய்யலாம். ஆனால் மிக முக்கியமாக, அதை நீங்களே உருவாக்கலாம். உங்கள் சொந்த அடுக்குகளைச் சேர்க்கவும். உங்கள் சொந்த ரீப்ளே லாஜிக்கை உருவாக்குங்கள். உங்கள் விளையாட்டு முன்மாதிரியுடன் அதை ஒருங்கிணைக்கவும். அல்லது நான் கற்பனை செய்யாத வழிகளில் கூட அதைப் பயன்படுத்துங்கள். கற்பித்தல், அணுகல்தன்மை அல்லது தரவு பகுப்பாய்வு. நாள் முடிவில், இது கேம்பேட்களை பிழைத்திருத்துவது மட்டுமல்ல. இது மறைக்கப்பட்ட உள்ளீடுகளில் ஒளியைப் பிரகாசிப்பதாகும், மேலும் வலை இன்னும் முழுமையாக ஏற்றுக்கொள்ளாத வன்பொருளுடன் பணிபுரிய டெவலப்பர்களுக்கு நம்பிக்கையை அளிக்கிறது. எனவே, உங்கள் கன்ட்ரோலரைச் செருகவும், உங்கள் எடிட்டரைத் திறந்து, பரிசோதனையைத் தொடங்கவும். உங்கள் உலாவி மற்றும் உங்கள் CSS உண்மையில் என்ன சாதிக்க முடியும் என்று நீங்கள் ஆச்சரியப்படலாம்.
