Kaip pakeisti „JavaScript“ laikmačio reikšmę spausdinimo žaidimui naudojant HTML mygtukus

Dinaminis laikmačio reguliavimas žaidimo įvedimui naudojant mygtukus

Įvedant tekstą, labai svarbu kontroliuoti žaidimo tempą, kad būtų užtikrinta patraukli vartotojo patirtis. Vienas svarbus veiksnys yra laikmatis, kuris nustato, kiek laiko vartotojas turi užbaigti žaidimą arba įvesti teksto iššūkį. Leisdami vartotojams reguliuoti žaidimo laikmatį naudodami paprastus HTML mygtukus, galite suteikti jiems daugiau galimybių valdyti savo žaidimą.

Šiame straipsnyje bus parodyta, kaip sukurti „JavaScript“ sprendimą, leidžiantį žaidėjams pasirinkti skirtingus laikmačio nustatymus naudojant mygtukus. Pavyzdžiui, pasirinkus mygtuką „30s“, laikmatis bus sureguliuotas iki 30 sekundžių, o spustelėjus mygtuką „60s“ – į 60 sekundžių.

„JavaScript“ funkcija paims vertę iš spustelėto mygtuko ir dinamiškai atnaujins laikmatį ir žaidimo pavadinimą. Toks lankstumas gali pagerinti vartotojo patirtį, todėl žaidimas tampa labiau pritaikomas ir malonus įvairiems įgūdžių lygiams.

Šio vadovo pabaigoje turėsite visiškai veikiančią laikmačio reguliavimo funkciją naudodami HTML ir JavaScript. Taip pat aptarsime, kaip atnaujinti puslapio pavadinime rodomą laikmačio reikšmę, kad ji atspindėtų pasirinktą laikmačio trukmę.

komandą	Naudojimo pavyzdys
document.querySelector()	Naudojamas norint pasirinkti HTML elementą
addEventListener()	Susieja konkretų įvykį (pvz., paspaudimą) su mygtuko elementu. Šiame kontekste jis naudojamas funkcijai changeTimer() suaktyvinti, kai vartotojas spustelėja mygtuką, kad būtų galima dinamiškai sąveikauti su laikmačio nustatymais.
innerText	Ši savybė leidžia keisti matomą tekstą HTML elemente. Šiame sprendime jis naudojamas atnaujinti laikmačio reikšmę puslapio pavadinime, kai spustelėjamas mygtukas.
onClick	Eilutinis įvykių tvarkyklės atributas, naudojamas alternatyviu metodu funkcijai changeTimer() tiesiogiai prijungti prie mygtuko paspaudimo įvykio. Tai leidžia paprastesniu, mažiau moduliniu būdu dinamiškai atnaujinti laikmatį.
test()	Šis metodas naudojamas vienetų testavimui su Jest. Tai apibrėžia bandomąjį atvejį, kai tikrinama funkcija (pvz., changeTimer()) įvertinama siekiant užtikrinti, kad laikmatis būtų tinkamai atnaujintas. Tai užtikrina, kad kodas elgtųsi taip, kaip tikėtasi įvairiuose scenarijuose.
expect()	„Jest“ komanda, kuri tikrina, ar tikroji vertė (pvz., atnaujintas laikmatis) atitinka numatomą vertę. Jis naudojamas vienetų testuose, siekiant patikrinti, ar žaidimo laikas ir document.title yra tinkamai atnaujinami spustelėjus mygtuką.
toBe()	Dar viena Jest komanda, kuri tikrina griežtą lygybę. Tai užtikrina, kad iškvietus changeTimer(), žaidimo laikas bus toks, kokio tikimasi (pvz., 30 000 ms 30 sekundžių).
getElementById()	Naudojamas konkretiems mygtukams pasirinkti pagal jų ID (pvz., „trisdešimt“, „šešiasdešimt“). Šis metodas yra svarbus norint prijungti įvykių klausytojus prie mygtukų ir suaktyvinti dinaminį laikmačio pakeitimą, reaguojant į vartotojo sąveiką.

