Kā mainīt JavaScript taimera vērtību rakstīšanas spēlei, izmantojot HTML pogas

Dinamiskā taimera pielāgošana spēles rakstīšanai, izmantojot pogas

Rakstīšanas spēlē spēles tempa kontrole ir ļoti svarīga, lai nodrošinātu lietotājam saistošu pieredzi. Viens svarīgs faktors ir taimeris, kas nosaka, cik ilgi lietotājam jāpabeidz spēle vai rakstīšanas uzdevums. Ļaujot lietotājiem pielāgot spēles taimeri, izmantojot vienkāršas HTML pogas, jūs varat dot viņiem lielāku kontroli pār savu spēli.

Šajā rakstā tiks parādīts, kā izveidot risinājumu JavaScript, kas ļauj spēlētājiem izvēlēties starp dažādiem taimera iestatījumiem, izmantojot pogas. Piemēram, atlasot pogu “30s”, taimeris tiks iestatīts uz 30 sekundēm, savukārt, noklikšķinot uz pogas “60 s”, tas tiek mainīts uz 60 sekundēm.

JavaScript funkcija ņems vērtību no noklikšķinātās pogas un dinamiski atjauninās gan taimeri, gan spēles nosaukumu. Šāda veida elastība var uzlabot lietotāja pieredzi, padarot spēli pielāgojamāku un patīkamāku dažādiem prasmju līmeņiem.

Līdz šīs rokasgrāmatas beigām jums būs pilnībā funkcionējoša taimera pielāgošanas funkcija, izmantojot HTML un JavaScript. Mēs arī apskatīsim, kā atjaunināt lapas virsrakstā parādīto taimera vērtību, lai atspoguļotu atlasīto taimera ilgumu.

Pavēli	Lietošanas piemērs
document.querySelector()	Izmanto, lai atlasītu HTML elementu
addEventListener()	Saista konkrētu notikumu (piemēram, klikšķi) ar pogas elementu. Šajā kontekstā to izmanto, lai aktivizētu funkciju changeTimer(), kad lietotājs noklikšķina uz pogas, ļaujot dinamiski mijiedarboties ar taimera iestatījumiem.
innerText	Šis rekvizīts ļauj modificēt redzamo tekstu HTML elementā. Šajā risinājumā tas tiek izmantots, lai atjauninātu taimera vērtību lapas nosaukumā, kad tiek noklikšķināts uz pogas.
onClick	Iekļauts notikumu apstrādātāja atribūts, ko izmanto alternatīvajā pieejā, lai pievienotu funkciju changeTimer() tieši pogas klikšķa notikumam. Tas nodrošina vienkāršāku, mazāk modulāru veidu, kā dinamiski atjaunināt taimeri.
test()	Šo metodi izmanto vienības testēšanā ar Jest. Tas definē testa gadījumu, kurā tiek novērtēta testētā funkcija (piemēram, changeTimer()), lai nodrošinātu taimera pareizu atjaunināšanu. Tas nodrošina, ka kods darbojas tā, kā paredzēts dažādos scenārijos.
expect()	Jest komanda, kas pārbauda, ​​vai faktiskā vērtība (piemēram, atjauninātais taimeris) atbilst paredzamajai vērtībai. To izmanto vienību pārbaudēs, lai pārbaudītu, vai gameTime un document.title tiek pareizi atjaunināti pēc pogas noklikšķināšanas.
toBe()	Vēl viena Jest komanda, kas pārbauda stingru vienlīdzību. Tas nodrošina, ka pēc changeTimer() izsaukšanas spēles laiks ir tieši tāds, kāds ir paredzēts (piemēram, 30 000 ms 30 sekundes).
getElementById()	Izmanto, lai atlasītu noteiktas pogas pēc to ID (piemēram, "trīsdesmit", "sešdesmit"). Šī metode ir svarīga, lai pogām pievienotu notikumu uztvērējus un aktivizētu taimera dinamiskas izmaiņas, reaģējot uz lietotāja mijiedarbību.

