Como criar um jogo da forca com Svelte

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.

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

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 Gerenciador de Pacotes de Nó (NPM) e Node.js instalado 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 dará início a um novo projeto com o Vite Interface de linha de comando (CLI). Dê um nome ao seu projeto, selecione Esbelto como estrutura e defina a variante como JavaScript. Agora cd no diretório do projeto e execute o seguinte comando para instalar as dependências:

npm install

Agora, abra o projeto e no fonte pasta, crie um carrascoArt.js arquivo e exclua o ativos e biblioteca pasta. Em seguida, limpe o conteúdo do App.svelte e Aplicativo.css arquivos. No Aplicativo.css arquivo, adicione o seguinte;

:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}

Copie o conteúdo do carrascoArt.js arquivo deste projeto Repositório GitHube cole-o em seu próprio carrascoArt.js arquivo. Você pode iniciar o servidor de desenvolvimento com o seguinte comando:

npm run dev

Definindo a Lógica da Aplicação

Abra o App.svelte arquivo e crie um roteiro tag que conterá a maior parte da lógica do aplicativo. Criar uma palavras array para armazenar uma lista de palavras.

let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];

A seguir, importe o carrascoArt matriz do carrascoArt.js arquivo. Em seguida, crie uma variável entrada do usuário, uma variável número aleatório, e outra variável para armazenar uma palavra selecionada aleatoriamente do palavras variedade.

Atribuir o palavra selecionada para outra variável inicial. Além das outras variáveis, crie as seguintes variáveis: corresponder, mensagem, carrascoEstágios, e saída. Inicialize a variável de saída com uma sequência de travessões, dependendo do comprimento do palavra selecionada. Atribuir o carrascoArt matriz para o carrascoStages variável.

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 gerarSaída para lidar com a tarefa de gerar uma saída.

functiongenerateOutput(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. Criar um Avalie função que moverá o desenho do carrasco para o próximo estágio se o jogador errar, ou chamará o gerarSaída função se o jogador acertar.

functionevaluate() {
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

Criar uma principal elemento que abrigará todos os outros elementos do jogo. No principal elemento, defina um h1 elemento com o texto Carrasco.

<h1class="title">
 Hangman
h1>

Crie um slogan e renderize a figura do carrasco no primeiro estágio somente se o número de elementos no carrascoStages matriz é maior que 0.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
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}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

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}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"submit">Submit</button>
 </form>
{/if}

Agora você pode adicionar o estilo apropriado ao aplicativo. Criar uma estilo tag 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.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.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 um estrutura que pode 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.