Πώς να δημιουργήσετε ένα παιχνίδι Hangman με το Svelte
Το Svelte είναι ένα ριζοσπαστικό νέο πλαίσιο JavaScript που κερδίζει τις καρδιές των προγραμματιστών. Η απλή σύνταξή του το καθιστά εξαιρετικό υποψήφιο για αρχάριους που θέλουν να βουτήξουν στον κόσμο των πλαισίων JavaScript. Ένας από τους καλύτερους τρόπους μάθησης είναι η κατασκευή, επομένως σε αυτόν τον οδηγό, θα μάθετε πώς να χρησιμοποιείτε τις δυνατότητες που προσφέρει η Svelte για να δημιουργήσετε ένα απλό παιχνίδι δήμιο.
Πίνακας περιεχομένων
Πώς λειτουργεί ο Κρεμάλα
Το Hangman είναι ένα παιχνίδι εικασίας λέξεων που παίζεται συνήθως μεταξύ δύο ατόμων, όπου ένας παίκτης σκέφτεται μια λέξη και ο άλλος παίκτης προσπαθεί να μαντέψει αυτή τη λέξη γράμμα προς γράμμα. Ο στόχος για τον παίκτη που μαντεύει είναι να βρει τη μυστική λέξη πριν ξεμείνει από εσφαλμένες εικασίες.
Όταν ξεκινά το παιχνίδι, ο οικοδεσπότης επιλέγει μια μυστική λέξη. Το μήκος της λέξης συνήθως υποδεικνύεται στον άλλο παίκτη (μαντευτή) χρησιμοποιώντας παύλες. Καθώς ο μαντευτής κάνει λανθασμένες εικασίες, σχεδιάζονται πρόσθετα μέρη του δήμιου, προχωρώντας από το κεφάλι, το σώμα, τα χέρια και τα πόδια.
Ο μαντευτής κερδίζει το παιχνίδι αν καταφέρει να μαντέψει όλα τα γράμματα της λέξης πριν ολοκληρωθεί η σχεδίαση της φιγούρας του stickman. Το Hangman είναι ένας πολύ καλός τρόπος για να δοκιμάσετε το λεξιλόγιο, τη συλλογιστική και τις δεξιότητες αφαίρεσης.
Δημιουργία Αναπτυξιακού Περιβάλλοντος
Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT. Αν θέλετε να ρίξετε μια ματιά σε μια ζωντανή έκδοση αυτού του έργου, μπορείτε να το ελέγξετε αυτό το demo.
Για να θέσετε σε λειτουργία το Svelte στο μηχάνημά σας, είναι σκόπιμο να συνδέσετε το έργο με το Vite.js. Για να χρησιμοποιήσετε το Vite, βεβαιωθείτε ότι έχετε εγκαταστήσει το Node Package Manager (NPM) και το Node.js στον υπολογιστή σας. Μπορείτε επίσης να χρησιμοποιήσετε έναν εναλλακτικό διαχειριστή πακέτων όπως το Yarn. Τώρα, ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή:
npm create vite
Αυτό θα ξεκινήσει ένα νέο έργο με τη διεπαφή γραμμής εντολών Vite (CLI). Ονομάστε το έργο σας, επιλέξτε Svelte ως πλαίσιο και ορίστε την παραλλαγή σε 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;
}
Αντιγράψτε τα περιεχόμενα του αρχείου hangmanArt.js από αυτό το έργο Αποθετήριο GitHubκαι, στη συνέχεια, επικολλήστε το στο δικό σας αρχείο hangmanArt.js. Μπορείτε να ξεκινήσετε τον διακομιστή ανάπτυξης με την ακόλουθη εντολή:
npm run dev
Καθορισμός της Λογικής της Εφαρμογής
Ανοίξτε το αρχείο App.svelte και δημιουργήστε μια ετικέτα σεναρίου που θα περιέχει το μεγαλύτερο μέρος της λογικής της εφαρμογής. Δημιουργήστε έναν πίνακα λέξεων για να κρατήσετε μια λίστα λέξεων.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Στη συνέχεια, εισαγάγετε τον πίνακα hangmanArt από το αρχείο hangmanArt.js. Στη συνέχεια, δημιουργήστε μια μεταβλητή userInput, μια μεταβλητή randomNumber και μια άλλη μεταβλητή για να κρατήσετε μια τυχαία επιλεγμένη λέξη από τον πίνακα λέξεων.
Αντιστοιχίστε το επιλεγμένο Word σε άλλο αρχικό μεταβλητής. Εκτός από τις άλλες μεταβλητές, δημιουργήστε τις ακόλουθες μεταβλητές: αντιστοίχιση, μήνυμα, hangmanStages και έξοδος. Αρχικοποιήστε τη μεταβλητή εξόδου με μια σειρά από παύλες, ανάλογα με το μήκος της επιλεγμένης λέξης. Αντιστοιχίστε τον πίνακα hangmanArt στη μεταβλητή hangmanStages.
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;
Προσθήκη των απαραίτητων λειτουργιών
Καθώς ο παίκτης κάνει μια εικασία, θέλετε να δείξετε την έξοδο στον παίκτη. Αυτή η έξοδος θα βοηθήσει τον παίκτη να καταλάβει αν έχει κάνει τη σωστή ή λάθος εικασία. Δημιουργήστε μια συνάρτηση generateOutput για να χειριστείτε την εργασία δημιουργίας μιας εξόδου.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Για κάθε εικασία που υποβάλλει ο παίκτης, το πρόγραμμα θα πρέπει να καθορίσει εάν είναι η σωστή εικασία. Δημιουργήστε μια συνάρτηση αξιολόγησης που θα μετακινήσει το σχέδιο του δήμιου στο επόμενο στάδιο εάν ο παίκτης μαντέψει λάθος ή καλέστε τη συνάρτηση generateOutput εάν ο παίκτης κάνει μια σωστή εικασία.
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 = "";
}
Και με αυτό, έχετε ολοκληρώσει τη λογική της εφαρμογής. Τώρα μπορείτε να προχωρήσετε στον καθορισμό της σήμανσης.
Καθορισμός της Σήμανσης του Έργου
Δημιουργήστε ένα κύριο στοιχείο που θα φιλοξενεί κάθε άλλο στοιχείο του παιχνιδιού. Στο κύριο στοιχείο, ορίστε ένα στοιχείο h1 με το κείμενο Hangman.
<h1 class="title">
Hangman
</h1>
Δημιουργήστε ένα tagline και αποδώστε τη φιγούρα του δήμιου στο πρώτο στάδιο μόνο εάν ο αριθμός των στοιχείων στον πίνακα hangmanStages είναι μεγαλύτερος από 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}
Στη συνέχεια, εφαρμόστε τη λογική για να εμφανίσετε ένα μήνυμα που υποδεικνύει εάν ο παίκτης έχει κερδίσει ή χάσει:
{#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}
Στη συνέχεια, αποδώστε την έξοδο και μια φόρμα για να αποδεχτείτε τα δεδομένα από τον χρήστη. Η έξοδος και η φόρμα θα πρέπει να εμφανίζονται μόνο εάν το στοιχείο με την κλάση “μήνυμα” δεν εμφανίζεται στην οθόνη.
{#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}
Τώρα, μπορείτε να προσθέσετε το κατάλληλο στυλ στην εφαρμογή. Δημιουργήστε μια ετικέτα στυλ και σε αυτήν, προσθέστε τα εξής:
* {
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;
}
Έχετε δημιουργήσει ένα παιχνίδι δήμιο με το Svelte. Καλή δουλειά!
Τι κάνει το Svelte εκπληκτικό;
Το Svelte είναι ένα πλαίσιο που είναι σχετικά εύκολο να το βρεις και να το μάθεις. Επειδή η λογική σύνταξη του Svelte είναι παρόμοια με τη Vanilla JavaScript, αυτό το καθιστά την τέλεια επιλογή εάν θέλετε ένα πλαίσιο που μπορεί να χωρέσει πολύπλοκα πράγματα όπως η αντιδραστικότητα, ενώ σας δίνει την ευκαιρία να εργαστείτε με Vanilla JavaScript. Για πιο σύνθετα έργα, μπορείτε να χρησιμοποιήσετε το SvelteKit—ένα μετα-πλαίσιο που αναπτύχθηκε ως απάντηση του Svelte στο Next.js.