O jogo da forca oferece uma experiência envolvente e educativa, onde os usuários podem desfrutar de desafios de palavras enquanto aprimoram suas habilidades linguísticas. Com uma interface intuitiva e recursos bem projetados, proporciona uma experiência de jogo fluida e imersiva.
Os usuários devem ser capazes de:
- Aprenda a jogar Hangman no menu principal.
- Inicie um jogo e escolha uma categoria.
- Jogue Hangman com uma palavra aleatória selecionada dessa categoria.
- Veja a diminuição atual da saúde com base em suposições incorretas de letras.
- Ganhe o jogo se completar a palavra inteira.
- Perde o jogo se fizer oito palpites errados.
- Pause o jogo e escolha continuar, escolha uma nova categoria ou saia.
- Visualize o layout ideal da interface dependendo do tamanho da tela do dispositivo.
- Veja os estados de foco e foco para todos os elementos interativos da página.
- Navegue por todo o jogo apenas usando o teclado.
- Escolha uma palavra aleatória da categoria escolhida para iniciar o jogo. Você precisará calcular o espaçamento das palavras e quando quebrar para uma nova linha, pois alguns nomes/títulos são (intencionalmente) longos.
- Se o jogador adivinhar uma letra corretamente, preencha todos os espaços relevantes e desative a letra no teclado.
- Se o jogador adivinhar errado, desative a letra do teclado e reduza o medidor de saúde. O medidor de saúde deve esvaziar após oito palpites errados. O jogador perde neste momento e o menu aparece.
- Selecionar "jogar novamente" no menu inicia um novo jogo com a mesma categoria. Selecionar "nova categoria" navega para a tela "escolher uma categoria". Sair navega de volta ao menu principal.
- Os jogadores nunca devem ver o mesmo nome/título várias vezes se jogarem mais de uma partida em uma visita. Os dados JSON possuem um booleano "selecionado" para ajudá-lo a filtrar as opções já reproduzidas.
- Clicar no menu hambúrguer durante um jogo deve mostrar o menu "pausado".
- URL do repositório: Repositório
- URL da solução: Jogo Da Forca
- Marcação HTML5 semântica
- Web Acessibility(wai-arias, role)
- SEO Básico(meta tags, open graph)
- CSS(Flex Box, Grid Layout)
- Responsive Web Design(RWD)
- Mobile-First Workflow
- TypeScript
- Svelte
- SvelteKit
- Vitest - para testes unitários
- Site - Samuel Amaro
- Frontend Mentor - @samuel-amaro
como criar um novo projeto sveltekit
# cria um novo projeto no diretório atual
npm create svelte@latest
# cria um novo projeto em my-app
npm create svelte@latest my-app
Depois de criar um projeto e instalar dependências com npm install
(ou pnpm install
ou yarn
), inicie um servidor de desenvolvimento:
npm run dev
# ou inicie o servidor e abra o aplicativo em uma nova aba do navegador
npm run dev ---open
Para criar uma versão de produção do seu aplicativo:
npm run build
Você pode visualizar a compilação de produção com npm run preview
.
Para implantar seu aplicativo, pode ser necessário instalar um adaptador para seu ambiente de destino.
Formatar o código (Prettier)
npm run format
Executar o Lint
npm run lint
Executar a verificação do Svelte
npm run check #or
npm run check:watch