Desvendando o Svelte: Criando um Jogo da Forca do Zero
O Svelte, um framework JavaScript inovador, tem conquistado cada vez mais adeptos no universo do desenvolvimento web. Sua simplicidade sintática o torna uma excelente porta de entrada para iniciantes que desejam explorar o mundo dos frameworks JavaScript. A melhor forma de aprender é colocar a mão na massa, e este guia o conduzirá na criação de um jogo da forca utilizando os recursos que o Svelte oferece.
Como Funciona o Jogo da Forca
O jogo da forca é um clássico de adivinhação de palavras, tradicionalmente jogado entre duas pessoas. Um jogador escolhe uma palavra secreta e o outro tenta adivinhar letra por letra. O objetivo do adivinhador é descobrir a palavra antes de esgotar as tentativas.
No início do jogo, o anfitrião define a palavra secreta. O tamanho dessa palavra é usualmente apresentado ao adivinhador através de espaços em branco ou traços. Cada palpite incorreto resulta no desenho de partes de um boneco palito na forca, começando pela cabeça, depois corpo, braços e pernas.
O adivinhador vence se conseguir decifrar todas as letras da palavra antes que o boneco seja totalmente desenhado. A forca é uma ótima maneira de exercitar o vocabulário, o raciocínio e a capacidade de dedução.
Preparando o Ambiente de Desenvolvimento
O código-fonte deste projeto está disponível em um repositório GitHub sob licença MIT, permitindo que você o utilize livremente. Uma versão demonstrativa do jogo pode ser acessada neste link.
Para começar a usar o Svelte em seu computador, a melhor abordagem é estruturar o projeto com Vite.js. Para isso, certifique-se de ter o Node Package Manager (NPM) e o Node.js instalados. Alternativamente, você pode usar um gerenciador de pacotes como o Yarn. Abra seu terminal e execute o seguinte comando:
npm create vite
Isso iniciará um novo projeto usando a interface de linha de comando (CLI) do Vite. Escolha um nome para seu projeto, selecione Svelte como o framework e defina JavaScript como a variante. Em seguida, entre no diretório do projeto e instale as dependências com:
npm install
Com o projeto aberto, dentro da pasta “src”, crie um arquivo chamado “hangmanArt.js” e remova as pastas “assets” e “lib”. Limpe o conteúdo dos arquivos “App.svelte” e “App.css”. No arquivo “App.css”, insira o seguinte:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Copie o conteúdo do arquivo “hangmanArt.js” do repositório do projeto e cole-o no seu arquivo “hangmanArt.js”. Você pode iniciar o servidor de desenvolvimento com:
npm run dev
Definindo a Lógica da Aplicação
Abra o arquivo “App.svelte” e crie uma tag <script> para conter a lógica do aplicativo. Comece criando um array de palavras:
let words = [ "appetizer", "roommates", "shrinking", "freedom", "happiness", "development", ];
Importe o array “hangmanArt” do arquivo “hangmanArt.js”. Crie variáveis: “userInput” para entrada do usuário, “randomNumber” para gerar números aleatórios e “selectedWord” para a palavra escolhida. Uma variável “initial” também deve ser criada para salvar a palavra original. Além dessas, crie “match”, “message”, “hangmanStages” e “output”. Inicialize “output” com traços, correspondendo ao tamanho da palavra. Atribua o array “hangmanArt” a “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 Essenciais
Ao longo do jogo, a saída deve ser mostrada ao jogador para indicar seus acertos e erros. Crie uma função “generateOutput” para gerar a saída:
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
A cada palpite, o programa deve avaliar se está correto. Crie uma função “evaluate” que avance o desenho da forca em caso de erro, ou chame “generateOutput” em caso de acerto:
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 = "";
}
Com a lógica finalizada, você pode prosseguir para a marcação da interface.
Definindo a Marcação do Projeto
Crie um elemento <main> para conter os demais elementos do jogo. Dentro dele, coloque um <h2> com o texto “Jogo da Forca”:
<h2 class="title">
Jogo da Forca
</h2>
Adicione uma frase de efeito e renderize a figura da forca no primeiro estágio, se existirem elementos em “hangmanStages”:
<div class="tagline">
Estou pensando em uma palavra. Você consegue adivinhar as letras?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Implemente a lógica para exibir mensagens de vitória ou derrota:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>Você Perdeu...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>Você Ganhou...</div>
{/if}
Renderize a saída e um formulário para entrada do usuário. Ambos devem aparecer apenas se a mensagem não estiver sendo exibida:
{#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="Digite uma letra"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Enviar</button>
</form>
{/if}
Adicione o estilo apropriado ao aplicativo. Crie uma tag <style> e 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;
}
Seu jogo da forca com Svelte está pronto! Parabéns!
Por que o Svelte é tão Atraente?
O Svelte se destaca pela facilidade de aprendizado e uso. Sua sintaxe, semelhante ao JavaScript puro, o torna uma excelente opção para quem busca um framework que lide com funcionalidades complexas como a reatividade, sem abrir mão da familiaridade do JavaScript. Para projetos mais elaborados, o SvelteKit, uma metaestrutura inspirada no Next.js, pode ser utilizada.