Este é um projeto simples de um sorteador de números de bingo, desenvolvido utilizando HTML, CSS e JavaScript. O projeto não envolve banco de dados; os números são sorteados e exibidos dinamicamente na tela.
- Sorteio de Números: Clique no botão "Sortear Número" para sortear um novo número de bingo. Os números sorteados são exibidos em um formato específico (por exemplo, B-5).
- Novo Sorteio: O botão "Novo Sorteio" permite reiniciar o jogo, limpando os números sorteados e o número atual exibido.
- Destaque na Tabela: À medida que os números são sorteados, eles são destacados na tabela de números de bingo correspondente.
- Celebração "Bingo!": Ao clicar no botão "Bingo!", uma animação de confetes é exibida na tela para celebrar a vitória.
O projeto consiste em três principais arquivos:
- index.html: Contém a estrutura HTML do projeto, incluindo os botões de controle, a exibição do número sorteado, a tabela de números de bingo e o contêiner para animação de confetes.
- assets/styles.css: Arquivo CSS para estilizar o layout e os elementos do projeto, incluindo a formatação da esfera de número sorteado, a tabela de números de bingo e a animação de confetes.
- assets/scripts.js: Arquivo JavaScript que implementa a lógica do sorteio de números, o destaque na tabela, a animação de confetes e outras funcionalidades dinâmicas.
-
Faça o download ou clone este repositório para o seu computador.
-
Abra o arquivo index.html em um navegador da web.
-
Clique no botão "Sortear Número" para iniciar o sorteio dos números de bingo.
-
Utilize o botão "Novo Sorteio" para reiniciar o jogo, caso necessário.
-
Para uma celebração adicional, clique no botão "Bingo!" e observe a animação de confetes.
Este projeto pode ser expandido e melhorado de várias maneiras, incluindo:
- Implementação de mais animações ou efeitos visuais para tornar a experiência mais interativa.
- Adição de sons para acompanhar o sorteio e a celebração do "Bingo!".
- Melhorias na responsividade para garantir uma boa experiência em dispositivos móveis.
- Sinta-se à vontade para explorar, modificar e expandir este projeto de acordo com suas necessidades e interesses!