JavaScript-ajastimen arvon muokkaaminen kirjoituspelissä HTML-painikkeiden avulla

Dynaaminen ajastimen säätö pelin kirjoittamiseen painikkeilla

Kirjoituspeleissä pelin vauhdin hallitseminen on ratkaisevan tärkeää, jotta käyttäjäkokemus olisi kiinnostava. Yksi tärkeä tekijä on ajastin, joka määrittää, kuinka kauan käyttäjän on suoritettava peli tai kirjoitushaaste. Antamalla käyttäjien säätää peliajastinta yksinkertaisilla HTML-painikkeilla, voit antaa heille enemmän hallintaa pelaamiseensa.

Tämä artikkeli näyttää, kuinka voit luoda JavaScriptin ratkaisun, jonka avulla pelaajat voivat valita eri ajastinasetusten välillä painikkeiden avulla. Esimerkiksi "30s"-painikkeen valitseminen säätää ajastimen 30 sekuntiin, kun taas "60s"-painikkeen napsauttaminen muuttaa sen 60 sekuntiin.

JavaScript-toiminto ottaa arvon napsautetusta painikkeesta ja päivittää sekä ajastimen että pelin nimen dynaamisesti. Tällainen joustavuus voi parantaa käyttökokemusta tehden pelistä entistä muokattavamman ja nautittavamman eri taitotasoille.

Tämän oppaan loppuun mennessä sinulla on täysin toimiva ajastimen säätöominaisuus HTML:n ja JavaScriptin avulla. Käsittelemme myös kuinka päivität sivun otsikossa näkyvän ajastimen arvon vastaamaan valittua ajastimen kestoa.

Komento	Esimerkki käytöstä
document.querySelector()	Käytetään HTML-elementin
addEventListener()	Sitoo tietyn tapahtuman (esim. napsautuksen) painikeelementtiin. Tässä yhteydessä sitä käytetään käynnistämään changeTimer()-toiminto, kun käyttäjä napsauttaa painiketta, mikä mahdollistaa dynaamisen vuorovaikutuksen ajastimen asetusten kanssa.
innerText	Tämä ominaisuus mahdollistaa näkyvän tekstin muokkaamisen HTML-elementissä. Tässä ratkaisussa sitä käytetään päivittämään ajastimen arvo sivun otsikossa, kun painiketta napsautetaan.
onClick	Sisäinen tapahtumakäsittelijän attribuutti, jota käytetään vaihtoehtoisessa lähestymistavassa changeTimer()-funktion liittämiseen suoraan painikkeen napsautustapahtumaan. Tämä mahdollistaa yksinkertaisemman, vähemmän modulaarisen tavan päivittää ajastin dynaamisesti.
test()	Tätä menetelmää käytetään yksikkötestauksessa Jestin kanssa. Se määrittelee testitapauksen, jossa testattava funktio (esim. changeTimer()) arvioidaan sen varmistamiseksi, että ajastin päivittyy oikein. Se varmistaa, että koodi käyttäytyy odotetulla tavalla eri skenaarioissa.
expect()	Jest-komento, joka tarkistaa, vastaako todellinen arvo (kuten päivitetty ajastin) odotettua arvoa. Sitä käytetään yksikkötesteissä varmistamaan, että gameTime ja document.title päivitetään oikein painikkeen painalluksen jälkeen.
toBe()	Toinen Jest-komento, joka tarkistaa tiukan tasa-arvon. Se varmistaa, että kutsun changeTimer() jälkeen peliaika on täsmälleen odotettu (esim. 30 000 ms 30 sekunnin ajan).
getElementById()	Käytetään tiettyjen painikkeiden valitsemiseen niiden tunnusten perusteella (esim. "kolmekymmentä", "kuusikymmentä"). Tämä menetelmä on tärkeä tapahtumakuuntelijoiden liittämiseksi painikkeisiin ja ajastimen dynaamisen muutoksen käynnistämiseksi käyttäjän vuorovaikutuksen perusteella.

