Kako spremeniti vrednost časovnika JavaScript za igro tipkanja z uporabo gumbov HTML

Dinamična nastavitev časovnika za igro tipkanja z uporabo gumbov

V igri tipkanja je nadzor tempa igre ključnega pomena za zagotavljanje privlačne uporabniške izkušnje. Eden od pomembnih dejavnikov je časovnik, ki določa, koliko časa mora uporabnik dokončati igro ali izziv tipkanja. Če uporabnikom omogočite prilagajanje časovnika igre s preprostimi gumbi HTML, jim lahko omogočite večji nadzor nad njihovim igranjem.

Ta članek vam bo pokazal, kako ustvariti rešitev v JavaScriptu, ki igralcem omogoča izbiro med različnimi nastavitvami časovnika z gumbi. Na primer, če izberete gumb '30s', boste časovnik prilagodili na 30 sekund, medtem ko ga boste s klikom na gumb '60s' spremenili na 60 sekund.

Funkcija JavaScript bo prevzela vrednost kliknjenega gumba in dinamično posodobila časovnik in naslov igre. Ta vrsta prilagodljivosti lahko izboljša uporabniško izkušnjo, zaradi česar je igra bolj prilagodljiva in prijetna za različne ravni znanja.

Na koncu tega vodnika boste imeli popolnoma delujočo funkcijo prilagajanja časovnika z uporabo HTML in JavaScript. Pokrili bomo tudi, kako posodobiti prikazano vrednost časovnika na naslovu strani, da odraža izbrano trajanje časovnika.

Ukaz	Primer uporabe
document.querySelector()	Uporablja se za izbiro elementa HTML
addEventListener()	Določen dogodek (npr. klik) poveže z elementom gumba. V tem kontekstu se uporablja za sprožitev funkcije changeTimer(), ko uporabnik klikne gumb, kar omogoča dinamično interakcijo z nastavitvami časovnika.
innerText	Ta lastnost omogoča spreminjanje vidnega besedila v elementu HTML. V tej rešitvi se uporablja za posodobitev vrednosti časovnika v naslovu strani, ko kliknete gumb.
onClick	Atribut vgrajenega obdelovalnika dogodkov, ki se uporablja v alternativnem pristopu za pripenjanje funkcije changeTimer() neposredno dogodku klika gumba. To omogoča enostavnejši, manj modularen način dinamičnega posodabljanja časovnika.
test()	Ta metoda se uporablja pri testiranju enot z Jest. Definira preskusni primer, kjer se preskušana funkcija (npr. changeTimer()) oceni, da se zagotovi pravilna posodobitev časovnika. Zagotavlja, da se koda v različnih scenarijih obnaša po pričakovanjih.
expect()	Ukaz Jest, ki preveri, ali se dejanska vrednost (na primer posodobljeni časovnik) ujema s pričakovano vrednostjo. Uporablja se v testih enot za preverjanje, ali sta gameTime in document.title pravilno posodobljena po kliku gumba.
toBe()	Še en ukaz Jest, ki preverja strogo enakost. Zagotavlja, da je po klicu changeTimer() čas igre točno tak, kot je pričakovan (npr. 30.000 ms za 30 sekund).
getElementById()	Uporablja se za izbiro določenih gumbov po njihovih ID-jih (npr. 'trideset', 'šestdeset'). Ta metoda je pomembna za pripenjanje poslušalcev dogodkov na gumbe in sprožitev dinamične spremembe časovnika kot odgovor na interakcijo uporabnika.

Ustvarjanje dinamičnih časovnikov z uporabo gumbov JavaScript in HTML

Zgoraj navedeni skripti so zasnovani tako, da uporabniku omogočajo dinamično prilagajanje časovnika igre v igri tipkanja s klikom na gumbe HTML. Na začetku deklariramo spremenljivko , ki vsebuje čas v milisekundah (30 sekund privzeto, pomnoženo s 1000 za pretvorbo v milisekunde). Ključna funkcionalnost je v funkcijo, ki posodobi vrednost časovnika glede na klik gumba. Ta metoda prejme vrednost gumba (npr. 30, 60 ali 90) in posodobi čas igre ustrezno spremenljivka. Poleg tega skript posodobi naslov strani, da odraža izbrano trajanje časovnika, tako da uporabnikom jasno pove, koliko časa imajo.

Za dinamično vedenje uporabljamo poslušalce dogodkov, zlasti ukaz. To omogoča, da se skript odzove, ko uporabnik klikne kateri koli gumb. Vsakemu gumbu je dodeljen ID in ob kliku sproži funkcijo, ki posreduje ustrezno časovno vrednost. Ta pristop je uporaben za učinkovito ravnanje z več gumbi brez potrebe po ponavljajočem se vgrajenem JavaScriptu v strukturi HTML. Skript vključuje tudi nadomestno možnost, kjer lahko uporabite vgrajene obdelovalce dogodkov, kot je če ima preprostost prednost pred modularnostjo.

