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.


MUO VÍDEO DO DIA

ROLE PARA CONTINUAR COM O CONTEÚDO

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 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áriouma variável número aleatórioe 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.

 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. 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.

 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

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

 <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 no carrascoStages matriz é 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. 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.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!

Captura de tela do jogo Hangman finalizado

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.

Artigos Populares

Artigos Recentes

Veja Também

Receba as notícias diárias em sua caixa de entrada