Dynaamisten ajastimien luominen JavaScript- ja HTML-painikkeiden avulla

Yllä olevat skriptit on suunniteltu antamaan käyttäjälle mahdollisuus säätää peliajastinta dynaamisesti kirjoituspelissä napsauttamalla HTML-painikkeita. Aluksi julistamme muuttujan , joka sisältää ajan millisekunteina (oletusarvoisesti 30 sekuntia, kerrottuna 1000:lla muuntaakseen millisekunteiksi). Tärkeimmät toiminnot ovat toiminto, joka päivittää ajastimen arvon napsautetun painikkeen perusteella. Tämä menetelmä vastaanottaa painikkeen arvon (esim. 30, 60 tai 90) ja päivittää peliaika muuttuvat vastaavasti. Lisäksi skripti päivittää sivun otsikon vastaamaan valittua ajastimen kestoa, mikä tekee käyttäjille selväksi, kuinka paljon aikaa heillä on.

Dynaamiseen käyttäytymiseen käytämme tapahtumakuuntelijoita, erityisesti komento. Näin komentosarja voi reagoida, kun käyttäjä napsauttaa mitä tahansa painiketta. Jokaiselle painikkeelle on määritetty tunnus, ja kun sitä napsautetaan, se laukaisee tunnuksen funktio, joka ohittaa vastaavan aika-arvon. Tämä lähestymistapa on hyödyllinen useiden painikkeiden tehokkaaseen käsittelyyn ilman, että HTML-rakenteessa tarvitaan toistuvaa JavaScriptiä. Skripti sisältää myös varavaihtoehdon, jossa voit käyttää upotettuja tapahtumakäsittelijöitä, kuten jos yksinkertaisuus on parempi kuin modulaarisuus.

Vaihtoehtoisessa ratkaisussa sidomme suoraan tapahtuma painikkeille. Tämä menetelmä suorittaa toimintoa suoraan napsautettaessa. Se on suoraviivainen lähestymistapa, mutta siitä puuttuu tapahtumakuuntelijan menetelmän joustavuus. Tämän menetelmän yksinkertaisuus on hyödyllinen pienissä, vähemmän monimutkaisissa sovelluksissa. Skaalautuvamman koodin saamiseksi tapahtumaseuraajat tarjoavat kuitenkin enemmän joustavuutta ja mahdollistavat skriptin helpomman päivityksen muuttamatta suoraan HTML-rakennetta. Molemmat menetelmät pyrkivät ratkaisemaan saman ongelman, eli säätämään ajastinta ja päivittämään otsikon dynaamisesti käyttäjän valinnan perusteella.

Lopuksi toteutamme yksikkötestejä Jestillä, JavaScript-testauskehyksellä. The toiminnot ovat ratkaisevan tärkeitä sen varmistamiseksi, että ajastin päivittyy oikein. Testaamalla useita skenaarioita, kuten säätyykö ajastin 30 sekuntiin, 60 sekuntiin vai 90 sekuntiin, nämä yksikkötestit varmistavat skriptin oikeellisuuden. Komennot kuten ja käytetään varmistamaan, että todellinen ajastimen arvo ja sivun otsikko vastaavat odotettuja tuloksia. Tämä testausvaihe varmistaa, että ajastinlogiikkasi toimii oikein eri käyttötapauksissa, mikä antaa luottamusta ratkaisusi kestävyyteen.

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

Pelivuorovaikutuksen parantaminen ajastimen mukauttamisen avulla

Toinen näkökohta, joka on otettava huomioon vaihdettaessa ajastinta kirjoituspelissä, on yleinen käyttökokemus ja käyttöliittymä. Peliajastimen säätämisen lisäksi painikkeilla on tärkeää antaa pelaajille visuaalista palautetta valitusta ajastimesta. Tämä voidaan saavuttaa päivittämällä sivun muita elementtejä, kuten lähtölaskentanäyttö. Kun ajastimen asetuspainiketta on napsautettu, ajastimen pitäisi käynnistyä välittömästi ja antaa käyttäjälle reaaliaikaista palautetta. Tämä varmistaa, että vuorovaikutus on sujuvaa ja intuitiivista, mikä tekee pelistä kiinnostavamman.

