Svelte é uma nova estrutura JavaScript radical que está conquistando os corações dos desenvolvedores. Sua sintaxe simples o torna um ótimo candidato para iniciantes que desejam mergulhar no mundo dos frameworks JavaScript. Uma das melhores maneiras de aprender é construindo, portanto, neste guia, você aprenderá como usar os recursos que Svelte oferece para criar um jogo da forca simples.
últimas postagens
Como funciona o carrasco
Hangman é um jogo de adivinhação de palavras normalmente jogado entre duas pessoas, onde um jogador pensa em uma palavra e o outro tenta adivinhar a palavra letra por letra. O objetivo do jogador que adivinha é descobrir a palavra secreta antes que acabem as suposições incorretas.
Quando o jogo começa, o anfitrião seleciona uma palavra secreta. O comprimento da palavra geralmente é indicado ao outro jogador (adivinhador) por meio de travessões. À medida que o adivinhador faz suposições incorretas, partes adicionais do carrasco são desenhadas, progredindo da cabeça, corpo, braços e pernas.
O adivinhador ganha o jogo se conseguir adivinhar todas as letras da palavra antes que o desenho da figura stickman seja concluído. Hangman é uma ótima maneira de testar habilidades de vocabulário, raciocínio e dedução.
Configurando o Ambiente de Desenvolvimento
O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT. Se você quiser dar uma olhada em uma versão ao vivo deste projeto, você pode conferir esta demonstração.
Para colocar o Svelte em funcionamento em sua máquina, é aconselhável estruturar o projeto com Vite.js. Para usar o Vite, certifique-se de ter o Node Package Manager (NPM) e o Node.js instalados em sua máquina. Você também pode usar um gerenciador de pacotes alternativo como o Yarn. Agora, abra seu terminal e execute o seguinte comando:
npm create vite
Isso iniciará um novo projeto com a interface de linha de comando Vite (CLI). Dê um nome ao seu projeto, selecione Svelte como estrutura e defina a variante como JavaScript. Agora entre no diretório do projeto e execute o seguinte comando para instalar as dependências:
npm install
Agora, abra o projeto e na pasta src, crie um arquivo hangmanArt.js e exclua os ativos e a pasta lib. Em seguida, limpe o conteúdo dos arquivos App.svelte e App.css. No arquivo App.css, adicione o seguinte;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Copie o conteúdo do arquivo hangmanArt.js do arquivo deste projeto Repositório GitHube cole-o em seu próprio arquivo hangmanArt.js. Você pode iniciar o servidor de desenvolvimento com o seguinte comando:
npm run dev
Definindo a Lógica da Aplicação
Abra o arquivo App.svelte e crie uma tag de script que conterá a maior parte da lógica do aplicativo. Crie uma matriz de palavras para armazenar uma lista de palavras.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Em seguida, importe o array hangmanArt do arquivo hangmanArt.js. Em seguida, crie uma variável userInput, uma variável randomNumber e outra variável para armazenar uma palavra selecionada aleatoriamente na matriz de palavras.
Atribua o selectedWord a outra variável inicial. Além das outras variáveis, crie as seguintes variáveis: match, message, hangmanStages e output. Inicialize a variável de saída com uma sequência de travessões, dependendo do comprimento da palavra selecionada. Atribua a matriz hangmanArt à variável hangmanStages.
import { hangmanArt } from "./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;
Adicionando as funcionalidades necessárias
À medida que o jogador adivinha, você deseja mostrar a saída ao jogador. Esta saída ajudará o jogador a saber se acertou ou errou. Crie uma função generateOutput para lidar com a tarefa de gerar uma saída.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Para cada palpite que o jogador enviar, o programa terá que determinar se é o palpite certo. Crie uma função de avaliação que moverá o desenho da forca para o próximo estágio se o jogador adivinhar errado, ou chame a função generateOutput se o jogador acertar.
function evaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
}
if (selectedWord.includes(guess)) {
selectedWord = selectedWord.replaceAll(guess, "-");
generateOutput(initial, selectedWord);
} else {
hangmanStages.shift();
hangmanStages = hangmanStages;
}
userInput = "";
}
E com isso você completou a lógica do aplicativo. Agora você pode prosseguir para definir a marcação.
Definindo a marcação do projeto
Crie um elemento principal que abrigará todos os outros elementos do jogo. No elemento principal, defina um elemento h1 com o texto Hangman.
<h1 class="title">
Hangman
</h1>
Crie um slogan e renderize a figura do carrasco no primeiro estágio somente se o número de elementos na matriz hangmanStages for maior que 0.
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Depois, implemente a lógica para mostrar uma mensagem indicando se o jogador ganhou ou perdeu:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>You Win...</div>
{/if}
Em seguida, renderize a saída e um formulário para aceitar a entrada do usuário. A saída e o formulário só deverão ser exibidos se o elemento com a classe “mensagem” não estiver na tela.
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
Agora você pode adicionar o estilo apropriado ao aplicativo. Crie uma tag de estilo e nela adicione o seguinte:
* {
color: green;
text-align: center;
} main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2px green;
height:40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
}
.hangman {
font-size: 32px;
}
form {
margin-top: 50px;
}
.tagline,
.message {
font-size: 20px;
}
Você criou um jogo da forca com Svelte. Bom trabalho!
O que torna Svelte incrível?
Svelte é uma estrutura relativamente fácil de aprender e aprender. Como a sintaxe lógica do Svelte é semelhante ao Vanilla JavaScript, isso o torna a escolha perfeita se você deseja uma estrutura que possa conter coisas complexas como reatividade, ao mesmo tempo que oferece a oportunidade de trabalhar com Vanilla JavaScript. Para projetos mais complexos, você pode usar o SvelteKit — uma metaestrutura que foi desenvolvida como a resposta do Svelte ao Next.js.