Com modificar el valor del temporitzador de JavaScript per a un joc de mecanografia mitjançant botons HTML

Ajust dinàmic del temporitzador per escriure el joc amb botons

En un joc d'escriptura, controlar el ritme del joc és crucial per garantir una experiència d'usuari atractiva. Un factor important és el temporitzador, que determina quant de temps té l'usuari per completar el joc o el repte d'escriptura. En permetre als usuaris ajustar el temporitzador del joc mitjançant botons HTML senzills, podeu donar-los més control sobre el seu joc.

Aquest article us mostrarà com crear una solució en JavaScript que permeti als jugadors triar entre diferents configuracions del temporitzador mitjançant botons. Per exemple, seleccionar un botó "30s" ajustarà el temporitzador a 30 segons, mentre que fer clic a un botó "60s" el canvia a 60 segons.

La funció JavaScript agafarà el valor del botó clicat i actualitzarà tant el temporitzador com el títol del joc de forma dinàmica. Aquest tipus de flexibilitat pot millorar l'experiència de l'usuari, fent que el joc sigui més personalitzable i agradable per a diferents nivells d'habilitat.

Al final d'aquesta guia, tindreu una funció d'ajust del temporitzador totalment funcional mitjançant HTML i JavaScript. També explicarem com actualitzar el valor del temporitzador que es mostra al títol de la pàgina per reflectir la durada del temporitzador seleccionat.

Comandament	Exemple d'ús
document.querySelector()	S'utilitza per seleccionar l'element HTML
addEventListener()	Enllaça un esdeveniment específic (per exemple, un clic) a un element de botó. En aquest context, s'utilitza per activar la funció changeTimer() quan un usuari fa clic en un botó, permetent una interacció dinàmica amb la configuració del temporitzador.
innerText	Aquesta propietat permet modificar el text visible dins d'un element HTML. En aquesta solució, s'utilitza per actualitzar el valor del temporitzador al títol de la pàgina quan es fa clic en un botó.
onClick	Un atribut de controlador d'esdeveniments en línia utilitzat en l'enfocament alternatiu per adjuntar la funció changeTimer() directament a l'esdeveniment de clic del botó. Això permet una manera més senzilla i menys modular d'actualitzar el temporitzador de manera dinàmica.
test()	Aquest mètode s'utilitza en les proves unitàries amb Jest. Defineix un cas de prova on la funció que s'està provant (per exemple, changeTimer()) s'avalua per garantir que el temporitzador s'actualitza correctament. Assegura que el codi es comporta com s'esperava en diferents escenaris.
expect()	Una ordre Jest que comprova si el valor real (com el temporitzador actualitzat) coincideix amb el valor esperat. S'utilitza en proves unitàries per verificar que gameTime i document.title s'actualitzen correctament després de fer clic al botó.
toBe()	Una altra ordre de broma que verifica la igualtat estricta. Assegura que després de cridar a changeTimer(), el temps de joc és exactament el que s'espera (per exemple, 30.000 ms durant 30 segons).
getElementById()	S'utilitzen per seleccionar botons específics segons els seus ID (p. ex., "trenta", "seixanta"). Aquest mètode és important per connectar oients d'esdeveniments als botons i activar el canvi dinàmic del temporitzador en resposta a la interacció de l'usuari.

Creació de temporitzadors dinàmics amb botons de JavaScript i HTML

Els scripts proporcionats anteriorment estan dissenyats per permetre a un usuari ajustar dinàmicament el temporitzador del joc en un joc d'escriptura fent clic als botons HTML. Inicialment, declarem una variable , que conté el temps en mil·lisegons (30 segons per defecte, multiplicat per 1000 per convertir en mil·lisegons). La funcionalitat clau es troba en el funció, que actualitza el valor del temporitzador en funció del botó clicat. Aquest mètode rep el valor del botó (per exemple, 30, 60 o 90) i actualitza el temps de joc variable en conseqüència. A més, l'script actualitza el títol de la pàgina per reflectir la durada del temporitzador seleccionat, deixant clar als usuaris quant de temps tenen.

Per al comportament dinàmic, utilitzem els oients d'esdeveniments, específicament el comandament. Això permet que l'script reaccioni quan un usuari fa clic en qualsevol dels botons. A cada botó se li assigna un identificador i, quan es fa clic, activa el funció, passant el valor temporal corresponent. Aquest enfocament és útil per manejar diversos botons de manera eficient sense necessitat de JavaScript en línia repetitiu a l'estructura HTML. L'script també inclou una opció alternativa on podeu utilitzar gestors d'esdeveniments en línia com ara si es prefereix la simplicitat a la modularitat.