Dinaminių laikmačių kūrimas naudojant JavaScript ir HTML mygtukus

Aukščiau pateikti scenarijai yra sukurti taip, kad vartotojas galėtų dinamiškai reguliuoti žaidimo laikmatį spausdinimo žaidime spustelėjus HTML mygtukus. Iš pradžių deklaruojame kintamąjį , kuriame laikas yra milisekundėmis (30 sekundžių pagal numatytuosius nustatymus, padauginta iš 1000, kad būtų konvertuojama į milisekundes). Pagrindinės funkcijos slypi funkcija, kuri atnaujina laikmačio reikšmę pagal spustelėtą mygtuką. Šis metodas gauna mygtuko reikšmę (pvz., 30, 60 arba 90) ir atnaujina žaidimo laikas atitinkamai kintama. Be to, scenarijus atnaujina puslapio pavadinimą, kad atspindėtų pasirinktą laikmačio trukmę, todėl vartotojams būtų aišku, kiek laiko jie turi.

Dinaminiam elgesiui mes naudojame įvykių klausytojus, ypač komandą. Tai leidžia scenarijui reaguoti, kai vartotojas spusteli bet kurį iš mygtukų. Kiekvienam mygtukui priskiriamas ID ir, paspaudus, suaktyvinamas funkcija, perduodanti atitinkamą laiko reikšmę. Šis metodas yra naudingas norint efektyviai valdyti kelis mygtukus, HTML struktūroje nereikalaujant pasikartojančio tiesioginio JavaScript. Scenarijuje taip pat yra atsarginė parinktis, kurioje galite naudoti tiesiogines įvykių tvarkykles jei pirmenybė teikiama paprastumui, o ne moduliškumui.

Alternatyviu sprendimu mes tiesiogiai susiejame įvykis prie mygtukų. Šis metodas vykdo funkcija iš karto spustelėjus mygtuką. Tai paprastas metodas, tačiau jam trūksta įvykių klausytojo metodo lankstumo. Šio metodo paprastumas yra naudingas mažesnėms, mažiau sudėtingoms programoms. Tačiau, kad kodas būtų labiau keičiamas, įvykių klausytojai siūlo daugiau lankstumo ir leidžia lengviau atnaujinti scenarijų tiesiogiai nekeičiant HTML struktūros. Abiem būdais siekiama išspręsti tą pačią problemą, ty koreguoti laikmatį ir dinamiškai atnaujinti pavadinimą, atsižvelgiant į vartotojo pasirinkimą.

Galiausiai įdiegiame vienetų testus naudodami „Jest“, „JavaScript“ testavimo sistemą. The funkcijos yra labai svarbios norint patikrinti, ar laikmatis tinkamai atnaujinamas. Išbandydami kelis scenarijus, pvz., ar laikmatis prisitaiko prie 30 sekundžių, 60 sekundžių ar 90 sekundžių, šie vienetų testai užtikrina scenarijaus teisingumą. Komandos patinka ir naudojami siekiant patikrinti, ar tikroji laikmačio reikšmė ir puslapio pavadinimas atitinka laukiamus rezultatus. Šis testavimo etapas užtikrina, kad jūsų laikmačio logika tinkamai veiktų įvairiais naudojimo atvejais, užtikrinant pasitikėjimą jūsų sprendimo patikimumu.

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

Žaidimo sąveikos tobulinimas naudojant laikmačio pritaikymą

Kitas aspektas, į kurį reikia atsižvelgti keičiant laikmatį spausdinimo žaidime, yra bendra vartotojo patirtis ir sąsaja. Svarbu ne tik reguliuoti žaidimo laikmatį mygtukais, bet ir suteikti žaidėjams vaizdinį grįžtamąjį ryšį apie pasirinktą laikmatį. Tai galima pasiekti atnaujinant kitus puslapio elementus, pvz., atgalinės atskaitos ekraną. Spustelėjus mygtuką, kad nustatytumėte laikmatį, atgalinės atskaitos laikmatis turėtų įsijungti iš karto ir vartotojui teikti grįžtamąjį ryšį realiuoju laiku. Tai užtikrina sklandžią ir intuityvią sąveiką, todėl žaidimas tampa patrauklesnis.

