HTML பொத்தான்களைப் பயன்படுத்தி தட்டச்சு விளையாட்டுக்கான ஜாவாஸ்கிரிப்ட் டைமர் மதிப்பை எவ்வாறு மாற்றுவது

தட்டச்சுக்கான டைனமிக் டைமர் சரிசெய்தல் விளையாட்டு பொத்தான்களைப் பயன்படுத்தி

தட்டச்சு விளையாட்டில், ஈர்க்கக்கூடிய பயனர் அனுபவத்தை உறுதிசெய்ய, விளையாட்டின் வேகத்தைக் கட்டுப்படுத்துவது முக்கியமானது. ஒரு முக்கியமான காரணி டைமர் ஆகும், இது பயனர் எவ்வளவு நேரம் விளையாட்டை அல்லது தட்டச்சு சவாலை முடிக்க வேண்டும் என்பதை தீர்மானிக்கிறது. எளிய HTML பொத்தான்கள் மூலம் கேம் டைமரை சரிசெய்ய பயனர்களை அனுமதிப்பதன் மூலம், அவர்களின் கேம்ப்ளேயின் மீது அவர்களுக்கு கூடுதல் கட்டுப்பாட்டை வழங்கலாம்.

பொத்தான்களைப் பயன்படுத்தி வெவ்வேறு டைமர் அமைப்புகளுக்கு இடையில் பிளேயர்களைத் தேர்வுசெய்ய அனுமதிக்கும் ஜாவாஸ்கிரிப்ட்டில் ஒரு தீர்வை எவ்வாறு உருவாக்குவது என்பதை இந்தக் கட்டுரை உங்களுக்குக் காண்பிக்கும். எடுத்துக்காட்டாக, '30s' பட்டனைத் தேர்ந்தெடுப்பது, டைமரை 30 வினாடிகளாகச் சரிசெய்யும், அதே நேரத்தில் '60s' பட்டனைக் கிளிக் செய்வதன் மூலம் அது 60 வினாடிகளாக மாறும்.

ஜாவாஸ்கிரிப்ட் செயல்பாடு கிளிக் செய்யப்பட்ட பொத்தானின் மதிப்பை எடுத்து டைமர் மற்றும் கேமின் தலைப்பு இரண்டையும் மாறும். இந்த வகையான நெகிழ்வுத்தன்மையானது பயனர் அனுபவத்தை மேம்படுத்தும், மேலும் கேமை தனிப்பயனாக்கக்கூடியதாகவும் வெவ்வேறு திறன் நிலைகளுக்கு சுவாரஸ்யமாகவும் மாற்றும்.

இந்த வழிகாட்டியின் முடிவில், HTML மற்றும் JavaScript ஐப் பயன்படுத்தி முழு செயல்பாட்டு டைமர் சரிசெய்தல் அம்சத்தைப் பெறுவீர்கள். தேர்ந்தெடுக்கப்பட்ட டைமரின் கால அளவைப் பிரதிபலிக்கும் வகையில், பக்கத்தின் தலைப்பில் காட்டப்படும் டைமர் மதிப்பை எவ்வாறு புதுப்பிப்பது என்பதையும் நாங்கள் விவரிப்போம்.