Dinamisko taimeru izveide, izmantojot JavaScript un HTML pogas

Iepriekš sniegtie skripti ir izstrādāti, lai ļautu lietotājam dinamiski pielāgot spēles taimeri rakstīšanas spēlē, noklikšķinot uz HTML pogām. Sākumā mēs deklarējam mainīgo , kas glabā laiku milisekundēs (pēc noklusējuma 30 sekundes, kas reizināts ar 1000, lai pārvērstu par milisekundēm). Galvenā funkcionalitāte slēpjas funkcija, kas atjaunina taimera vērtību, pamatojoties uz noklikšķinātās pogas. Šī metode saņem pogas vērtību (piemēram, 30, 60 vai 90) un atjaunina spēles laiks attiecīgi mainās. Turklāt skripts atjaunina lapas nosaukumu, lai atspoguļotu atlasīto taimera ilgumu, padarot lietotājiem skaidru, cik daudz laika viņiem ir.

Dinamiskajai uzvedībai mēs izmantojam notikumu klausītājus, jo īpaši komandu. Tas ļauj skriptam reaģēt, kad lietotājs noklikšķina uz kādas no pogām. Katrai pogai tiek piešķirts ID, un, noklikšķinot, tiek aktivizēts funkcija, nododot attiecīgo laika vērtību. Šī pieeja ir noderīga, lai efektīvi apstrādātu vairākas pogas, neizmantojot atkārtotu iekļauto JavaScript HTML struktūrā. Skriptā ir iekļauta arī atkāpšanās opcija, kurā varat izmantot, piemēram, iekļautos notikumu apdarinātājus ja priekšroka tiek dota vienkāršībai, nevis modularitātei.

Alternatīvajā risinājumā mēs tieši piesaistām notikumu uz pogām. Šī metode izpilda funkciju tieši pēc pogas noklikšķināšanas. Tā ir vienkārša pieeja, taču tai trūkst notikumu uztvērēja metodes elastības. Šīs metodes vienkāršība ir noderīga mazākiem, mazāk sarežģītiem lietojumiem. Tomēr, lai kods būtu mērogojamāks, notikumu uztvērēji piedāvā lielāku elastību un ļauj vieglāk atjaunināt skriptu, tieši nemainot HTML struktūru. Abu metožu mērķis ir atrisināt vienu un to pašu problēmu, proti, pielāgot taimeri un dinamiski atjaunināt nosaukumu, pamatojoties uz lietotāja izvēli.

Visbeidzot, mēs ieviešam vienību testus, izmantojot Jest — JavaScript testēšanas sistēmu. The funkcijas ir ļoti svarīgas, lai pārbaudītu, vai taimeris tiek pareizi atjaunināts. Pārbaudot vairākus scenārijus, piemēram, vai taimeris pielāgojas 30 sekundēm, 60 sekundēm vai 90 sekundēm, šīs vienības pārbaudes nodrošina skripta pareizību. Komandām patīk un tiek izmantoti, lai pārbaudītu, vai faktiskā taimera vērtība un lapas nosaukums atbilst sagaidāmajiem rezultātiem. Šī testēšanas fāze nodrošina, ka taimera loģika darbojas pareizi dažādos lietošanas gadījumos, nodrošinot pārliecību par jūsu risinājuma robustumu.

// 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');
});

Spēļu mijiedarbības uzlabošana ar taimera pielāgošanu

Vēl viens aspekts, kas jāņem vērā, mainot taimeri rakstīšanas spēlē, ir vispārējā lietotāja pieredze un saskarne. Papildus spēles taimera regulēšanai, izmantojot pogas, ir svarīgi sniegt spēlētājiem vizuālu atgriezenisko saiti par izvēlēto taimeri. To var panākt, atjauninot citus lapas elementus, piemēram, atpakaļskaitīšanas displeju. Pēc tam, kad ir noklikšķināts uz pogas, lai iestatītu taimeri, atpakaļskaitīšanas taimeris jāsāk nekavējoties, sniedzot lietotājam reāllaika atgriezenisko saiti. Tas nodrošina, ka mijiedarbība ir vienmērīga un intuitīva, padarot spēli saistošāku.

