Comment modifier la valeur de la minuterie JavaScript pour un jeu de saisie à l'aide de boutons HTML

Réglage dynamique de la minuterie pour taper un jeu à l'aide de boutons

Dans un jeu de dactylographie, contrôler le rythme du jeu est crucial pour garantir une expérience utilisateur engageante. Un facteur important est la minuterie, qui détermine le temps dont dispose l'utilisateur pour terminer le jeu ou le défi de frappe. En permettant aux utilisateurs d'ajuster le chronomètre de jeu via de simples boutons HTML, vous pouvez leur donner plus de contrôle sur leur jeu.

Cet article vous montrera comment créer une solution en JavaScript permettant aux joueurs de choisir entre différents paramètres de minuterie à l'aide de boutons. Par exemple, sélectionner un bouton « 30 s » ajustera la minuterie à 30 secondes, tandis que cliquer sur un bouton « 60 s » la changera à 60 secondes.

La fonction JavaScript prendra la valeur du bouton cliqué et mettra à jour dynamiquement le minuteur et le titre du jeu. Ce type de flexibilité peut améliorer l'expérience utilisateur, rendant le jeu plus personnalisable et plus agréable pour différents niveaux de compétence.

À la fin de ce guide, vous disposerez d'une fonction de réglage de la minuterie entièrement fonctionnelle utilisant HTML et JavaScript. Nous verrons également comment mettre à jour la valeur de la minuterie affichée sur le titre de la page pour refléter la durée de la minuterie sélectionnée.

Commande	Exemple d'utilisation
document.querySelector()	Utilisé pour sélectionner l'élément HTML
addEventListener()	Lie un événement spécifique (par exemple, un clic) à un élément de bouton. Dans ce contexte, il est utilisé pour déclencher la fonction changeTimer() lorsqu'un utilisateur clique sur un bouton, permettant une interaction dynamique avec les paramètres de la minuterie.
innerText	Cette propriété permet de modifier le texte visible au sein d'un élément HTML. Dans cette solution, il est utilisé pour mettre à jour la valeur du timer dans le titre de la page lorsqu’un bouton est cliqué.
onClick	Un attribut de gestionnaire d'événements en ligne utilisé dans l'approche alternative pour attacher la fonction changeTimer() directement à l'événement de clic du bouton. Cela permet une manière plus simple et moins modulaire de mettre à jour la minuterie de manière dynamique.
test()	Cette méthode est utilisée dans les tests unitaires avec Jest. Il définit un scénario de test dans lequel la fonction testée (par exemple, changeTimer()) est évaluée pour garantir que la minuterie se met à jour correctement. Cela garantit que le code se comporte comme prévu dans différents scénarios.
expect()	Une commande Jest qui vérifie si la valeur réelle (comme la minuterie mise à jour) correspond à la valeur attendue. Il est utilisé dans les tests unitaires pour vérifier que gameTime et document.title sont correctement mis à jour après un clic sur un bouton.
toBe()	Une autre commande Jest qui vérifie l'égalité stricte. Cela garantit qu'après avoir appelé changeTimer(), la durée du jeu correspond exactement à celle attendue (par exemple, 30 000 ms pendant 30 secondes).
getElementById()	Utilisé pour sélectionner des boutons spécifiques par leur identifiant (par exemple, « trente », « soixante »). Cette méthode est importante pour attacher des écouteurs d'événements aux boutons et déclencher le changement dynamique de la minuterie en réponse à l'interaction de l'utilisateur.

Création de minuteries dynamiques à l'aide de boutons JavaScript et HTML

Les scripts fournis ci-dessus sont conçus pour permettre à un utilisateur d'ajuster dynamiquement le minuteur de jeu dans un jeu de frappe en cliquant sur les boutons HTML. Dans un premier temps, nous déclarons une variable , qui contient le temps en millisecondes (30 secondes par défaut, multipliées par 1 000 pour convertir en millisecondes). La fonctionnalité clé réside dans le fonction, qui met à jour la valeur de la minuterie en fonction du bouton cliqué. Cette méthode reçoit la valeur du bouton (par exemple, 30, 60 ou 90) et met à jour le heure du jeu variable en conséquence. De plus, le script met à jour le titre de la page pour refléter la durée de la minuterie sélectionnée, indiquant clairement aux utilisateurs le temps dont ils disposent.

Pour le comportement dynamique, nous utilisons des écouteurs d'événements, en particulier le commande. Cela permet au script de réagir lorsqu'un utilisateur clique sur l'un des boutons. Chaque bouton se voit attribuer un identifiant et, lorsqu'il est cliqué, déclenche le fonction, en passant la valeur de temps respective. Cette approche est utile pour gérer efficacement plusieurs boutons sans avoir besoin de JavaScript en ligne répétitif dans la structure HTML. Le script inclut également une option de secours dans laquelle vous pouvez utiliser des gestionnaires d'événements en ligne tels que si la simplicité est préférée à la modularité.