கட்டளை	பயன்பாட்டின் உதாரணம்
document.querySelector()	உலாவி தாவலின் தலைப்பை மாறும் வகையில் புதுப்பிக்க HTML
addEventListener()	ஒரு குறிப்பிட்ட நிகழ்வை (எ.கா. கிளிக்) பொத்தான் உறுப்புடன் இணைக்கிறது. இந்த சூழலில், பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும் போது, ​​டைமர் அமைப்புகளுடன் மாறும் இடைவினையை அனுமதிக்கும் போது changeTimer() செயல்பாட்டைத் தூண்டுவதற்கு இது பயன்படுகிறது.
innerText	இந்த பண்பு ஒரு HTML உறுப்புக்குள் தெரியும் உரையை மாற்ற அனுமதிக்கிறது. இந்தத் தீர்வில், ஒரு பொத்தானைக் கிளிக் செய்யும் போது பக்கத்தின் தலைப்பில் உள்ள டைமர் மதிப்பைப் புதுப்பிக்க இது பயன்படுகிறது.
onClick	பொத்தானின் கிளிக் நிகழ்வில் நேரடியாக changeTimer() செயல்பாட்டை இணைப்பதற்கான மாற்று அணுகுமுறையில் பயன்படுத்தப்படும் இன்லைன் நிகழ்வு ஹேண்ட்லர் பண்புக்கூறு. டைமரை மாறும் வகையில் புதுப்பிப்பதற்கான எளிமையான, குறைவான மட்டு வழியை இது அனுமதிக்கிறது.
test()	இந்த முறை Jest உடன் அலகு சோதனையில் பயன்படுத்தப்படுகிறது. இது ஒரு சோதனை வழக்கை வரையறுக்கிறது, அங்கு சோதனை செய்யப்படும் செயல்பாடு (எ.கா., changeTimer()) சரியாக டைமர் புதுப்பிப்புகளை உறுதிசெய்ய மதிப்பிடப்படுகிறது. வெவ்வேறு சூழ்நிலைகளில் குறியீடு எதிர்பார்த்தபடி செயல்படுவதை இது உறுதி செய்கிறது.
expect()	உண்மையான மதிப்பு (புதுப்பிக்கப்பட்ட டைமர் போன்றவை) எதிர்பார்த்த மதிப்புடன் பொருந்துகிறதா என்பதைச் சரிபார்க்கும் ஜெஸ்ட் கட்டளை. ஒரு பொத்தானைக் கிளிக் செய்தவுடன் கேம்டைம் மற்றும் document.title சரியாகப் புதுப்பிக்கப்பட்டதா என்பதைச் சரிபார்க்க, யூனிட் சோதனைகளில் இது பயன்படுத்தப்படுகிறது.
toBe()	கடுமையான சமத்துவத்தை சரிபார்க்கும் மற்றொரு ஜெஸ்ட் கட்டளை. changeTimer()ஐ அழைத்த பிறகு, கேம் நேரம் சரியாக எதிர்பார்க்கப்படுவதை இது உறுதி செய்கிறது (எ.கா., 30 வினாடிகளுக்கு 30,000 ms).
getElementById()	குறிப்பிட்ட பொத்தான்களை அவற்றின் ஐடிகள் மூலம் தேர்ந்தெடுக்கப் பயன்படுகிறது (எ.கா., 'முப்பது', 'அறுபது'). நிகழ்வு கேட்பவர்களை பொத்தான்களுடன் இணைப்பதற்கும் பயனர் தொடர்புக்கு பதிலளிக்கும் வகையில் டைமரின் மாறும் மாற்றத்தைத் தூண்டுவதற்கும் இந்த முறை முக்கியமானது.

ஜாவாஸ்கிரிப்ட் மற்றும் HTML பொத்தான்களைப் பயன்படுத்தி டைனமிக் டைமர்களை உருவாக்குதல்

மேலே கொடுக்கப்பட்டுள்ள ஸ்கிரிப்ட்கள், HTML பொத்தான்களைக் கிளிக் செய்வதன் மூலம் டைப்பிங் கேமில் கேம் டைமரை டைனமிக் முறையில் சரிசெய்ய பயனரை அனுமதிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளது. ஆரம்பத்தில், நாம் ஒரு மாறியை அறிவிக்கிறோம் , இது நேரத்தை மில்லி விநாடிகளில் வைத்திருக்கும் (இயல்புநிலையாக 30 வினாடிகள், மில்லி விநாடிகளாக மாற்ற 1000 ஆல் பெருக்கப்படும்). முக்கிய செயல்பாடு உள்ளது செயல்பாடு, இது கிளிக் செய்யப்பட்ட பொத்தானின் அடிப்படையில் டைமர் மதிப்பை மேம்படுத்துகிறது. இந்த முறை பொத்தானின் மதிப்பைப் பெறுகிறது (எ.கா., 30, 60, அல்லது 90) மற்றும் புதுப்பிக்கிறது விளையாட்டு நேரம் அதன்படி மாறி. கூடுதலாக, ஸ்கிரிப்ட் தேர்ந்தெடுக்கப்பட்ட டைமர் கால அளவைப் பிரதிபலிக்கும் வகையில் பக்கத்தின் தலைப்பைப் புதுப்பித்து, பயனர்களுக்கு எவ்வளவு நேரம் இருக்கிறது என்பதைத் தெளிவாக்குகிறது.

