Como criar um jogo da forca com o Svelte
Svelte é uma nova estrutura JavaScript radical que está a conquistar os corações dos programadores. Sua sintaxe simples o torna um ótimo candidato para iniciantes que estão procurando mergulhar no mundo dos frameworks JavaScript. Uma das melhores maneiras de aprender é construindo, portanto, neste guia, você aprenderá como usar os recursos que o Svelte oferece para criar um simples jogo da forca.
Como funciona a forca
A forca é um jogo de decifração de palavras intrigante, normalmente jogado por duas pessoas, durante o qual um participante esconde uma palavra enquanto o outro se esforça por a decifrar através de sucessivas tentativas de adivinhar as suas letras. O principal objetivo do indivíduo que tenta adivinhar é descobrir a palavra enigmática antes de esgotar todas as oportunidades de conjecturas erradas.
No início do jogo, o facilitador escolhe um termo oculto. Normalmente, o comprimento da palavra é divulgado ao adversário (suposicionista) por meio de hífenes. Enquanto o suposicionista apresenta inferências erróneas, são esboçados outros componentes da estrutura da forca, avançando do crânio, tronco, membros e apêndices.
O sucesso do adivinhador em conseguir revelar todas as letras antes de completar a ilustração da forca determina a vitória neste jogo. O jogo da forca é um meio eficaz para avaliar os conhecimentos linguísticos, o raciocínio lógico e a capacidade de inferência de uma pessoa.
Configurar o ambiente de desenvolvimento
O código-fonte utilizado neste projeto foi carregado num repositório do GitHub, onde pode ser acedido gratuitamente ao abrigo dos termos da licença MIT. Para os interessados em examinar um exemplo operacional deste projeto, podem consultar a demonstração fornecida neste documento.
Para configurar um novo projeto Svelte utilizando o Vite.js, certifique-se de que tem o Node Package Manager (NPM) e o Node.js pré-instalados no seu computador. Além disso, pode utilizar, em alternativa, outro gestor de pacotes, como o Yarn, se desejar. Para iniciar o processo, siga estes passos no seu terminal:
npm create vite
Iniciando um novo esforço através da utilização da Interface de Linha de Comando (CLI), pode-se começar por fornecer um identificador para o seu respetivo projeto. Subsequentemente, selecionar Svelte como a estrutura preferida enquanto designa a variante a ser JavaScript. Após estes passos iniciais, é imperativo navegar para o diretório do projeto especificado e executar um comando de instalação específico para obter quaisquer dependências necessárias.
npm install
Siga estas etapas para modificar seu aplicativo Svelte:1. Abra o diretório do projeto que contém as duas pastas “App” (uma para frontend e outra para backend).2.Navegue até à pasta “src” dentro do diretório do projeto frontend.3. Crie um novo ficheiro JavaScript chamado “hangmanArt.js”. Este servirá como ponto de entrada para a nossa lógica de jogo.4. Elimine as pastas “assets” e “lib” do diretório do projeto frontend, caso existam. Estas são tipicamente geradas pelas ferramentas de compilação durante o desenvolvimento, mas podem não ser necessárias para a implementação em produção.5. Limpar o conteúdo dos ficheiros “App.svelte” e “App.css” localizados nos seus respectivos directórios.6. No ficheiro “App.css”, adicionar o seguinte fragmento de código em
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Pode extrair-se o conteúdo do ficheiro “hangmanArt.js”, que está situado no repositório online do projeto atual no GitHub, empregando práticas padrão para copiar e colar. Uma vez feito isso, pode-se inserir o material copiado diretamente na sua cópia pessoal do arquivo “hangmanArt.js” usando um método similar. Para iniciar o processo de execução de um servidor de desenvolvimento local, basta executar o comando especificado fornecido na documentação.
npm run dev
Definir a lógica da aplicação
Abra o ficheiro “App.svelte”, que é provavelmente o componente principal ou contentor da sua aplicação Svelte, e dentro dele, insira um elemento