Como modificar o valor do temporizador JavaScript para um jogo de digitação usando botões HTML

Ajuste dinâmico do temporizador para digitar jogos usando botões

Em um jogo de digitação, controlar o ritmo do jogo é crucial para garantir uma experiência envolvente ao usuário. Um fator importante é o cronômetro, que determina quanto tempo o usuário tem para completar o jogo ou desafio de digitação. Ao permitir que os usuários ajustem o cronômetro do jogo por meio de botões HTML simples, você pode dar a eles mais controle sobre o jogo.

Este artigo mostrará como criar uma solução em JavaScript que permite aos jogadores escolher entre diferentes configurações de cronômetro usando botões. Por exemplo, selecionar o botão '30s' ajustará o cronômetro para 30 segundos, enquanto clicar no botão '60s' o alterará para 60 segundos.

A função JavaScript pegará o valor do botão clicado e atualizará o cronômetro e o título do jogo dinamicamente. Esse tipo de flexibilidade pode aprimorar a experiência do usuário, tornando o jogo mais personalizável e divertido para diferentes níveis de habilidade.

Ao final deste guia, você terá um recurso de ajuste de cronômetro totalmente funcional usando HTML e JavaScript. Também abordaremos como atualizar o valor do cronômetro exibido no título da página para refletir a duração selecionada do cronômetro.

Comando	Exemplo de uso
document.querySelector()	Usado para selecionar o elemento HTML
addEventListener()	Vincula um evento específico (por exemplo, clique) a um elemento de botão. Neste contexto, é usado para acionar a função changeTimer() quando um usuário clica em um botão, permitindo a interação dinâmica com as configurações do temporizador.
innerText	Esta propriedade permite modificar o texto visível dentro de um elemento HTML. Nesta solução, é utilizado para atualizar o valor do timer no título da página quando um botão é clicado.
onClick	Um atributo de manipulador de eventos embutido usado na abordagem alternativa para anexar a função changeTimer() diretamente ao evento de clique do botão. Isso permite uma maneira mais simples e menos modular de atualizar o temporizador dinamicamente.
test()	Este método é usado em testes unitários com Jest. Ele define um caso de teste onde a função que está sendo testada (por exemplo, changeTimer()) é avaliada para garantir que o cronômetro seja atualizado corretamente. Ele garante que o código se comporte conforme esperado em diferentes cenários.
expect()	Um comando Jest que verifica se o valor real (como o cronômetro atualizado) corresponde ao valor esperado. É usado em testes de unidade para verificar se gameTime e document.title são atualizados corretamente após um clique de botão.
toBe()	Outro comando Jest que verifica a igualdade estrita. Ele garante que após chamar changeTimer(), o tempo de jogo seja exatamente o esperado (por exemplo, 30.000 ms por 30 segundos).
getElementById()	Usado para selecionar botões específicos por seus IDs (por exemplo, 'trinta', 'sessenta'). Este método é importante para anexar ouvintes de eventos aos botões e acionar a mudança dinâmica do temporizador em resposta à interação do usuário.

Criando temporizadores dinâmicos usando botões JavaScript e HTML

Os scripts fornecidos acima são projetados para permitir que um usuário ajuste dinamicamente o cronômetro do jogo em um jogo de digitação clicando em botões HTML. Inicialmente declaramos uma variável , que mantém o tempo em milissegundos (30 segundos por padrão, multiplicado por 1.000 para converter em milissegundos). A principal funcionalidade reside no função, que atualiza o valor do temporizador com base no botão clicado. Este método recebe o valor do botão (por exemplo, 30, 60 ou 90) e atualiza o tempo de jogo variável em conformidade. Além disso, o script atualiza o título da página para refletir a duração do cronômetro selecionada, deixando claro aos usuários quanto tempo eles têm.

Para o comportamento dinâmico, utilizamos ouvintes de eventos, especificamente o comando. Isso permite que o script reaja quando um usuário clica em qualquer um dos botões. Cada botão recebe um ID e, quando clicado, aciona o função, passando o respectivo valor de tempo. Essa abordagem é útil para lidar com vários botões de forma eficiente, sem a necessidade de JavaScript embutido repetitivo na estrutura HTML. O script também inclui uma opção de fallback onde você pode usar manipuladores de eventos embutidos como se a simplicidade for preferida à modularidade.