டைனமிக் நடத்தைக்காக, நிகழ்வு கேட்பவர்களை நாங்கள் பயன்படுத்துகிறோம், குறிப்பாக கட்டளை. பயனர் ஏதேனும் பொத்தான்களைக் கிளிக் செய்யும் போது ஸ்கிரிப்ட் செயல்பட அனுமதிக்கிறது. ஒவ்வொரு பொத்தானுக்கும் ஒரு ஐடி ஒதுக்கப்பட்டு, கிளிக் செய்யும் போது, ​​அதைத் தூண்டுகிறது செயல்பாடு, அந்தந்த நேர மதிப்பைக் கடக்கிறது. HTML கட்டமைப்பில் மீண்டும் மீண்டும் வரும் இன்லைன் ஜாவாஸ்கிரிப்ட் தேவையில்லாமல் பல பொத்தான்களை திறமையாக கையாள இந்த அணுகுமுறை பயனுள்ளதாக இருக்கும். ஸ்கிரிப்ட்டில் நீங்கள் இன்லைன் நிகழ்வு ஹேண்ட்லர்களைப் பயன்படுத்தக்கூடிய ஃபால்பேக் விருப்பமும் அடங்கும் மட்டுமையை விட எளிமை விரும்பப்பட்டால்.

மாற்று தீர்வு, நாம் நேரடியாக கட்டி பொத்தான்களுக்கு நிகழ்வு. இந்த முறை செயல்படுத்துகிறது கிளிக் செய்யப்படும் பொத்தானில் நேரடியாகச் செயல்படும். இது ஒரு நேரடியான அணுகுமுறை, ஆனால் நிகழ்வு கேட்பவர் முறையின் நெகிழ்வுத்தன்மை இல்லை. இந்த முறையின் எளிமை சிறிய, குறைவான சிக்கலான பயன்பாடுகளுக்கு பயனுள்ளதாக இருக்கும். இருப்பினும், மேலும் அளவிடக்கூடிய குறியீட்டிற்கு, நிகழ்வு கேட்பவர்கள் அதிக நெகிழ்வுத்தன்மையை வழங்குகிறார்கள் மற்றும் HTML கட்டமைப்பை நேரடியாக மாற்றாமல் ஸ்கிரிப்ட்க்கு எளிதாக புதுப்பிப்புகளை அனுமதிக்கிறார்கள். இரண்டு முறைகளும் ஒரே சிக்கலைத் தீர்ப்பதை நோக்கமாகக் கொண்டுள்ளன, அதாவது டைமரை சரிசெய்து, பயனரின் தேர்வின் அடிப்படையில் தலைப்பை மாறும்.

கடைசியாக, JavaScript சோதனை கட்டமைப்பான Jest ஐப் பயன்படுத்தி யூனிட் சோதனைகளைச் செயல்படுத்துகிறோம். தி டைமர் சரியாக புதுப்பிக்கப்படுவதை சரிபார்க்க செயல்பாடுகள் முக்கியமானவை. டைமர் 30 வினாடிகள், 60 வினாடிகள் அல்லது 90 வினாடிகளுக்கு சரிசெய்கிறதா என்பது போன்ற பல காட்சிகளைச் சோதிப்பதன் மூலம், இந்த யூனிட் சோதனைகள் ஸ்கிரிப்ட்டின் சரியான தன்மையை உறுதி செய்கின்றன. போன்ற கட்டளைகள் மற்றும் உண்மையான டைமர் மதிப்பும் பக்கத்தின் தலைப்பும் எதிர்பார்க்கப்படும் விளைவுகளுடன் பொருந்துகிறதா என்பதைச் சரிபார்க்கப் பயன்படுகிறது. இந்த சோதனைக் கட்டமானது, உங்கள் டைமர் லாஜிக் வெவ்வேறு பயன்பாட்டு நிகழ்வுகளில் சரியாகச் செயல்படுவதை உறுதிசெய்கிறது, இது உங்கள் தீர்வின் உறுதியான நம்பிக்கையை வழங்குகிறது.

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

