Kuidas muuta HTML-i nuppude abil tippimismängu JavaScripti taimeri väärtust

Dünaamiline taimeri reguleerimine nuppude abil mängu tippimiseks

Tippimismängus on mängutempo kontrollimine kaasahaarava kasutajakogemuse tagamiseks ülioluline. Üheks oluliseks teguriks on taimer, mis määrab, kui kaua peab kasutaja mängu või tippimise väljakutse sooritama. Lubades kasutajatel mängutaimerit lihtsate HTML-nuppude abil reguleerida, saate anda neile mängu üle suurema kontrolli.

See artikkel näitab teile, kuidas luua JavaScriptis lahendus, mis võimaldab mängijatel nuppude abil valida erinevate taimeri seadete vahel. Näiteks nupu „30s” valimine seab taimeri 30 sekundiks, samas kui nupul „60s” klõpsamine muudab selle 60 sekundiks.

JavaScripti funktsioon võtab klõpsatud nupult väärtuse ja värskendab dünaamiliselt nii taimerit kui ka mängu pealkirja. Selline paindlikkus võib parandada kasutajakogemust, muutes mängu erinevate oskuste tasemete jaoks kohandatavamaks ja nauditavamaks.

Selle juhendi lõpuks on teil täisfunktsionaalne taimeri reguleerimise funktsioon, mis kasutab HTML-i ja JavaScripti. Samuti käsitleme seda, kuidas värskendada lehe pealkirjas kuvatavat taimeri väärtust, et see kajastaks valitud taimeri kestust.

Käsk	Kasutusnäide
document.querySelector()	Kasutatakse HTML-i elemendi
addEventListener()	Seob konkreetse sündmuse (nt klõpsu) nupuelemendiga. Selles kontekstis kasutatakse seda funktsiooni changeTimer() käivitamiseks, kui kasutaja klõpsab nuppu, võimaldades dünaamilist suhtlust taimeri sätetega.
innerText	See omadus võimaldab muuta HTML-elemendis nähtavat teksti. Selles lahenduses kasutatakse seda nupul klõpsamisel lehe pealkirjas oleva taimeri väärtuse värskendamiseks.
onClick	Reasisene sündmuste käitleja atribuut, mida kasutatakse alternatiivses lähenemisviisis funktsiooni changeTimer() lisamiseks otse nupu klõpsamissündmusele. See võimaldab taimerit dünaamiliselt värskendada lihtsamal ja vähem modulaarsel viisil.
test()	Seda meetodit kasutatakse Jestiga ühikutestimisel. See määratleb testjuhtumi, kus testitavat funktsiooni (nt changeTimer()) hinnatakse, et tagada taimeri õige värskendus. See tagab, et kood käitub erinevates stsenaariumides ootuspäraselt.
expect()	Jest-käsk, mis kontrollib, kas tegelik väärtus (nagu värskendatud taimer) vastab eeldatavale väärtusele. Seda kasutatakse ühikutestides, et kontrollida, kas gameTime ja document.title värskendatakse pärast nupu klõpsamist õigesti.
toBe()	Veel üks Jesti käsk, mis kontrollib ranget võrdsust. See tagab, et pärast ChangeTimer() kutsumist on mänguaeg täpselt ootuspärane (nt 30 000 ms 30 sekundi jooksul).
getElementById()	Kasutatakse konkreetsete nuppude valimiseks nende ID-de järgi (nt 'kolmkümmend', 'kuuskümmend'). See meetod on oluline sündmuste kuulajate nuppudele kinnitamiseks ja taimeri dünaamilise muutuse käivitamiseks vastuseks kasutaja interaktsioonile.

Dünaamiliste taimerite loomine JavaScripti ja HTML-i nuppude abil

Ülaltoodud skriptid on loodud selleks, et võimaldada kasutajal HTML-nuppudel klõpsates tippimismängus mängutaimerit dünaamiliselt reguleerida. Alguses deklareerime muutuja , mis hoiab aega millisekundites (vaikimisi 30 sekundit, millisekunditeks teisendamiseks korrutatud 1000-ga). Peamine funktsionaalsus seisneb selles funktsioon, mis värskendab taimeri väärtust klõpsatud nupu põhjal. See meetod võtab vastu nupu väärtuse (nt 30, 60 või 90) ja värskendab mänguaeg vastavalt muutuda. Lisaks värskendab skript lehe pealkirja, et kajastada valitud taimeri kestust, tehes kasutajatele selgeks, kui palju aega neil on.

Dünaamilise käitumise jaoks kasutame sündmuste kuulajaid, täpsemalt käsk. See võimaldab skriptil reageerida, kui kasutaja klõpsab mis tahes nuppu. Igale nupule määratakse ID ja klõpsamisel käivitatakse see funktsioon, edastades vastava ajaväärtuse. See lähenemisviis on kasulik mitme nupu tõhusaks haldamiseks, ilma et oleks vaja HTML-i struktuuris korduvat JavaScripti. Skript sisaldab ka varuvalikut, kus saate kasutada näiteks sisemisi sündmuste käitlejaid kui eelistatakse lihtsust modulaarsusele.