En la solució alternativa, lliguem directament el esdeveniment als botons. Aquest mètode executa el funcionen directament al fer clic al botó. És un enfocament senzill, però no té la flexibilitat del mètode d'escolta d'esdeveniments. La simplicitat d'aquest mètode és útil per a aplicacions més petites i menys complexes. Tanmateix, per a un codi més escalable, els oients d'esdeveniments ofereixen més flexibilitat i permeten actualitzacions més fàcils de l'script sense modificar directament l'estructura HTML. Ambdós mètodes tenen com a objectiu resoldre el mateix problema, que és ajustar el temporitzador i actualitzar el títol de manera dinàmica en funció de la selecció de l'usuari.

Finalment, implementem proves unitàries mitjançant Jest, un marc de proves de JavaScript. El Les funcions són crucials per validar que el temporitzador s'actualitza correctament. En provar diversos escenaris, com ara si el temporitzador s'ajusta a 30 segons, 60 segons o 90 segons, aquestes proves unitàries garanteixen la correcció de l'script. Comandes com i s'utilitzen per verificar que el valor real del temporitzador i el títol de la pàgina coincideixen amb els resultats esperats. Aquesta fase de prova garanteix que la vostra lògica del temporitzador funcioni correctament en diferents casos d'ús, proporcionant confiança en la robustesa de la vostra solució.

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

Millora de la interacció del joc amb la personalització del temporitzador

Un altre aspecte a tenir en compte a l'hora de canviar el temporitzador en un joc d'escriptura és l'experiència i la interfície generals de l'usuari. A més d'ajustar el temporitzador del joc mitjançant botons, és important donar als jugadors comentaris visuals sobre el temporitzador seleccionat. Això es pot aconseguir actualitzant altres elements de la pàgina, com ara una pantalla de compte enrere. Després de fer clic en un botó per configurar el temporitzador, el temporitzador de compte enrere hauria d'iniciar-se immediatament, proporcionant comentaris en temps real a l'usuari. Això garanteix que la interacció sigui fluida i intuïtiva, fent que el joc sigui més atractiu.

Per implementar-ho, podeu utilitzar JavaScript funció. Un cop configurat el temporitzador, setInterval es pot utilitzar per crear un compte enrere que disminueixi el valor del temporitzador cada segon. Quan el temporitzador arriba a zero, la funció pot aturar el joc o avisar l'usuari que el temps s'ha acabat. Aquesta funcionalitat, combinada amb la capacitat de canviar dinàmicament el temporitzador mitjançant botons, millora significativament l'experiència de joc. Una interfície sensible és clau per mantenir els jugadors compromesos, i els comentaris en temps real són una manera d'aconseguir-ho.

A més, s'ha de tenir en compte la gestió d'errors. Per exemple, si un usuari intenta iniciar el joc sense configurar un temporitzador, podeu demanar-li un missatge per seleccionar una hora vàlida. En incorporar mecanismes de validació, us assegureu que el joc funciona sense problemes i redueix els problemes potencials. Aquest tipus de validació no només millora l'experiència de l'usuari, sinó que també contribueix a la fiabilitat del vostre joc, assegurant que els jugadors no s'enfrontin a confusions innecessàries.

1. Com ho faig servir per crear un compte enrere?
2. Podeu utilitzar configurant-lo perquè s'executi cada 1000 mil·lisegons (1 segon) i disminuint el valor del temporitzador cada vegada. Quan el valor arriba a zero, podeu aturar el compte enrere .
3. Quin és el propòsit ?
4. s'utilitza per aturar un compte enrere o qualsevol altra acció recurrent iniciada per . És crucial assegurar-se que el compte enrere s'atura quan arribi a zero.
5. Com puc actualitzar el títol HTML de forma dinàmica?
6. Ús per definir el text del títol de la pàgina. Això es pot actualitzar dins del vostre funció basada en el valor de temps seleccionat.
7. Puc gestionar els errors de l'usuari en seleccionar un temporitzador?
8. Sí, podeu afegir validació comprovant si s'ha seleccionat una opció de temporitzador vàlida abans d'iniciar el compte enrere. Si no s'escull cap hora vàlida, podeu mostrar una alerta o una indicació.
9. Com activar una funció quan es fa clic en un botó?
10. Podeu adjuntar una funció a un botó mitjançant o utilitzant directament a l'element HTML del botó.

La incorporació d'ajustaments dinàmics del temporitzador en un joc de mecanografia millora significativament l'experiència del jugador. En permetre als usuaris canviar el temporitzador mitjançant botons HTML senzills i actualitzar la interfície del joc en temps real, els desenvolupadors poden fer que els seus jocs siguin més interactius i flexibles. Aquest tipus de control ajuda a adaptar-se a diferents nivells d'habilitat.

L'ús de bones pràctiques, com ara els oients d'esdeveniments, la gestió d'errors i les proves unitàries, garanteix que el joc funcioni sense problemes i ofereix una experiència d'usuari fiable. La implementació d'aquestes funcions no només millorarà la funcionalitat del joc, sinó que també mantindrà els jugadors més compromesos amb una mecànica sensible i fàcil d'utilitzar.