டைமர் தனிப்பயனாக்கத்துடன் கேம் தொடர்புகளை மேம்படுத்துதல்

தட்டச்சு விளையாட்டில் டைமரை மாற்றும்போது கருத்தில் கொள்ள வேண்டிய மற்றொரு அம்சம் ஒட்டுமொத்த பயனர் அனுபவம் மற்றும் இடைமுகம். பொத்தான்கள் வழியாக கேம் டைமரைச் சரிசெய்வதுடன், வீரர்கள் தேர்ந்தெடுத்த டைமரில் காட்சிக் கருத்தை வழங்குவது முக்கியம். கவுண்டவுன் டிஸ்ப்ளே போன்ற பக்கத்தில் உள்ள பிற கூறுகளைப் புதுப்பிப்பதன் மூலம் இதை அடையலாம். டைமரை அமைக்க ஒரு பொத்தானைக் கிளிக் செய்த பிறகு, கவுண்டவுன் டைமர் உடனடியாகத் தொடங்க வேண்டும், இது பயனருக்கு நிகழ்நேரக் கருத்தை வழங்குகிறது. இது தொடர்பு மென்மையாகவும் உள்ளுணர்வுடனும் இருப்பதை உறுதிசெய்கிறது, மேலும் விளையாட்டை மேலும் ஈர்க்கிறது.

இதை செயல்படுத்த, நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம் செயல்பாடு. டைமர் அமைக்கப்பட்டவுடன், இடைவெளியை அமைக்கவும் ஒவ்வொரு நொடியும் டைமர் மதிப்பைக் குறைக்கும் கவுண்ட்டவுனை உருவாக்கப் பயன்படுத்தலாம். டைமர் பூஜ்ஜியத்தை அடையும் போது, ​​செயல்பாடு விளையாட்டை நிறுத்தலாம் அல்லது நேரம் முடிந்துவிட்டது என்று பயனருக்கு எச்சரிக்கை செய்யலாம். இந்த செயல்பாடு, பொத்தான்களைப் பயன்படுத்தி டைமரை மாறும் திறனுடன் இணைந்து, விளையாட்டு அனுபவத்தை கணிசமாக மேம்படுத்துகிறது. ஒரு பதிலளிக்கக்கூடிய இடைமுகம் வீரர்களை ஈடுபாட்டுடன் வைத்திருப்பதற்கு முக்கியமாகும், மேலும் நிகழ்நேர கருத்து அதை அடைய ஒரு வழியாகும்.

மேலும், பிழை கையாளுதல் கருத்தில் கொள்ள வேண்டும். எடுத்துக்காட்டாக, ஒரு பயனர் டைமரை அமைக்காமல் விளையாட்டைத் தொடங்க முயற்சித்தால், சரியான நேரத்தைத் தேர்ந்தெடுக்க ஒரு செய்தியை நீங்கள் அவர்களிடம் கேட்கலாம். சரிபார்ப்பு வழிமுறைகளை இணைப்பதன் மூலம், கேம் சீராக இயங்குவதை உறுதிசெய்து, சாத்தியமான சிக்கல்களைக் குறைக்கிறீர்கள். இந்த வகை சரிபார்ப்பு பயனர் அனுபவத்தை மேம்படுத்துவதோடு மட்டுமல்லாமல், உங்கள் கேமின் நம்பகத்தன்மைக்கும் பங்களிக்கிறது, இதனால் வீரர்கள் தேவையற்ற குழப்பத்தை எதிர்கொள்வதில்லை.

