Πώς να δημιουργήσετε ένα παιχνίδι Hangman με το Svelte

Το Svelte είναι ένα ριζοσπαστικό νέο πλαίσιο JavaScript που κερδίζει τις καρδιές των προγραμματιστών. Η απλή σύνταξή του το καθιστά εξαιρετικό υποψήφιο για αρχάριους που θέλουν να βουτήξουν στον κόσμο των πλαισίων JavaScript. Ένας από τους καλύτερους τρόπους μάθησης είναι η κατασκευή, επομένως σε αυτόν τον οδηγό, θα μάθετε πώς να χρησιμοποιείτε τις δυνατότητες που προσφέρει η Svelte για να δημιουργήσετε ένα απλό παιχνίδι δήμιο.

Πώς λειτουργεί ο Κρεμάλα

Το Hangman είναι ένα παιχνίδι εικασίας λέξεων που παίζεται συνήθως μεταξύ δύο ατόμων, όπου ο ένας παίκτης σκέφτεται μια λέξη και ο άλλος παίκτης προσπαθεί να μαντέψει αυτή τη λέξη γράμμα προς γράμμα. Ο στόχος για τον παίκτη που μαντεύει είναι να βρει τη μυστική λέξη πριν ξεμείνει από εσφαλμένες εικασίες.

Όταν ξεκινά το παιχνίδι, ο οικοδεσπότης επιλέγει μια μυστική λέξη. Το μήκος της λέξης συνήθως υποδεικνύεται στον άλλο παίκτη (μαντευτή) χρησιμοποιώντας παύλες. Καθώς ο μαντευτής κάνει λανθασμένες εικασίες, σχεδιάζονται πρόσθετα μέρη του δήμιου, προχωρώντας από το κεφάλι, το σώμα, τα χέρια και τα πόδια.

Ο μαντευτής κερδίζει το παιχνίδι αν καταφέρει να μαντέψει όλα τα γράμματα της λέξης πριν ολοκληρωθεί η σχεδίαση της φιγούρας του stickman. Το Hangman είναι ένας πολύ καλός τρόπος για να δοκιμάσετε το λεξιλόγιο, τη συλλογιστική και τις δεξιότητες αφαίρεσης.

Διαμόρφωση Αναπτυξιακού Περιβάλλοντος

Για να θέσετε σε λειτουργία το Svelte στο μηχάνημά σας, είναι σκόπιμο να συνδέσετε το έργο με το Vite.js. Για να χρησιμοποιήσετε το Vite, βεβαιωθείτε ότι έχετε Node Package Manager (NPM) και Το Node.js είναι εγκατεστημένο στον υπολογιστή σας. Μπορείτε επίσης να χρησιμοποιήσετε έναν εναλλακτικό διαχειριστή πακέτων όπως το Yarn. Τώρα, ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή:

npm create vite

Αυτό θα ξεκινήσει ένα νέο έργο με το Vite Διεπαφή γραμμής εντολών (CLI). Ονομάστε το έργο σας, επιλέξτε Λυγερή ως πλαίσιο και ορίστε την παραλλαγή σε JavaScript. Τώρα CD στον κατάλογο του έργου και εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε τις εξαρτήσεις:

npm install

Τώρα, ανοίξτε το έργο και στο src φάκελο, δημιουργία α hangmanArt.js αρχείο και διαγράψτε το περιουσιακά στοιχεία και lib ντοσιέ. Στη συνέχεια διαγράψτε τα περιεχόμενα του App.svelte και App.css αρχεία. Στο App.css αρχείο, προσθέστε τα ακόλουθα.

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

Αντιγράψτε τα περιεχόμενα του δήμιοςΤέχνη.js αρχείο από αυτό το έργο Αποθετήριο GitHubκαι μετά επικολλήστε το στο δικό σας hangmanArt.js αρχείο. Μπορείτε να ξεκινήσετε τον διακομιστή ανάπτυξης με την ακόλουθη εντολή:

npm run dev

Καθορισμός της Λογικής της Εφαρμογής

Ανοιξε το App.svelte αρχείο και δημιουργία α γραφή ετικέτα που θα περιέχει το μεγαλύτερο μέρος της λογικής της εφαρμογής. Δημιουργώ ένα λόγια πίνακα για να κρατήσει μια λίστα λέξεων.

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