Lai to ieviestu, varat izmantot JavaScript funkciju. Kad taimeris ir iestatīts, setInterval var izmantot, lai izveidotu atpakaļskaitīšanu, kas katru sekundi samazina taimera vērtību. Kad taimeris sasniedz nulli, funkcija var vai nu apturēt spēli, vai brīdināt lietotāju, ka laiks ir beidzies. Šī funkcionalitāte apvienojumā ar iespēju dinamiski mainīt taimeri, izmantojot pogas, ievērojami uzlabo spēles pieredzi. Atsaucīga saskarne ir galvenais, lai spēlētāji iesaistītos, un reāllaika atsauksmes ir viens no veidiem, kā to panākt.

Turklāt jāapsver kļūdu apstrāde. Piemēram, ja lietotājs mēģina sākt spēli, neiestatot taimeri, varat aicināt viņu ar ziņojumu izvēlēties derīgu laiku. Iekļaujot validācijas mehānismus, jūs nodrošināsiet, ka spēle darbojas nevainojami un samazina iespējamās problēmas. Šāda veida validācija ne tikai uzlabo lietotāja pieredzi, bet arī veicina jūsu spēles uzticamību, nodrošinot, ka spēlētāji nesaskaras ar nevajadzīgu apjukumu.

1. Kā lietot lai izveidotu atpakaļskaitīšanu?
2. Jūs varat izmantot iestatot to izpildīt ik pēc 1000 milisekundēm (1 sekunde) un katru reizi samazinot taimera vērtību. Kad vērtība sasniedz nulli, varat apturēt atpakaļskaitīšanu, izmantojot .
3. Kāds ir mērķis ?
4. tiek izmantots, lai apturētu atpakaļskaitīšanu vai jebkuru citu atkārtotu darbību, kuru sāka . Ir ļoti svarīgi nodrošināt, ka atpakaļskaitīšana tiek apturēta, kad tā sasniedz nulli.
5. Kā es varu dinamiski atjaunināt HTML nosaukumu?
6. Izmantot lai iestatītu lapas nosaukuma tekstu. To var atjaunināt savā funkcija, pamatojoties uz izvēlēto laika vērtību.
7. Vai es varu apstrādāt lietotāja kļūdas, izvēloties taimeri?
8. Jā, varat pievienot apstiprinājumu, pirms atpakaļskaitīšanas sākuma pārbaudot, vai ir atlasīta derīga taimera opcija. Ja nav izvēlēts derīgs laiks, varat parādīt brīdinājumu vai uzvedni.
9. Kā aktivizēt funkciju, kad tiek noklikšķināts uz pogas?
10. Varat pievienot funkciju pogai, izmantojot vai tieši izmantojot pogas HTML elementā.

Dinamisko taimera pielāgojumu iekļaušana rakstīšanas spēlē ievērojami uzlabo spēlētāja pieredzi. Ļaujot lietotājiem mainīt taimeri, izmantojot vienkāršas HTML pogas, un atjauninot spēles saskarni reāllaikā, izstrādātāji var padarīt savas spēles interaktīvākas un elastīgākas. Šāda veida kontrole palīdz pielāgoties dažādiem prasmju līmeņiem.

Izmantojot labāko praksi, piemēram, notikumu uztvērējus, kļūdu apstrādi un vienību testus, tiek nodrošināta vienmērīga spēle un nodrošināta uzticama lietotāja pieredze. Šo funkciju ieviešana ne tikai uzlabos spēles funkcionalitāti, bet arī ļaus spēlētājiem vairāk iesaistīties ar atsaucīgu, lietotājam draudzīgu mehāniku.