Alternatiivse lahenduse korral seome otse sündmus nuppudele. See meetod täidab funktsiooni otse nupul klõpsamisel. See on sirgjooneline lähenemine, kuid sellel puudub sündmuste kuulaja meetodi paindlikkus. Selle meetodi lihtsus on kasulik väiksemate ja vähem keerukate rakenduste jaoks. Skaleeritavama koodi jaoks pakuvad sündmuste kuulajad aga suuremat paindlikkust ja võimaldavad skripti hõlpsamini värskendada ilma HTML-i struktuuri otseselt muutmata. Mõlema meetodi eesmärk on lahendada sama probleem, milleks on taimeri reguleerimine ja pealkirja dünaamiline värskendamine vastavalt kasutaja valikule.

Lõpuks rakendame ühikuteste, kasutades JavaScripti testimise raamistikku Jest. The funktsioonid on üliolulised taimeri õige värskendamise kontrollimiseks. Testides mitut stsenaariumi, näiteks kas taimer kohandub 30 sekundile, 60 sekundile või 90 sekundile, tagavad need ühikutestid skripti õigsuse. Käske nagu ja kasutatakse selleks, et kontrollida, kas tegelik taimeri väärtus ja lehe pealkiri vastavad oodatud tulemustele. See testimisfaas tagab, et teie taimeri loogika töötab erinevatel kasutusjuhtudel korralikult, tagades kindlustunde teie lahenduse töökindluses.

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

Mängu interaktsiooni täiustamine taimeri kohandamise abil

Teine aspekt, mida trükkimismängus taimerit muutes arvestada, on üldine kasutajakogemus ja liides. Lisaks mängutaimeri nuppude abil reguleerimisele on oluline anda mängijatele visuaalset tagasisidet valitud taimeri kohta. Seda saab saavutada lehe muude elementide (nt loenduri kuva) värskendamisega. Pärast taimeri seadistamiseks nupu klõpsamist peaks taimer kohe käivituma, andes kasutajale reaalajas tagasisidet. See tagab, et suhtlus on sujuv ja intuitiivne, muutes mängu kaasahaaravamaks.

Selle rakendamiseks võite kasutada JavaScripti funktsiooni. Kui taimer on seadistatud, setInterval saab kasutada loenduri loomiseks, mis vähendab taimeri väärtust iga sekundi järel. Kui taimer jõuab nulli, võib funktsioon mängu peatada või kasutajat hoiatada, et aeg on täis. See funktsioon koos võimalusega nuppude abil taimerit dünaamiliselt muuta parandab oluliselt mängukogemust. Tundlik liides on mängijate kaasatuse hoidmise võti ja reaalajas tagasiside on üks viis selle saavutamiseks.

Lisaks tuleks kaaluda vigade käsitlemist. Näiteks kui kasutaja proovib mängu käivitada ilma taimerit seadistamata, saate tal paluda sõnumiga valida sobiv aeg. Valideerimismehhanismide kaasamisega tagate mängu tõrgeteta toimimise ja vähendab võimalikke probleeme. Seda tüüpi valideerimine mitte ainult ei paranda kasutajakogemust, vaid aitab kaasa ka teie mängu usaldusväärsusele, tagades, et mängijad ei satuks asjatut segadusse.

1. Kuidas ma kasutan loenduse loomiseks?
2. Võite kasutada seadistades selle käivituma iga 1000 millisekundi (1 sekund) järel ja vähendades iga kord taimeri väärtust. Kui väärtus jõuab nullini, saate pöördloenduse peatada, kasutades .
3. Mis on eesmärk ?
4. kasutatakse pöördloenduse või muu korduva toimingu peatamiseks, mille käivitas . Väga oluline on tagada, et pöördloendus peatuks, kui see jõuab nullini.
5. Kuidas saan HTML-i pealkirja dünaamiliselt värskendada?
6. Kasuta lehe pealkirja teksti määramiseks. Seda saab värskendada oma sees funktsioon valitud ajaväärtuse alusel.
7. Kas ma saan taimerit valides käsitleda kasutajavigu?
8. Jah, saate lisada valideerimise, kontrollides, kas enne pöördloenduse alustamist on valitud kehtiv taimer. Kui õiget aega pole valitud, saate kuvada hoiatuse või viipa.
9. Kuidas käivitada funktsioon, kui nuppu klõpsatakse?
10. Funktsiooni saate nupule lisada kasutades või otse kasutades nupu HTML-elemendis.

Dünaamiliste taimeri seadistuste kaasamine tippimismängusse parandab oluliselt mängija kogemust. Lubades kasutajatel muuta taimerit lihtsate HTML-nuppude abil ja värskendades mängu liidest reaalajas, saavad arendajad muuta oma mängud interaktiivsemaks ja paindlikumaks. Seda tüüpi kontroll aitab kohaneda erinevate oskuste tasemetega.

Parimate tavade, nagu sündmuste kuulajad, vigade käsitlemine ja ühikutestid, kasutamine tagab, et mäng töötab sujuvalt ja pakub usaldusväärset kasutuskogemust. Nende funktsioonide rakendamine mitte ainult ei paranda mängu funktsionaalsust, vaid hoiab ka mängijaid rohkem kaasatud tundliku ja kasutajasõbraliku mehaanikaga.