Στη συνέχεια, εισαγάγετε το δήμιοςΤέχνη συστοιχία από το hangmanArt.js αρχείο. Στη συνέχεια, δημιουργήστε μια μεταβλητή userInput, μια μεταβλητή τυχαίος αριθμόςκαι μια άλλη μεταβλητή για να κρατήσει μια τυχαία επιλεγμένη λέξη από το λόγια πίνακας.

Αναθέστε το επιλεγμένη λέξη σε άλλη μεταβλητή αρχικός. Εκτός από τις άλλες μεταβλητές, δημιουργήστε τις ακόλουθες μεταβλητές: αγώνας, μήνυμα, δήμιος στάδια, και παραγωγή. Αρχικοποιήστε τη μεταβλητή εξόδου με μια σειρά από παύλες, ανάλογα με το μήκος του επιλεγμένη λέξη. Αναθέστε το δήμιοςΤέχνη συστοιχία στο δήμιος Stages μεταβλητός.

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;

Προσθήκη των απαραίτητων λειτουργιών

Καθώς ο παίκτης κάνει μια εικασία, θέλετε να δείξετε την έξοδο στον παίκτη. Αυτή η έξοδος θα βοηθήσει τον παίκτη να καταλάβει αν έχει κάνει τη σωστή ή λάθος εικασία. Δημιουργήστε μια συνάρτηση παραγωγήΕξόδου για να χειριστεί το έργο της παραγωγής μιας εξόδου.

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

Για κάθε εικασία που υποβάλλει ο παίκτης, το πρόγραμμα θα πρέπει να καθορίσει εάν είναι η σωστή εικασία. Δημιουργήστε ένα αξιολογώ λειτουργία που θα μετακινήσει το σχέδιο του δήμιου στο επόμενο στάδιο εάν ο παίκτης μαντέψει λάθος ή καλέσει το παραγωγήΕξόδου λειτουργία εάν ο παίκτης κάνει μια σωστή εικασία.

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

Και με αυτό, έχετε ολοκληρώσει τη λογική της εφαρμογής. Τώρα μπορείτε να προχωρήσετε στον καθορισμό της σήμανσης.

Καθορισμός της Σήμανσης του Έργου

Δημιουργώ ένα κύριος στοιχείο που θα φιλοξενήσει κάθε άλλο στοιχείο του παιχνιδιού. Στο κύριος στοιχείο, ορίστε ένα h1 στοιχείο με το κείμενο Δήμιος.

<h1class="title">
 Hangman
h1>

Δημιουργήστε ένα tagline και αποδώστε τη φιγούρα του δήμιου στο πρώτο στάδιο μόνο εάν ο αριθμός των στοιχείων στο δήμιος Stages ο πίνακας είναι μεγαλύτερος από 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}

Στη συνέχεια, εφαρμόστε τη λογική για να εμφανίσετε ένα μήνυμα που υποδεικνύει εάν ο παίκτης έχει κερδίσει ή χάσει:

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

Στη συνέχεια, αποδώστε την έξοδο και μια φόρμα για να αποδεχτείτε τα δεδομένα από τον χρήστη. Η έξοδος και η φόρμα θα πρέπει να εμφανίζονται μόνο εάν το στοιχείο με την κλάση "μήνυμα" δεν εμφανίζεται στην οθόνη.

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

Τώρα, μπορείτε να προσθέσετε το κατάλληλο στυλ στην εφαρμογή. Δημιουργώ ένα στυλ ετικέτα και σε αυτό, προσθέστε τα εξής:

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

Έχετε δημιουργήσει ένα παιχνίδι δήμιο με το Svelte. Καλή δουλειά!

Τι κάνει το Svelte εκπληκτικό;

Το Svelte είναι ένα πλαίσιο που είναι σχετικά εύκολο να το βρεις και να το μάθεις. Επειδή η λογική σύνταξη του Svelte είναι παρόμοια με τη Vanilla JavaScript, αυτό το καθιστά την τέλεια επιλογή εάν θέλετε πλαίσιο που μπορεί να περιέχει πολύπλοκα πράγματα όπως η αντιδραστικότητα, ενώ σας δίνει την ευκαιρία να εργαστείτε με τη Vanilla JavaScript. Για πιο σύνθετα έργα, μπορείτε να χρησιμοποιήσετε το SvelteKit—ένα μετα-πλαίσιο που αναπτύχθηκε ως απάντηση του Svelte στο Next.js.