Cómo crear un juego del ahorcado con Svelte

Svelte es un marco de JavaScript radicalmente nuevo que se está ganando el corazón de los desarrolladores. Su sintaxis simple lo convierte en un excelente candidato para principiantes que buscan sumergirse en el mundo de los marcos de JavaScript. Una de las mejores formas de aprender es construyendo, por lo que en esta guía aprenderá a utilizar las funciones que ofrece Svelte para crear un juego del ahorcado sencillo.

Cómo funciona el ahorcado

El ahorcado es un juego de adivinanzas de palabras que normalmente se juega entre dos personas, donde un jugador piensa en una palabra y el otro intenta adivinar esa palabra letra por letra. El objetivo del jugador que adivina es descubrir la palabra secreta antes de que se le acaben las conjeturas incorrectas.

Cuando comienza el juego, el anfitrión selecciona una palabra secreta. La longitud de la palabra generalmente se indica al otro jugador (adivinador) mediante guiones. A medida que el adivino hace conjeturas incorrectas, se dibujan partes adicionales del verdugo, que van desde la cabeza, el cuerpo, los brazos y las piernas.

El que adivina gana el juego si logra adivinar todas las letras de la palabra antes de que se complete el dibujo de la figura del Stickman. Hangman es una excelente manera de poner a prueba el vocabulario, el razonamiento y las habilidades de deducción.

Configurar el entorno de desarrollo

Para que Svelte esté en funcionamiento en su máquina, es recomendable implementar el proyecto con Vite.js. Para usar Vite, asegúrese de tener Administrador de paquetes de nodos (NPM) y Node.js instalado en su máquina. También puedes utilizar un administrador de paquetes alternativo como Yarn. Ahora, abre tu terminal y ejecuta el siguiente comando:

npm create vite

Esto iniciará un nuevo proyecto con la Vite. Interfaz de línea de comando (CLI). Nombra tu proyecto, selecciona Esbelto como marco y establezca la variante en javascript. Ahora cd en el directorio del proyecto y ejecute el siguiente comando para instalar las dependencias:

npm install

Ahora, abra el proyecto y en el src carpeta, cree una ahorcadoArt.js archivo y eliminar el activos y biblioteca carpeta. Luego borre el contenido del Aplicación.esbelta y aplicación.css archivos. En el aplicación.css archivo, agregue lo siguiente;

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

Copie el contenido del ahorcadoArt.js archivo de este proyecto repositorio de GitHuby luego pégalo en el tuyo ahorcadoArt.js archivo. Puede iniciar el servidor de desarrollo con el siguiente comando:

npm run dev

Definición de la lógica de la aplicación

Abre el Aplicación.esbelta archivo y crear un guion etiqueta que contendrá la mayor parte de la lógica de la aplicación. Crear un palabras matriz para contener una lista de palabras.

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

A continuación, importe el ahorcadoArte matriz de la ahorcadoArt.js archivo. Luego, crea una variable. entrada del usuario, una variable número aleatorioy otra variable para contener una palabra seleccionada aleatoriamente del palabras formación.

Asigne el palabra seleccionada a otra variable inicial. Además de las otras variables, cree las siguientes variables: fósforo, mensaje, etapas del ahorcado, y producción. Inicialice la variable de salida con una cadena de guiones, dependiendo de la longitud del palabra seleccionada. Asigne el ahorcadoArte matriz a la ahorcadoEtapas variable.

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;

Agregar las funcionalidades necesarias

Mientras el jugador adivina, querrás mostrarle el resultado. Este resultado ayudará al jugador a saber si ha acertado o no. Crear una función generarSalida para manejar la tarea de generar una salida.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

Para cada suposición que envíe el jugador, el programa tendrá que determinar si es la suposición correcta. Crear un evaluar función que moverá el dibujo del ahorcado a la siguiente etapa si el jugador adivina mal, o llamará al generarSalida funcionará si el jugador acierta.

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 = "";
}

Y con eso, has completado la lógica de la aplicación. Ahora puede pasar a definir el marcado.

Definición del marcado del proyecto

Crear un principal elemento que albergará todos los demás elementos del juego. En el principal elemento, definir un h1 elemento con el texto Verdugo.

<h1class="title">
 Hangman
h1>

Cree un eslogan y represente la figura del ahorcado en la primera etapa solo si el número de elementos en el ahorcadoEtapas la matriz es mayor 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}

Luego, implemente la lógica para mostrar un mensaje indicando si el jugador ganó o perdió:

{#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}

A continuación, renderice el resultado y un formulario para aceptar entradas del usuario. La salida y el formulario solo deben mostrarse si el elemento con la clase "mensaje" no está en la pantalla.

{#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}

Ahora puede agregar el estilo apropiado a la aplicación. Crear un estilo etiqueta y en ella, agregue lo siguiente:

 * {
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;
 }

Has creado un juego del ahorcado con Svelte. ¡Gran trabajo!

¿Qué hace que Svelte sea increíble?

Svelte es un marco que es relativamente fácil de aprender y aprender. Debido a que la sintaxis lógica de Svelte es similar a Vanilla JavaScript, esto lo convierte en la elección perfecta si desea un marco que puede contener cosas complejas como la reactividad, mientras le brinda la oportunidad de trabajar con Vanilla JavaScript. Para proyectos más complejos, puede utilizar SvelteKit, un metamarco desarrollado como la respuesta de Svelte a Next.js.