Kako izmijeniti vrijednost JavaScript timera za igru ​​tipkanja pomoću HTML gumba

Dinamičko podešavanje mjerača vremena za igru ​​tipkanja pomoću gumba

U igri tipkanja, kontrola tempa igre ključna je za osiguravanje privlačnog korisničkog iskustva. Jedan važan čimbenik je mjerač vremena, koji određuje koliko dugo korisnik mora dovršiti igru ​​ili izazov tipkanja. Dopuštajući korisnicima da prilagode tajmer igre putem jednostavnih HTML gumba, možete im dati veću kontrolu nad njihovim igranjem.

Ovaj članak će vam pokazati kako stvoriti rješenje u JavaScriptu koje omogućuje igračima da biraju između različitih postavki tajmera pomoću gumba. Na primjer, odabir gumba '30s' će namjestiti mjerač vremena na 30 sekundi, dok ga klik na gumb '60s' mijenja na 60 sekundi.

JavaScript funkcija će preuzeti vrijednost kliknutog gumba i dinamički ažurirati mjerač vremena i naslov igre. Ova vrsta fleksibilnosti može poboljšati korisničko iskustvo, čineći igru ​​prilagodljivijom i ugodnijom za različite razine vještina.

Do kraja ovog vodiča imat ćete potpuno funkcionalnu značajku podešavanja vremenskog mjerača pomoću HTML-a i JavaScripta. Također ćemo pokriti kako ažurirati prikazanu vrijednost mjerača vremena na naslovu stranice kako bi odražavala odabrano trajanje mjerača vremena.

Naredba	Primjer korištenja
document.querySelector()	Koristi se za odabir HTML elementa
addEventListener()	Povezuje određeni događaj (npr. klik) s elementom gumba. U ovom kontekstu, koristi se za pokretanje funkcije changeTimer() kada korisnik klikne gumb, što omogućuje dinamičku interakciju s postavkama mjerača vremena.
innerText	Ovo svojstvo omogućuje izmjenu vidljivog teksta unutar HTML elementa. U ovom rješenju koristi se za ažuriranje vrijednosti mjerača vremena u naslovu stranice kada se klikne gumb.
onClick	Atribut ugrađenog rukovatelja događajem koji se koristi u alternativnom pristupu za pripajanje funkcije changeTimer() izravno događaju klika gumba. To omogućuje jednostavniji, manje modularan način dinamičkog ažuriranja mjerača vremena.
test()	Ova se metoda koristi u jediničnom testiranju s Jestom. Definira testni slučaj u kojem se funkcija koja se testira (npr. changeTimer()) procjenjuje kako bi se osiguralo ispravno ažuriranje mjerača vremena. Osigurava da se kôd ponaša prema očekivanjima u različitim scenarijima.
expect()	Naredba Jest koja provjerava odgovara li stvarna vrijednost (poput ažuriranog mjerača vremena) očekivanoj vrijednosti. Koristi se u jediničnim testovima za provjeru jesu li gameTime i document.title ispravno ažurirani nakon klika na gumb.
toBe()	Još jedna Jest naredba koja provjerava strogu jednakost. Osigurava da nakon poziva changeTimer(), vrijeme igre bude točno ono što se očekuje (npr. 30 000 ms za 30 sekundi).
getElementById()	Koristi se za odabir određenih gumba prema njihovim ID-ovima (npr. 'trideset', 'šezdeset'). Ova je metoda važna za pričvršćivanje slušatelja događaja na gumbe i pokretanje dinamičke promjene mjerača vremena kao odgovor na interakciju korisnika.

Stvaranje dinamičkih mjerača vremena pomoću JavaScripta i HTML gumba

Gore navedene skripte dizajnirane su kako bi omogućile korisniku da dinamički prilagodi mjerač vremena u igri tipkanja klikom na HTML gumbe. U početku deklariramo varijablu , koji drži vrijeme u milisekundama (30 sekundi prema zadanim postavkama, pomnoženo s 1000 za pretvorbu u milisekunde). Ključna funkcionalnost leži u funkcija koja ažurira vrijednost mjerača vremena na temelju kliknutog gumba. Ova metoda prima vrijednost gumba (npr. 30, 60 ili 90) i ažurira vrijeme igre varijabilno prema tome. Osim toga, skripta ažurira naslov stranice kako bi odražavala odabrano trajanje mjerača vremena, dajući korisnicima do znanja koliko vremena imaju.

Za dinamičko ponašanje koristimo slušatelje događaja, posebno naredba. To omogućuje skripti da reagira kada korisnik klikne bilo koji od gumba. Svakom gumbu dodijeljen je ID i, kada se klikne, pokreće funkcija, prosljeđujući odgovarajuću vremensku vrijednost. Ovaj pristup je koristan za učinkovito rukovanje višestrukim gumbima bez potrebe za repetitivnim ugrađenim JavaScriptom u HTML strukturi. Skripta također uključuje zamjensku opciju gdje možete koristiti ugrađene rukovatelje događajima poput ako je jednostavnost bolja od modularnosti.