Na solução alternativa, vinculamos diretamente o evento para os botões. Este método executa o funcionam diretamente no botão que está sendo clicado. É uma abordagem simples, mas carece da flexibilidade do método do ouvinte de eventos. A simplicidade deste método é útil para aplicações menores e menos complexas. No entanto, para um código mais escalonável, os ouvintes de eventos oferecem mais flexibilidade e permitem atualizações mais fáceis do script sem modificar diretamente a estrutura HTML. Ambos os métodos visam resolver o mesmo problema, que é ajustar o cronômetro e atualizar o título dinamicamente com base na seleção do usuário.

Por fim, implementamos testes unitários usando Jest, um framework de testes JavaScript. O funções são cruciais para validar se o cronômetro é atualizado corretamente. Ao testar vários cenários, como se o cronômetro se ajusta para 30 segundos, 60 segundos ou 90 segundos, esses testes de unidade garantem a exatidão do script. Comandos como e são usados ​​para verificar se o valor real do temporizador e o título da página correspondem aos resultados esperados. Esta fase de teste garante que a lógica do seu temporizador esteja funcionando corretamente em diferentes casos de uso, proporcionando confiança na robustez da sua solução.

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

Aprimorando a interação do jogo com personalização do temporizador

Outro aspecto a considerar ao alterar o cronômetro em um jogo de digitação é a experiência geral do usuário e a interface. Além de ajustar o cronômetro do jogo por meio de botões, é importante dar aos jogadores feedback visual sobre o cronômetro selecionado. Isso pode ser conseguido atualizando outros elementos da página, como uma exibição de contagem regressiva. Depois que um botão é clicado para definir o cronômetro, o cronômetro de contagem regressiva deve iniciar imediatamente, fornecendo feedback em tempo real ao usuário. Isso garante que a interação seja suave e intuitiva, tornando o jogo mais envolvente.

Para implementar isso, você pode usar JavaScript função. Assim que o cronômetro estiver definido, setInterval pode ser usado para criar uma contagem regressiva que diminui o valor do temporizador a cada segundo. Quando o cronômetro chega a zero, a função pode interromper o jogo ou alertar o usuário que o tempo acabou. Esta funcionalidade, combinada com a capacidade de alterar dinamicamente o temporizador através de botões, melhora significativamente a experiência de jogo. Uma interface responsiva é fundamental para manter os jogadores envolvidos, e o feedback em tempo real é uma forma de conseguir isso.

Além disso, o tratamento de erros deve ser considerado. Por exemplo, se um usuário tentar iniciar o jogo sem definir um cronômetro, você poderá solicitar que ele selecione um horário válido. Ao incorporar mecanismos de validação, você garante que o jogo funcione sem problemas e reduz possíveis problemas. Este tipo de validação não só melhora a experiência do usuário, mas também contribui para a confiabilidade do seu jogo, garantindo que os jogadores não enfrentem confusões desnecessárias.

1. Como eu uso criar uma contagem regressiva?
2. Você pode usar configurando-o para ser executado a cada 1000 milissegundos (1 segundo) e diminuindo o valor do temporizador a cada vez. Quando o valor chegar a zero, você poderá interromper a contagem regressiva usando .
3. Qual é o propósito ?
4. é usado para interromper uma contagem regressiva ou qualquer outra ação recorrente iniciada por . É crucial garantir que a contagem regressiva pare quando chegar a zero.
5. Como posso atualizar o título HTML dinamicamente?
6. Usar para definir o texto do título da página. Isso pode ser atualizado dentro do seu função com base no valor de tempo selecionado.
7. Posso lidar com erros do usuário ao selecionar um cronômetro?
8. Sim, você pode adicionar validação verificando se uma opção de cronômetro válida foi selecionada antes de iniciar a contagem regressiva. Se nenhum horário válido for escolhido, você poderá exibir um alerta ou prompt.
9. Como aciono uma função quando um botão é clicado?
10. Você pode anexar uma função a um botão usando ou usando diretamente no elemento HTML do botão.

A incorporação de ajustes dinâmicos do temporizador em um jogo de digitação melhora significativamente a experiência do jogador. Ao permitir que os usuários alterem o cronômetro usando botões HTML simples e atualizando a interface do jogo em tempo real, os desenvolvedores podem tornar seus jogos mais interativos e flexíveis. Esse tipo de controle ajuda a acomodar diferentes níveis de habilidade.

O uso de práticas recomendadas, como ouvintes de eventos, tratamento de erros e testes de unidade, garante que o jogo funcione sem problemas e forneça uma experiência confiável ao usuário. A implementação desses recursos não apenas melhorará a funcionalidade do jogo, mas também manterá os jogadores mais envolvidos com uma mecânica responsiva e fácil de usar.