Tämän toteuttamiseksi voit käyttää JavaScriptiä toiminto. Kun ajastin on asetettu, setInterval voidaan käyttää luomaan lähtölaskenta, joka pienentää ajastimen arvoa joka sekunti. Kun ajastin saavuttaa nollan, toiminto voi joko pysäyttää pelin tai varoittaa käyttäjää, että aika on lopussa. Tämä toiminto yhdistettynä mahdollisuuteen muuttaa ajastinta dynaamisesti painikkeiden avulla parantaa merkittävästi pelikokemusta. Responsiivinen käyttöliittymä on avain pelaajien sitoutumiseen, ja reaaliaikainen palaute on yksi tapa saavuttaa se.

Lisäksi tulee harkita virheiden käsittelyä. Jos käyttäjä esimerkiksi yrittää käynnistää pelin asettamatta ajastinta, voit pyytää häntä viestillä valitsemaan kelvollisen ajan. Käyttämällä validointimekanismeja varmistat, että peli toimii sujuvasti ja vähentää mahdollisia ongelmia. Tämän tyyppinen validointi ei vain paranna käyttökokemusta, vaan myös lisää pelisi luotettavuutta ja varmistaa, etteivät pelaajat joudu tarpeettomaan hämmennykseen.

1. Kuinka käytän luoda lähtölaskenta?
2. Voit käyttää asettamalla sen suorittamaan 1000 millisekunnin (1 sekunnin) välein ja pienentämällä ajastimen arvoa joka kerta. Kun arvo saavuttaa nollan, voit lopettaa lähtölaskennan painamalla .
3. Mikä on tarkoitus ?
4. käytetään pysäyttämään lähtölaskenta tai mikä tahansa muu toistuva toiminto, jonka aloitti . On erittäin tärkeää varmistaa, että lähtölaskenta pysähtyy, kun se saavuttaa nollan.
5. Kuinka voin päivittää HTML-otsikon dynaamisesti?
6. Käyttää asettaaksesi sivun otsikon tekstin. Tämä voidaan päivittää sisälläsi toiminto valitun aika-arvon perusteella.
7. Voinko käsitellä käyttäjän virheitä ajastinta valittaessa?
8. Kyllä, voit lisätä vahvistuksen tarkistamalla, onko kelvollinen ajastinvaihtoehto valittu ennen lähtölaskentaa. Jos oikeaa aikaa ei ole valittu, voit näyttää hälytyksen tai kehotteen.
9. Kuinka käynnistän toiminnon, kun painiketta napsautetaan?
10. Voit liittää toiminnon painikkeeseen käyttämällä tai suoraan käyttämällä painikkeen HTML-elementissä.

Dynaamisten ajastinsäätöjen sisällyttäminen kirjoituspeliin parantaa merkittävästi pelaajakokemusta. Antamalla käyttäjien vaihtaa ajastinta yksinkertaisilla HTML-painikkeilla ja päivittämällä pelin käyttöliittymän reaaliajassa, kehittäjät voivat tehdä peleistään interaktiivisempia ja joustavampia. Tämäntyyppinen ohjaus auttaa sopeutumaan erilaisiin taitotasoihin.

Parhaiden käytäntöjen, kuten tapahtumakuuntelijoiden, virheiden käsittelyn ja yksikkötestien, käyttö varmistaa, että peli toimii sujuvasti ja tarjoaa luotettavan käyttökokemuksen. Näiden ominaisuuksien käyttöönotto ei ainoastaan ​​paranna pelin toimivuutta, vaan myös pitää pelaajat sitoutuneempia reagoiviin, käyttäjäystävällisiin mekaniikkoihin.