Pri alternativni rešitvi neposredno zavežemo dogodek na gumbe. Ta metoda izvaja deluje neposredno ob kliku na gumb. To je preprost pristop, vendar nima prilagodljivosti metode poslušalca dogodkov. Preprostost te metode je uporabna za manjše, manj zapletene aplikacije. Za bolj razširljivo kodo pa poslušalci dogodkov ponujajo večjo prilagodljivost in omogočajo lažje posodabljanje skripta brez neposrednega spreminjanja strukture HTML. Cilj obeh metod je rešiti isto težavo, to je prilagajanje časovnika in dinamično posodabljanje naslova glede na izbiro uporabnika.

Nazadnje izvajamo teste enot z uporabo Jest, ogrodja za testiranje JavaScript. The funkcije so ključne za preverjanje, ali se časovnik pravilno posodablja. S preizkušanjem več scenarijev, na primer, ali se časovnik prilagodi na 30 sekund, 60 sekund ali 90 sekund, ti testi enot zagotavljajo pravilnost skripta. Ukazi kot in se uporabljajo za preverjanje, ali se dejanska vrednost časovnika in naslov strani ujemata s pričakovanimi rezultati. Ta faza testiranja zagotavlja, da vaša logika časovnika pravilno deluje v različnih primerih uporabe, kar zagotavlja zaupanje v robustnost vaše rešitve.

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

Izboljšanje interakcije z igro s prilagajanjem časovnika

Drug vidik, ki ga je treba upoštevati pri spreminjanju časovnika v igri tipkanja, je splošna uporabniška izkušnja in vmesnik. Poleg prilagajanja časovnika igre prek gumbov je pomembno, da igralcem omogočite vizualno povratno informacijo o izbranem časovniku. To je mogoče doseči s posodobitvijo drugih elementov na strani, kot je prikaz odštevanja. Ko se klikne gumb za nastavitev časovnika, se mora odštevalnik takoj zagnati in uporabniku zagotoviti povratne informacije v realnem času. To zagotavlja, da je interakcija gladka in intuitivna, zaradi česar je igra bolj privlačna.

Če želite to izvesti, lahko uporabite JavaScript funkcijo. Ko je časovnik nastavljen, setInterval lahko uporabite za ustvarjanje odštevanja, ki vsako sekundo zmanjša vrednost časovnika. Ko časovnik doseže nič, lahko funkcija ustavi igro ali opozori uporabnika, da je čas potekel. Ta funkcionalnost v kombinaciji z možnostjo dinamičnega spreminjanja časovnika z uporabo gumbov bistveno izboljša izkušnjo igranja. Odziven vmesnik je ključnega pomena za ohranjanje angažiranosti igralcev, povratne informacije v realnem času pa so eden od načinov, kako to doseči.

Poleg tega je treba upoštevati obravnavo napak. Na primer, če uporabnik poskuša začeti igro, ne da bi nastavil časovnik, ga lahko s sporočilom pozovete, naj izbere veljaven čas. Z vključitvijo mehanizmov preverjanja zagotovite nemoteno delovanje igre in zmanjšate morebitne težave. Ta vrsta preverjanja ne le izboljša uporabniško izkušnjo, ampak tudi prispeva k zanesljivosti vaše igre, kar zagotavlja, da se igralci ne soočajo z nepotrebno zmedo.

1. Kako naj uporabim ustvariti odštevanje?
2. Lahko uporabite tako, da ga nastavite tako, da se izvaja vsakih 1000 milisekund (1 sekundo) in vsakič zmanjšate vrednost časovnika. Ko vrednost doseže nič, lahko ustavite odštevanje z uporabo .
3. Kaj je namen ?
4. se uporablja za ustavitev odštevanja ali katerega koli drugega ponavljajočega se dejanja, ki ga je začel . Bistveno je zagotoviti, da se odštevanje ustavi, ko doseže ničlo.
5. Kako lahko dinamično posodobim naslov HTML?
6. Uporaba za nastavitev besedila naslova strani. To je mogoče posodobiti v vašem funkcijo na podlagi izbrane časovne vrednosti.
7. Ali lahko obravnavam napake uporabnika pri izbiri časovnika?
8. Da, potrditev lahko dodate tako, da pred začetkom odštevanja preverite, ali je bila izbrana veljavna možnost časovnika. Če ni izbran veljaven čas, lahko prikažete opozorilo ali poziv.
9. Kako sprožim funkcijo, ko kliknem gumb?
10. Funkcijo lahko pripnete gumbu z uporabo ali z neposredno uporabo v elementu HTML gumba.

Vključitev dinamičnih prilagoditev časovnika v igro tipkanja znatno izboljša izkušnjo igralca. Z omogočanjem uporabnikom, da spremenijo časovnik z uporabo preprostih gumbov HTML in posodabljanjem vmesnika igre v realnem času, lahko razvijalci naredijo svoje igre bolj interaktivne in prilagodljive. Ta vrsta nadzora pomaga prilagoditi različne ravni spretnosti.

Uporaba najboljših praks, kot so poslušalci dogodkov, obravnavanje napak in testi enot, zagotavljajo nemoteno delovanje igre in zagotavljajo zanesljivo uporabniško izkušnjo. Implementacija teh funkcij ne bo le izboljšala funkcionalnosti igre, temveč bo igralce bolj vključila z odzivno in uporabniku prijazno mehaniko.