U alternativnom rješenju izravno vezujemo događaj na gumbe. Ova metoda izvršava funkcioniraju izravno nakon klika na gumb. To je jednostavan pristup, ali nedostaje mu fleksibilnost metode slušatelja događaja. Jednostavnost ove metode korisna je za manje, manje složene aplikacije. Međutim, za skalabilniji kod, slušatelji događaja nude veću fleksibilnost i omogućuju lakše ažuriranje skripte bez izravne izmjene HTML strukture. Obje metode imaju za cilj riješiti isti problem, a to je podešavanje mjerača vremena i dinamičko ažuriranje naslova na temelju odabira korisnika.

Na kraju, implementiramo jedinične testove koristeći Jest, JavaScript okvir za testiranje. The funkcije ključne su za provjeru ispravnosti ažuriranja mjerača vremena. Testiranjem višestrukih scenarija, kao što je podešavanje mjerača vremena na 30 sekundi, 60 sekundi ili 90 sekundi, ovi jedinični testovi osiguravaju ispravnost skripte. Naredbe poput i koriste se za provjeru odgovaraju li stvarna vrijednost mjerača vremena i naslov stranice očekivanim rezultatima. Ova faza testiranja osigurava da vaša logika mjerača vremena ispravno funkcionira u različitim slučajevima upotrebe, pružajući povjerenje u robusnost vašeg rješenja.

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

Poboljšanje interakcije igre uz prilagodbu mjerača vremena

Još jedan aspekt koji treba uzeti u obzir pri mijenjanju mjerača vremena u igri tipkanja je cjelokupno korisničko iskustvo i sučelje. Osim podešavanja mjerača vremena igre putem gumba, važno je dati igračima vizualnu povratnu informaciju o odabranom mjeraču vremena. To se može postići ažuriranjem drugih elemenata na stranici, kao što je prikaz odbrojavanja. Nakon što se klikne gumb za postavljanje mjerača vremena, mjerač vremena trebao bi se odmah pokrenuti, pružajući korisniku povratnu informaciju u stvarnom vremenu. To osigurava da je interakcija glatka i intuitivna, čineći igru ​​privlačnijom.

Da biste to implementirali, možete koristiti JavaScript funkcija. Nakon što je tajmer postavljen, setInterval može se koristiti za stvaranje odbrojavanja koje smanjuje vrijednost mjerača vremena svake sekunde. Kada mjerač vremena dosegne nulu, funkcija može zaustaviti igru ​​ili upozoriti korisnika da je vrijeme isteklo. Ova funkcionalnost, u kombinaciji s mogućnošću dinamičke promjene mjerača vremena pomoću gumba, značajno poboljšava iskustvo igranja. Responzivno sučelje ključno je za zadržavanje angažiranosti igrača, a povratna informacija u stvarnom vremenu jedan je od načina da se to postigne.

Nadalje, treba razmotriti rukovanje pogreškama. Na primjer, ako korisnik pokuša pokrenuti igru ​​bez postavljanja mjerača vremena, možete ga porukom potaknuti da odabere valjano vrijeme. Uključivanjem mehanizama za provjeru valjanosti osiguravate nesmetan rad igre i smanjujete moguće probleme. Ova vrsta provjere ne samo da poboljšava korisničko iskustvo, već pridonosi i pouzdanosti vaše igre, osiguravajući da se igrači ne suoče s nepotrebnom zabunom.

1. Kako da koristim stvoriti odbrojavanje?
2. Možete koristiti postavljanjem da se izvršava svakih 1000 milisekundi (1 sekunda) i smanjivanjem vrijednosti timera svaki put. Kada vrijednost dosegne nulu, možete zaustaviti odbrojavanje koristeći .
3. Koja je svrha ?
4. koristi se za zaustavljanje odbrojavanja ili bilo koje druge ponavljajuće radnje koju je započeo . Ključno je osigurati da se odbrojavanje zaustavi kada dođe do nule.
5. Kako mogu dinamički ažurirati HTML naslov?
6. Koristiti za postavljanje teksta naslova stranice. Ovo se može ažurirati unutar vašeg funkcija na temelju odabrane vremenske vrijednosti.
7. Mogu li rješavati pogreške korisnika pri odabiru mjerača vremena?
8. Da, možete dodati potvrdu provjerom je li odabrana važeća opcija mjerača vremena prije početka odbrojavanja. Ako nije odabrano valjano vrijeme, možete prikazati upozorenje ili upit.
9. Kako mogu pokrenuti funkciju kada se klikne gumb?
10. Možete priložiti funkciju gumbu pomoću ili izravnim korištenjem u HTML elementu gumba.

Uključivanje dinamičkih prilagodbi mjerača vremena u igru ​​tipkanja značajno poboljšava iskustvo igrača. Dopuštajući korisnicima da mijenjaju mjerač vremena pomoću jednostavnih HTML gumba i ažuriranjem sučelja igre u stvarnom vremenu, programeri mogu učiniti svoje igre interaktivnijima i fleksibilnijima. Ova vrsta kontrole pomaže u prilagođavanju različitih razina vještina.

Korištenje najboljih praksi kao što su slušatelji događaja, rukovanje pogreškama i jedinični testovi osiguravaju nesmetan rad igre i pouzdano korisničko iskustvo. Implementacija ovih značajki ne samo da će poboljšati funkcionalnost igre, već će i zadržati igrače više uključenima uz responzivnu, user-friendly mehaniku.