Norėdami tai įgyvendinti, galite naudoti JavaScript funkcija. Nustačius laikmatį, setInterval gali būti naudojamas sukurti atgalinę atskaitą, kuri kas sekundę sumažina laikmačio reikšmę. Kai laikmatis pasiekia nulį, funkcija gali sustabdyti žaidimą arba įspėti vartotoją, kad laikas baigėsi. Ši funkcija kartu su galimybe dinamiškai keisti laikmatį naudojant mygtukus žymiai pagerina žaidimo patirtį. Interaktyvi sąsaja yra labai svarbi norint išlaikyti žaidėjų įsitraukimą, o grįžtamasis ryšys realiuoju laiku yra vienas iš būdų tai pasiekti.

Be to, reikėtų atsižvelgti į klaidų tvarkymą. Pavyzdžiui, jei vartotojas bando pradėti žaidimą nenustatęs laikmačio, galite paraginti jį pasirinkti tinkamą laiką. Įtraukdami patvirtinimo mechanizmus užtikrinsite, kad žaidimas veiktų sklandžiai ir sumažins galimas problemas. Šio tipo patvirtinimas ne tik pagerina vartotojo patirtį, bet ir prisideda prie žaidimo patikimumo, užtikrinant, kad žaidėjai nesusidurtų su bereikalinga painiava.

1. Kaip aš naudoju sukurti atgalinį skaičiavimą?
2. Galite naudoti nustatydami jį vykdyti kas 1000 milisekundžių (1 sekundę) ir kiekvieną kartą mažindami laikmačio reikšmę. Kai reikšmė pasiekia nulį, atgalinį skaičiavimą galite sustabdyti naudodami .
3. Koks tikslas ?
4. naudojamas sustabdyti atgalinį skaičiavimą arba bet kokį kitą pasikartojantį veiksmą, kurį pradėjo . Labai svarbu užtikrinti, kad atgalinis skaičiavimas sustotų, kai pasieks nulį.
5. Kaip dinamiškai atnaujinti HTML pavadinimą?
6. Naudokite norėdami nustatyti puslapio pavadinimo tekstą. Tai gali būti atnaujinta jūsų viduje funkcija, pagrįsta pasirinkta laiko verte.
7. Ar galiu tvarkyti vartotojo klaidas pasirinkdamas laikmatį?
8. Taip, galite pridėti patvirtinimą, prieš pradėdami atgalinį skaičiavimą, patikrindami, ar pasirinkta tinkama laikmačio parinktis. Jei nepasirinktas tinkamas laikas, galite rodyti įspėjimą arba raginimą.
9. Kaip suaktyvinti funkciją paspaudus mygtuką?
10. Galite pridėti funkciją prie mygtuko naudodami arba tiesiogiai naudojant mygtuko HTML elemente.

Dinaminių laikmačio koregavimų įtraukimas į spausdinimo žaidimą žymiai pagerina žaidėjo patirtį. Leisdami vartotojams keisti laikmatį naudodami paprastus HTML mygtukus ir atnaujindami žaidimo sąsają realiuoju laiku, kūrėjai gali padaryti savo žaidimus interaktyvesnius ir lankstesnius. Šio tipo kontrolė padeda prisitaikyti prie skirtingų įgūdžių lygių.

Naudojant geriausią praktiką, pvz., įvykių klausytojus, klaidų tvarkymą ir vienetų testus, užtikrinamas sklandus žaidimas ir patikima vartotojo patirtis. Šių funkcijų įdiegimas ne tik pagerins žaidimo funkcionalumą, bet ir leis žaidėjams labiau įsitraukti į reaguojančią, patogią mechaniką.