Come creare un gioco dell'impiccato con Svelte

Svelte è un nuovo framework JavaScript radicale che sta conquistando il cuore degli sviluppatori. La sua semplice sintassi lo rende un ottimo candidato per i principianti che desiderano immergersi nel mondo dei framework JavaScript. Uno dei modi migliori per imparare è costruire, quindi in questa guida imparerai come utilizzare le funzionalità offerte da Svelte per creare un semplice gioco dell'impiccato.

Come funziona l'Impiccato

L'Impiccato è un gioco di indovinare le parole tipicamente giocato tra due persone, in cui un giocatore pensa a una parola e l'altro giocatore cerca di indovinarla lettera per lettera. L'obiettivo del giocatore che indovina è scoprire la parola segreta prima che finiscano le ipotesi errate.

All'inizio del gioco, l'host seleziona una parola segreta. La lunghezza della parola viene solitamente indicata all'altro giocatore (indovino) utilizzando dei trattini. Man mano che l'indovino fa ipotesi errate, vengono disegnate parti aggiuntive del boia, procedendo dalla testa, al corpo, alle braccia e alle gambe.

L'indovino vince il gioco se riesce a indovinare tutte le lettere della parola prima che il disegno della figura stickman sia completo. L'Impiccato è un ottimo modo per testare le capacità di vocabolario, ragionamento e deduzione.

Impostazione dell'ambiente di sviluppo

Per far funzionare Svelte sul tuo computer, è consigliabile impalcare il progetto con Vite.js. Per utilizzare Vite, assicurati di avere Gestore pacchetti nodo (NPM) E Node.js installato sul tuo computer. Puoi anche utilizzare un gestore di pacchetti alternativo come Yarn. Ora apri il tuo terminale ed esegui il seguente comando:

npm create vite

Questo darà inizio ad un nuovo progetto con la Vite Interfaccia della riga di comando (CLI). Dai un nome al tuo progetto, seleziona Snello come framework e imposta la variante su JavaScript. Ora CD nella directory del progetto ed esegui il comando seguente per installare le dipendenze:

npm install

Ora apri il progetto e nel file src cartella, creare un file hangmanArt.js archiviare ed eliminare il file risorse E lib cartella. Quindi cancella il contenuto del file App.svelte E App.css File. Nel App.css file, aggiungere quanto segue;

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

Copia il contenuto del boiaArt.js file da questo progetto Repositorio GitHub, quindi incollalo nel tuo hangmanArt.js file. È possibile avviare il server di sviluppo con il seguente comando:

npm run dev

Definire la logica dell'applicazione

Apri il App.svelte file e creare un file sceneggiatura tag che conterrà la maggior parte della logica dell'applicazione. Creare un parole array per contenere un elenco di parole.

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

Successivamente, importa il file boiaArt matrice da hangmanArt.js file. Quindi, crea una variabile utenteInput, una variabile numero casualee un'altra variabile per contenere una parola selezionata casualmente da parole vettore.

Assegnare il Parola selezionata ad un'altra variabile iniziale. Oltre alle altre variabili, creare le seguenti variabili: incontro, Messaggio, boiaStadi, E produzione. Inizializza la variabile di output con una stringa di trattini, a seconda della lunghezza del file Parola selezionata. Assegnare il boiaArt matrice al hangmanStages variabile.

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;

Aggiunta delle funzionalità necessarie

Mentre il giocatore fa un'ipotesi, vuoi mostrare l'output al giocatore. Questo output aiuterà il giocatore a sapere se ha fatto l'ipotesi giusta o sbagliata. Crea una funzione generareOutput per gestire il compito di generare un output.

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

Per ogni ipotesi inviata dal giocatore, il programma dovrà determinare se è l'ipotesi giusta. Creare un valutare funzione che sposterà il disegno dell'impiccato alla fase successiva se il giocatore indovina, o chiamerà il generareOutput funzione se il giocatore fa un'ipotesi giusta.

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 con questo hai completato la logica dell'applicazione. Ora puoi passare alla definizione del markup.

Definire il Markup del Progetto

Creare un principale elemento che ospiterà ogni altro elemento del gioco. Nel principale elemento, definire un h1 elemento con il testo Boia.

<h1class="title">
 Hangman
h1>

Crea uno slogan e rappresenta la figura dell'impiccato nella prima fase solo se il numero di elementi nel file hangmanStages l'array è maggiore di 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}

Successivamente, implementa la logica per mostrare un messaggio che indica se il giocatore ha vinto o perso:

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

Successivamente, esegui il rendering dell'output e un modulo per accettare l'input dall'utente. L'output e il modulo dovrebbero essere visualizzati solo se l'elemento con la classe "messaggio" non è sullo schermo.

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

Ora puoi aggiungere lo stile appropriato all'applicazione. Creare un stile tag e al suo interno aggiungi quanto segue:

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

Hai creato un gioco dell'impiccato con Svelte. Ottimo lavoro!

Cosa rende Svelte sorprendente?

Svelte è un framework relativamente facile da apprendere e imparare. Poiché la sintassi logica di Svelte è simile a Vanilla JavaScript, questo lo rende la scelta perfetta se desideri un struttura che può contenere cose complesse come la reattività, dandoti allo stesso tempo l'opportunità di lavorare con Vanilla JavaScript. Per progetti più complessi, puoi utilizzare SvelteKit, un meta framework sviluppato come risposta di Svelte a Next.js.