Dans la solution alternative, on lie directement le événement aux boutons. Cette méthode exécute le fonction directement après avoir cliqué sur le bouton. Il s'agit d'une approche simple mais qui n'a pas la flexibilité de la méthode de l'écouteur d'événements. La simplicité de cette méthode est utile pour les applications plus petites et moins complexes. Cependant, pour un code plus évolutif, les écouteurs d'événements offrent plus de flexibilité et permettent des mises à jour plus faciles du script sans modifier directement la structure HTML. Les deux méthodes visent à résoudre le même problème, à savoir ajuster la minuterie et mettre à jour le titre de manière dynamique en fonction de la sélection de l’utilisateur.

Enfin, nous implémentons des tests unitaires à l'aide de Jest, un framework de test JavaScript. Le les fonctions sont cruciales pour valider que la minuterie se met à jour correctement. En testant plusieurs scénarios, par exemple si la minuterie s'ajuste à 30 secondes, 60 secondes ou 90 secondes, ces tests unitaires garantissent l'exactitude du script. Des commandes comme et sont utilisés pour vérifier que la valeur réelle du minuteur et le titre de la page correspondent aux résultats attendus. Cette phase de test garantit que votre logique de minuterie fonctionne correctement dans différents cas d'utilisation, ce qui garantit la robustesse de votre solution.

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

Améliorer l'interaction du jeu avec la personnalisation du minuteur

Un autre aspect à prendre en compte lors du changement de minuterie dans un jeu de frappe est l'expérience utilisateur globale et l'interface. En plus de régler le chronomètre de jeu via des boutons, il est important de donner aux joueurs un retour visuel sur le chronomètre sélectionné. Ceci peut être réalisé en mettant à jour d'autres éléments sur la page, comme un affichage de compte à rebours. Après avoir cliqué sur un bouton pour régler la minuterie, le compte à rebours doit démarrer immédiatement, fournissant un retour en temps réel à l'utilisateur. Cela garantit que l’interaction est fluide et intuitive, rendant le jeu plus engageant.

Pour implémenter cela, vous pouvez utiliser JavaScript fonction. Une fois la minuterie réglée, définirIntervalle peut être utilisé pour créer un compte à rebours qui diminue la valeur de la minuterie chaque seconde. Lorsque le chronomètre atteint zéro, la fonction peut soit arrêter le jeu, soit avertir l'utilisateur que le temps est écoulé. Cette fonctionnalité, combinée à la possibilité de modifier dynamiquement la minuterie à l'aide de boutons, améliore considérablement l'expérience de jeu. Une interface réactive est essentielle pour maintenir l’engagement des joueurs, et les commentaires en temps réel sont un moyen d’y parvenir.

De plus, la gestion des erreurs doit être prise en compte. Par exemple, si un utilisateur essaie de démarrer le jeu sans régler de minuterie, vous pouvez lui demander avec un message de sélectionner une heure valide. En intégrant des mécanismes de validation, vous garantissez le bon fonctionnement du jeu et réduisez les problèmes potentiels. Ce type de validation améliore non seulement l'expérience utilisateur, mais contribue également à la fiabilité de votre jeu, garantissant que les joueurs ne soient pas confrontés à une confusion inutile.

1. Comment puis-je utiliser créer un compte à rebours ?
2. Vous pouvez utiliser en le configurant pour qu'il s'exécute toutes les 1 000 millisecondes (1 seconde) et en diminuant la valeur de la minuterie à chaque fois. Lorsque la valeur atteint zéro, vous pouvez arrêter le compte à rebours en utilisant .
3. Quel est le but de ?
4. est utilisé pour arrêter un compte à rebours ou toute autre action récurrente déclenchée par . Il est crucial de s’assurer que le compte à rebours s’arrête lorsqu’il atteint zéro.
5. Comment puis-je mettre à jour le titre HTML de manière dynamique ?
6. Utiliser pour définir le texte du titre de la page. Ceci peut être mis à jour dans votre fonction en fonction de la valeur de temps sélectionnée.
7. Puis-je gérer les erreurs de l'utilisateur lors de la sélection d'une minuterie ?
8. Oui, vous pouvez ajouter une validation en vérifiant si une option de minuterie valide a été sélectionnée avant de démarrer le compte à rebours. Si aucune heure valide n’est choisie, vous pouvez afficher une alerte ou une invite.
9. Comment déclencher une fonction lorsqu'un bouton est cliqué ?
10. Vous pouvez attacher une fonction à un bouton en utilisant ou en utilisant directement dans l'élément HTML du bouton.

L'intégration d'ajustements dynamiques de la minuterie dans un jeu de frappe améliore considérablement l'expérience du joueur. En permettant aux utilisateurs de modifier le minuteur à l'aide de simples boutons HTML et en mettant à jour l'interface du jeu en temps réel, les développeurs peuvent rendre leurs jeux plus interactifs et flexibles. Ce type de contrôle permet de s'adapter à différents niveaux de compétence.

L'utilisation des meilleures pratiques telles que les écouteurs d'événements, la gestion des erreurs et les tests unitaires garantit le bon fonctionnement du jeu et offre une expérience utilisateur fiable. La mise en œuvre de ces fonctionnalités améliorera non seulement les fonctionnalités du jeu, mais maintiendra également les joueurs plus engagés grâce à des mécanismes réactifs et conviviaux.