So erstellen Sie ein Hangman-Spiel mit Svelte

Svelte ist ein radikal neues JavaScript-Framework, das die Herzen der Entwickler erobert. Seine einfache Syntax macht es zu einem großartigen Kandidaten für Anfänger, die in die Welt der JavaScript-Frameworks eintauchen möchten. Eine der besten Möglichkeiten zum Lernen ist das Bauen. In diesem Handbuch erfahren Sie, wie Sie die von Svelte angebotenen Funktionen nutzen, um ein einfaches Henkerspiel zu erstellen.

So funktioniert Hangman

Galgenmännchen ist ein Wort-Ratespiel, das normalerweise zwischen zwei Personen gespielt wird, bei dem ein Spieler an ein Wort denkt und der andere Spieler versucht, dieses Wort Buchstabe für Buchstabe zu erraten. Das Ziel des Ratespielers besteht darin, das geheime Wort herauszufinden, bevor ihm die falschen Vermutungen ausgehen.

Zu Beginn des Spiels wählt der Moderator ein geheimes Wort aus. Die Länge des Wortes wird dem Mitspieler (Rater) meist durch Bindestriche angezeigt. Wenn der Rater falsche Vermutungen anstellt, werden weitere Teile des Henkers gezeichnet, beginnend mit Kopf, Körper, Armen und Beinen.

Der Rater gewinnt das Spiel, wenn es ihm gelingt, alle Buchstaben des Wortes zu erraten, bevor die Zeichnung der Strichmännchen-Figur abgeschlossen ist. Hangman ist eine großartige Möglichkeit, Wortschatz, Argumentation und Schlussfolgerungsfähigkeiten zu testen.

Einrichten der Entwicklungsumgebung

Um Svelte auf Ihrem Computer zum Laufen zu bringen, empfiehlt es sich, das Projekt mit Vite.js zu versehen. Um Vite zu verwenden, stellen Sie sicher, dass Sie über Folgendes verfügen Knotenpaketmanager (NPM) Und Node.js ist auf Ihrem Computer installiert. Sie können auch einen alternativen Paketmanager wie Yarn verwenden. Öffnen Sie nun Ihr Terminal und führen Sie den folgenden Befehl aus:

npm create vite

Damit wird ein neues Projekt mit dem Vite gestartet Befehlszeilenschnittstelle (CLI). Benennen Sie Ihr Projekt, wählen Sie es aus Schlank als Framework und legen Sie die Variante auf fest JavaScript. Jetzt CD in das Projektverzeichnis und führen Sie den folgenden Befehl aus, um die Abhängigkeiten zu installieren:

npm install

Öffnen Sie nun das Projekt und im src Ordner, erstellen Sie einen hangmanArt.js Datei und löschen Sie die Vermögenswerte Und lib Ordner. Löschen Sie dann den Inhalt des App.svelte Und App.css Dateien. Im App.css Datei, fügen Sie Folgendes hinzu;

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

Kopieren Sie den Inhalt der HenkerArt.js Datei aus diesem Projekt GitHub-Repository, und fügen Sie es dann in Ihr eigenes ein hangmanArt.js Datei. Sie können den Entwicklungsserver mit dem folgenden Befehl starten:

npm run dev

Definieren der Logik der Anwendung

Öffne das App.svelte Datei und erstellen Sie eine Skript Tag, der den Großteil der Logik der Anwendung enthält. Ein... kreieren Wörter Array zur Aufnahme einer Liste von Wörtern.

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

Als nächstes importieren Sie die HenkerArt Array aus dem hangmanArt.js Datei. Erstellen Sie dann eine Variable Benutzereingabe, eine Variable Zufallszahlund eine weitere Variable, die ein zufällig ausgewähltes Wort aus dem enthält Wörter Array.

Weisen Sie zu Ausgewähltes Wort zu einer anderen Variablen anfänglich. Erstellen Sie zusätzlich zu den anderen Variablen die folgenden Variablen: übereinstimmen, Nachricht, HangmanStages, Und Ausgabe. Initialisieren Sie die Ausgabevariable mit einer Folge von Bindestrichen, abhängig von der Länge der Ausgewähltes Wort. Weisen Sie zu HenkerArt Array zum hangmanStages 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;

Hinzufügen der notwendigen Funktionalitäten

Während der Spieler eine Vermutung anstellt, möchten Sie ihm die Ausgabe zeigen. Diese Ausgabe hilft dem Spieler zu erkennen, ob er richtig oder falsch geraten hat. Erstellen Sie eine Funktion generierenAusgabe um die Aufgabe zu bewältigen, eine Ausgabe zu generieren.

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

Für jeden Tipp, den der Spieler abgibt, muss das Programm feststellen, ob es der richtige Tipp ist. Erstelle ein auswerten Funktion, die die Henker-Zeichnung in die nächste Phase verschiebt, wenn der Spieler falsch rät, oder die aufruft generierenAusgabe Funktion, wenn der Spieler richtig geraten hat.

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

Und damit haben Sie die Logik der Anwendung vervollständigt. Sie können nun mit der Definition des Markups fortfahren.

Definieren des Markups des Projekts

Ein... kreieren hauptsächlich Element, das jedes andere Element im Spiel beherbergt. Im hauptsächlich Element, definiere ein h1 Element mit dem Text Henker.

<h1class="title">
 Hangman
h1>

Erstellen Sie einen Slogan und rendern Sie die Henkerfigur im ersten Schritt nur dann, wenn die Anzahl der Elemente im hangmanStages Array ist größer als 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}

Anschließend implementieren Sie die Logik, um eine Meldung anzuzeigen, die angibt, ob der Spieler gewonnen oder verloren hat:

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

Als nächstes rendern Sie die Ausgabe und ein Formular, um Eingaben vom Benutzer zu akzeptieren. Die Ausgabe und das Formular sollen nur angezeigt werden, wenn das Element mit der Klasse „Nachricht“ nicht auf dem Bildschirm ist.

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

Jetzt können Sie der Anwendung den passenden Stil hinzufügen. Ein... kreieren Stil Tag und fügen Sie darin Folgendes hinzu:

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

Sie haben mit Svelte ein Henkerspiel erstellt. Gut gemacht!

Was macht Svelte so erstaunlich?

Svelte ist ein Framework, das relativ einfach zu erlernen und zu erlernen ist. Da die Logiksyntax von Svelte der von Vanilla JavaScript ähnelt, ist es die perfekte Wahl, wenn Sie eine möchten Framework, das komplexe Dinge wie Reaktivität aufnehmen kann und Ihnen gleichzeitig die Möglichkeit gibt, mit Vanilla zu arbeiten JavaScript. Für komplexere Projekte können Sie SvelteKit verwenden – ein Meta-Framework, das als Antwort von Svelte auf Next.js entwickelt wurde.