1. நான் எப்படி பயன்படுத்துவது கவுண்ட்டவுனை உருவாக்கவா?
2. நீங்கள் பயன்படுத்தலாம் ஒவ்வொரு 1000 மில்லி விநாடிகளுக்கும் (1 வினாடி) அதை இயக்கி, ஒவ்வொரு முறையும் டைமர் மதிப்பைக் குறைப்பதன் மூலம். மதிப்பு பூஜ்ஜியத்தை அடையும் போது, ​​நீங்கள் பயன்படுத்தி கவுண்ட்டவுனை நிறுத்தலாம் .
3. நோக்கம் என்ன ?
4. தொடங்கப்பட்ட கவுண்டவுன் அல்லது பிற தொடர்ச்சியான செயலை நிறுத்தப் பயன்படுகிறது . பூஜ்ஜியத்தை அடையும் போது கவுண்டவுன் நிறுத்தப்படுவதை உறுதி செய்வது முக்கியம்.
5. HTML தலைப்பை எப்படி மாறும் வகையில் மேம்படுத்துவது?
6. பயன்படுத்தவும் பக்க தலைப்பின் உரையை அமைக்க. இதை உங்களுக்கே புதுப்பிக்க முடியும் தேர்ந்தெடுக்கப்பட்ட நேர மதிப்பின் அடிப்படையில் செயல்பாடு.
7. டைமரைத் தேர்ந்தெடுக்கும்போது பயனர் பிழைகளைக் கையாள முடியுமா?
8. ஆம், கவுண்ட்டவுனைத் தொடங்கும் முன், சரியான டைமர் விருப்பம் தேர்ந்தெடுக்கப்பட்டுள்ளதா எனச் சரிபார்ப்பதன் மூலம் சரிபார்ப்பைச் சேர்க்கலாம். சரியான நேரம் தேர்வு செய்யப்படவில்லை என்றால், நீங்கள் ஒரு எச்சரிக்கை அல்லது ப்ராம்ட்டைக் காட்டலாம்.
9. ஒரு பொத்தானைக் கிளிக் செய்யும் போது ஒரு செயல்பாட்டை எவ்வாறு தூண்டுவது?
10. நீங்கள் ஒரு பொத்தானைப் பயன்படுத்தி ஒரு செயல்பாட்டை இணைக்கலாம் அல்லது நேரடியாகப் பயன்படுத்துவதன் மூலம் பொத்தானின் HTML உறுப்பில்.

டைப்பிங் கேமில் டைனமிக் டைமர் சரிசெய்தல்களைச் சேர்ப்பது பிளேயர் அனுபவத்தை கணிசமாக மேம்படுத்துகிறது. எளிய HTML பொத்தான்களைப் பயன்படுத்தி டைமரை மாற்ற பயனர்களை அனுமதிப்பதன் மூலமும், கேமின் இடைமுகத்தை நிகழ்நேரத்தில் புதுப்பிப்பதன் மூலமும், டெவலப்பர்கள் தங்கள் கேம்களை மேலும் ஊடாடும் மற்றும் நெகிழ்வானதாக மாற்ற முடியும். இந்த வகையான கட்டுப்பாடு வெவ்வேறு திறன் நிலைகளுக்கு இடமளிக்க உதவுகிறது.

நிகழ்வு கேட்பவர்கள், பிழை கையாளுதல் மற்றும் யூனிட் சோதனைகள் போன்ற சிறந்த நடைமுறைகளைப் பயன்படுத்துவது, கேம் சீராக இயங்குவதை உறுதிசெய்து நம்பகமான பயனர் அனுபவத்தை வழங்குகிறது. இந்த அம்சங்களைச் செயல்படுத்துவது விளையாட்டின் செயல்பாட்டை மேம்படுத்துவதோடு மட்டுமல்லாமல், பதிலளிக்கக்கூடிய, பயனர் நட்பு இயக்கவியலில் வீரர்களை அதிக ஈடுபாட்டுடன் வைத்திருக்கும்.