Português

Descrição

Este projeto é uma implementação do jogo Genius (Simon Says) usando apenas HTML, CSS e JavaScript. A interface é montada dinamicamente em tempo de execução pela função colocarLayoutStatico() (em assets/js/handlers.js). O jogo sorteia uma sequência de cores, exibe cada passo com animações, e aguarda o jogador repetir a sequência na mesma ordem. Se errar, mostra a pontuação alcançada, a maior pontuação da sessão e oferece o botão de reinício.

Funcionalidades

• Layout dinâmico com quatro botões coloridos: verde, amarelo, vermelho e azul.
• Animações visuais via @keyframes para destacar o botão ativo.
• Painel central com mensagens orientando cada etapa do jogo.
• Progressão de nível: a sequência cresce a cada acerto.
• Exibição de pontuação atual e maior pontuação da sessão.
• Botão "RECOMEÇAR" após erro para iniciar uma nova partida.

Como executar

• Método mais simples: abra o arquivo index.html diretamente em um navegador moderno (Chrome, Firefox, Edge, etc.).
• Opcional (servidor estático):
  • Python 3: python3 -m http.server 8000 e acesse http://localhost:8000/.
  • Node (http-server): npx http-server . e acesse o endereço exibido no terminal.

Ao carregar a página, assets/js/index.js invoca comecar(), que inicializa o fluxo de mensagens e exibição da primeira sequência.

Como jogar

1. Observe a sequência de cores que pisca na tela.
2. Clique nos botões coloridos seguindo a mesma ordem apresentada.
3. A cada rodada correta, uma nova cor é adicionada à sequência.
4. Se errar, o jogo mostra sua pontuação na rodada, a maior pontuação registrada e exibe o botão "RECOMEÇAR".

Estrutura do projeto

jogoGenius/
├── index.html
├── assets/
│   ├── css/
│   │   ├── normalize.css
│   │   └── style.css
│   ├── img/
│   │   ├── genius-game-gif.gif
│   │   └── genius_game.jpg
│   └── js/
│       ├── handlers.js
│       └── index.js

Principais arquivos

• index.html: documento base que carrega os estilos e scripts.
• assets/js/handlers.js: monta o layout, controla a lógica do jogo e as interações (funções como sortear, mostrarSequencia, verificar, vezDoJogador, retirarClick, comecar).
• assets/js/index.js: chama comecar() ao carregar a página.
• assets/css/style.css: estilos, posicionamento e @keyframes das cores.
• assets/css/normalize.css: normalização de estilos entre navegadores.
• assets/img/: imagens auxiliares (opcionais para documentação).

Personalização

• Cores: edite o array cores em assets/js/handlers.js para alterar ou reordenar as cores.
• Tempo e animações: ajuste os setTimeout em handlers.js e as animation-duration/@keyframes em style.css para mudar a velocidade e o efeito visual.
• Textos: as mensagens (por exemplo, "Seja Bem-vindo!", "Prepare-se e boa sorte!!") estão em handlers.js e podem ser traduzidas ou alteradas conforme necessário.

Tecnologias

• HTML5, CSS3 (inclui Normalize.css e Google Fonts), JavaScript puro (sem dependências externas).

Licença

Nenhuma licença foi definida no repositório. Adicione uma licença (por exemplo, MIT) conforme sua necessidade.

---

English

Description

This project is a classic Genius (Simon Says) game implemented with plain HTML, CSS, and JavaScript. The UI is dynamically assembled at runtime by the colocarLayoutStatico() function (in assets/js/handlers.js). The game draws a color sequence, plays it with animations, and waits for the player to repeat it in the same order. On a mistake, it shows the round score, the session’s highest score, and provides a restart button.

Features

• Dynamic layout with four colored pads: green, yellow, red, and blue.
• Visual highlights via @keyframes animations for the active pad.
• Central panel messages guiding each stage of the game.
• Level progression: the sequence grows after each successful round.
• Displays current score and session high score.
• "RECOMEÇAR" (Restart) button after an error to start a new game.

How to run

• Easiest way: open index.html directly in a modern web browser (Chrome, Firefox, Edge, etc.).
• Optional (static server):
  • Python 3: python3 -m http.server 8000 then visit http://localhost:8000/.
  • Node (http-server): npx http-server . then visit the URL printed in the terminal.

On page load, assets/js/index.js invokes comecar(), which initializes the message flow and shows the first sequence.

How to play

1. Watch the color sequence as it flashes.
2. Click the colored pads following the exact order.
3. After each correct round, a new color is appended to the sequence.
4. If you make a mistake, the game shows your round score, the highest score, and displays the "RECOMEÇAR" (Restart) button.

Project structure

jogoGenius/
├── index.html
├── assets/
│   ├── css/
│   │   ├── normalize.css
│   │   └── style.css
│   ├── img/
│   │   ├── genius-game-gif.gif
│   │   └── genius_game.jpg
│   └── js/
│       ├── handlers.js
│       └── index.js

Main files

• index.html: base document that loads styles and scripts.
• assets/js/handlers.js: builds the UI, controls the game logic and interactions (functions like sortear, mostrarSequencia, verificar, vezDoJogador, retirarClick, comecar).
• assets/js/index.js: calls comecar() on page load.
• assets/css/style.css: styling, layout, and color @keyframes.
• assets/css/normalize.css: browser style normalization.
• assets/img/: auxiliary images (optional for documentation).

Customization

• Colors: edit the cores array in assets/js/handlers.js to change or reorder the pads.
• Timing and animations: adjust setTimeout in handlers.js and animation-duration/@keyframes in style.css to change speed and visual effect.
• Texts: the messages (e.g., "Seja Bem-vindo!", "Prepare-se e boa sorte!!") live in handlers.js and can be translated or customized as needed.

Technologies

• HTML5, CSS3 (includes Normalize.css and Google Fonts), plain JavaScript (no external dependencies).

License

No license is defined in the repository. Add one (e.g., MIT) as needed.