Πρέπει να έχετε παίξει το παιχνίδι Wordle. Δείτε πώς μπορείτε να δημιουργήσετε τη δική σας έκδοση του Wordle χρησιμοποιώντας JavaScript.

Το Worlde είναι ένα δημοφιλές παιχνίδι που ταρακούνησε τον κόσμο στις αρχές του 2022. Η αναδημιουργία του παιχνιδιού Wordle ή τουλάχιστον η κατασκευή μιας απλούστερης έκδοσης του είναι κάτι που θα πρέπει να εξετάσουν οι προγραμματιστές που είναι νέοι στη JavaScript.

Πώς λειτουργεί το Wordle

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

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

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

instagram viewer

Ρύθμιση του διακομιστή ανάπτυξης

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

Το έργο χρησιμοποιεί το Εργαλείο κατασκευής Vite μέσω του Διεπαφή γραμμής εντολών (CLI) για σκαλωσιές. Βεβαιωθείτε ότι έχετε εγκαταστήσει το Yarn στον υπολογιστή σας επειδή είναι γενικά ταχύτερο από το Node Package Manager (NPM). Ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή:

νήμα δημιουργία βιτέ

Αυτό θα δημιουργήσει ένα νέο έργο Vite. Το πλαίσιο πρέπει να είναι Βανίλια και η παραλλαγή πρέπει να οριστεί σε JavaScript. Τώρα τρέξτε:

νήμα

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

νήματα dev

Ρύθμιση του παιχνιδιού και σχεδίαση του πληκτρολογίου

Ανοίξτε το έργο στον επεξεργαστή κώδικα, διαγράψτε τα περιεχόμενα του main.js αρχείο και βεβαιωθείτε ότι ο φάκελος του έργου σας μοιάζει με αυτό:

Τώρα, αντικαταστήστε τα περιεχόμενα του index.html αρχείο με τον ακόλουθο κωδικό λέβητα:

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8" />
<Σύνδεσμοςσχετ="εικόνισμα"τύπος="image/svg+xml"href="/vite.svg" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0" />
<τίτλος>JS Wordleτίτλος>
κεφάλι>


<σώμα>
<divταυτότητα="εφαρμογή">
<div>
<h1>Wordle Cloneh1>
<divταυτότητα="έλεγχοι">
<κουμπίταυτότητα="restart-btn">Επανάληψηκουμπί>
<κουμπίταυτότητα="show-btn">Δείξε την απάντησηκουμπί>
div>
<divταυτότητα="μήνυμα">Παρακαλώ περιμένετε. Το παιχνίδι φορτώνει...div>
div>
<divταυτότητα="διεπαφή">
<divταυτότητα="σανίδα">div>
<divτάξη="πληκτρολόγιο">div>
div>
div>
<γραφήτύπος="μονάδα μέτρησης"src="/main.js">γραφή>
σώμα>
html>

Για το CSS, μεταβείτε στο αποθετήριο GitHub αυτού του έργου και αντιγράψτε τα περιεχόμενα του στυλ.css αρχείο στο δικό σας στυλ.css αρχείο.

Τώρα, στο τερματικό, εγκαταστήστε το πακέτο Toastify NPM εκτελώντας την ακόλουθη εντολή:

νήμα προσθέτω φρυγανιά -S

Το Toastify είναι ένα δημοφιλές πακέτο JavaScript που σας επιτρέπει να εμφανίζετε ειδοποιήσεις στον χρήστη. Στη συνέχεια, στο main.js αρχείο, εισάγετε το στυλ.css αρχείο και το φρυγανίζω χρησιμότητα.

εισαγωγή"./style.css"
εισαγωγή Φρυγανίστε από'toastify-js'

Ορίστε τις ακόλουθες μεταβλητές για να διευκολύνετε την αλληλεπίδραση με τα στοιχεία DOM:

αφήνω σανίδα = έγγραφο.querySelector("#σανίδα");
αφήνω μήνυμα = έγγραφο.querySelector("#μήνυμα");
αφήνω κλειδιά = "QWERTYUIOPASDFGHJKLZXCVBNM".διαίρεση("");
αφήνω επανεκκίνησηBtn = έγγραφο.querySelector("#restart-btn");
αφήνω showBtn = έγγραφο.querySelector("#show-btn");
showBtn.setAttribute("άτομα με ειδικές ανάγκες", "αληθής");
keys.push("Backspace");
αφήνω πληκτρολόγιο = έγγραφο.querySelector(".πληκτρολόγιο");

Ρύθμιση του πίνακα παιχνιδιού

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

αφήνω boardContent = [
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
];
αφήνω τρέχουσαΣειρά = 0;
αφήνω τρέχον Πλαίσιο = 0;
αφήνω μυστική λέξη;

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

Για (αφήνω i = 0; i <= 5; i++) {
αφήνω σειρά = έγγραφο.createElement('div')
Για (αφήνω y = 0; y <= 4; y++) {
αφήνω κουτί = έγγραφο.createElement('σπιθαμή');
 row.appendChild (πλαίσιο);
 row.className = `σειρά-${i + 1}`
 }
 board.appendChild (σειρά);
}

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

Για να δημιουργήσετε το πληκτρολόγιο, επαναλάβετε τα πλήκτρα χρησιμοποιώντας για κάθε, δημιουργώντας ένα στοιχείο κουμπιού για κάθε καταχώρηση. Ρυθμίστε το κείμενο του κουμπιού σε Backspace αν η καταχώρηση είναι *, διαφορετικά ορίστε το στην τιμή εισαγωγής.

Αναθέστε το κλειδί κλάση στο κουμπί και ορίστε το κλειδί δεδομένων χαρακτηριστικό στην κεφαλαία τιμή εισαγωγής. Στη συνέχεια, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί που καλεί τη συνάρτηση insertKey με την κεφαλαία τιμή εισαγωγής.

keys.forEach(είσοδος => {
αφήνω κλειδί = έγγραφο.createElement("κουμπί");
αν (είσοδος "*") {
 κλειδί.innerText = "Backspace";
 } αλλού {
 key.innerText = καταχώρηση;
 }
 key.className = "κλειδί";
 key.setAttribute("κλειδί δεδομένων", entry.toUpperCase());
 key.addEventListener("Κάντε κλικ", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
έγγραφο.querySelector(`button[data-key=${entry.toUpperCase()}]`).θολούρα();
 }, 250)
 })
 keyboard.append (κλειδί);
})

Λήψη νέας λέξης από ένα API

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

λειτουργίαgetNewWord() {
ασυγχρονισμόςλειτουργίαfetchWord() {
δοκιμάστε {
συνθ ανταπόκριση = αναμένω φέρω(" https://random-word-api.herokuapp.com/word? μήκος = 5");
αν (response.ok) {
συνθ δεδομένα = αναμένω answer.json();
ΕΠΙΣΤΡΟΦΗ δεδομένα;
 } αλλού {
βολήνέοςΛάθος("Κάτι πήγε στραβά!")
 }
 } σύλληψη (λάθος) {
 message.innerText = `Κάτι πήγε στραβά. \n${λάθος}\nΕλέγξτε τη σύνδεσή σας στο διαδίκτυο.`;
 }
 }
 fetchWord().τότε(δεδομένα => {
 SecretWord = δεδομένα[0].toUpperCase();
 κύριος();
 })
}

Στο μπλοκ κώδικα παραπάνω, το κύριος Η λειτουργία εκτελείται εάν η τυχαία λέξη έχει ληφθεί με επιτυχία. Ορίστε α κύριος λειτουργία ακριβώς κάτω από το getNewWord λειτουργία:

λειτουργίακύριος(){
}

Για να διαμορφώσετε κάθε πλαίσιο στον πίνακα, θα χρειαστείτε μια λίστα με όλα τα πλαίσια σε κάθε σειρά. Δηλώστε μια μεταβλητή, σειρά που αρπάζει όλες τις σειρές στο DOM. Επίσης, ρυθμίστε το μήνυμα στυλ εμφάνισης σε κανένας:

 rows.forEach(σειρά => [...row.children].forEach(παιδί => boxes.push (παιδί)))
 boxes.forEach((κουτί) => {
 box.classList.add("αδειάζω");
 })
 μήνυμα.στυλ.εμφάνιση = "κανένας";

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

παράθυρο.addEventListener('keyup', (ε) => {
αν (isValidCharacter (e.key)) {
έγγραφο.querySelector(`button[data-key=${e.key.toUpperCase()}]`).Συγκεντρώνω();
έγγραφο.querySelector(`button[data-key=${e.key.toUpperCase()}]`).Κάντε κλικ();
 setTimeout(() => {
έγγραφο.querySelector(`button[data-key=${e.key.toUpperCase()}]`).θολούρα();
 }, 250)
 }
 })

Σύμφωνα με το keyup πρόγραμμα ακρόασης συμβάντων, ρυθμίστε προγράμματα ακρόασης συμβάντων για δύο κουμπιά: showBtn και επανεκκίνησηBtn. Όταν ο παίκτης κάνει κλικ showBtn, εμφανίστε μια ειδοποίηση τοστ με την τιμή του μυστική λέξη μεταβλητός.

Κάνοντας κλικ επανεκκίνησηBtn επαναφορτώνει τη σελίδα. Επίσης, φροντίστε να συμπεριλάβετε ένα is ValidCharacter λειτουργία για να ελέγξετε εάν ένα κλειδί είναι έγκυρος χαρακτήρας.

 showBtn.addEventListener('Κάντε κλικ', () => {
 Φρυγανιά ({
 κείμενο: `Εντάξει καλά! η απάντηση είναι ${secretWord}`,
 διάρκεια: 2500,
 όνομα τάξης: "συναγερμός",
 }).showToast();
 })
 restartBtn.addEventListener('Κάντε κλικ', () => {
 location.reload();
 })
λειτουργίαis ValidCharacter(val) {
ΕΠΙΣΤΡΟΦΗ (val.match(/^[a-zA-Z]+$/) && (val.μήκος 1 || val "Backspace"))
 }

Εξω από το κύριος λειτουργία, δημιουργία α renderBox λειτουργούν και παρέχουν τρεις παραμέτρους: σειρά (ο αριθμός σειράς), κουτί (το ευρετήριο πλαισίου εντός της σειράς), και δεδομένα (το περιεχόμενο του κειμένου προς ενημέρωση).

λειτουργίαrenderBox(σειρά, πλαίσιο, δεδομένα) {
 [...document.querySelector(`.σειρά-${σειρά}`).children][box].innerText = δεδομένα;
}

Χειρισμός εισόδου πληκτρολογίου με λειτουργία

Για να χειριστείτε τις βασικές εισόδους και να ενημερώσετε τον πίνακα, δημιουργήστε ένα insertKey λειτουργία με α κλειδί παράμετρος. Η συνάρτηση πρέπει να συμπεριφέρεται σύμφωνα με την παράμετρο που έχει περάσει.

λειτουργίαinsertKey(κλειδί) {
αν (κλειδί "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
αν (currentBox !== 0) {
 τρέχονΠλαίσιο--;
 renderBox (currentRow + 1, τρέχον πλαίσιο, "");
 }
 } αλλού {
αν (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = κλειδί;
 renderBox (currentRow + 1, τρέχονΠλαίσιο, κλειδί);
 currentBox++;
 }
αν (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 αξιολόγηση (currentRow, κλειδί).
 τρέχον Πλαίσιο = 0;
 τρέχουσαΣειρά++;
 }
 }
}

Αξιολόγηση της εικασίας του παίκτη

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

λειτουργίααξιολογώ(σειρά){
}

Κάθε παιχνίδι έχει ένα Δείξε την απάντηση κουμπί που εμφανίζεται μόνο αφού ο χρήστης κάνει τέσσερις εικασίες. Έτσι, στη συνάρτηση, εφαρμόστε τη λειτουργικότητα που κάνει ακριβώς αυτό:

αν (τρέχουσα σειρά 4) {
 showBtn.removeAttribute('άτομα με ειδικές ανάγκες')
}

Στη συνέχεια, ορίστε τη μεταβλητή εικασίας και μια μεταβλητή απάντησης που ελέγχει εάν τα γράμματα είναι στη σωστή θέση.

αφήνω guess = boardContent[row].join('').toUpperCase();
αφήνω απάντηση = secretWord.split("");

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

Εάν το πλακίδιο είναι στη λέξη αλλά σε λάθος σημείο, το πλακίδιο είναι κίτρινο και τέλος, το γκρι χρώμα είναι για πλακάκια που δεν υπάρχουν στη λέξη.

αφήνω χρώματα = μαντέψτε
 .διαίρεση("")
 .χάρτης((επιστολή, idx) => γράμμα == απάντηση[idx]; (απάντηση[idx] = ψευδής): γράμμα)
 .χάρτης((επιστολή, idx) =>
 γράμμα
? (idx = απάντηση.indexOf (γράμμα)) < 0
? "γκρί"
: (απάντηση[idx] = "κίτρινος")
: "πράσινος"
);

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

Στη συνέχεια, ορίστε α setColors λειτουργία που μπορεί να λάβει το χρωματιστά συστοιχίστε ως παράμετρο και χρωματίστε κατάλληλα τα πλακίδια:

λειτουργίαsetColor(χρωματιστά) {
 χρώματα.forEach((χρώμα, ευρετήριο) => {
έγγραφο.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = χρώμα;
έγγραφο.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).στυλ.χρώμα= "μαύρος";
 [...document.querySelector(`.σειρά-${σειρά + 1}`).children][index].style.backgroundColor = χρώμα;
 })
}

Το παιχνίδι έχει πλέον ολοκληρωθεί. Το μόνο που έχετε να κάνετε τώρα είναι να καλέσετε το getNewWord λειτουργούν και είστε έτοιμοι.

getNewWord();

Συγχαρητήρια, μόλις αναδημιουργήσατε το Wordle.

Ανεβάστε τις δεξιότητές σας στο JavaScript στο επόμενο επίπεδο αναδημιουργώντας παιχνίδια

Η εκμάθηση μιας νέας γλώσσας ως αρχάριος δεν είναι εύκολη. Η αναδημιουργία παιχνιδιών όπως το Tic-tac-toe, το Hangman και το Wordle σε μια γλώσσα όπως η JavaScript, μπορεί να βοηθήσει τους αρχάριους να κατακτήσουν τις έννοιες της γλώσσας εφαρμόζοντάς τις στην πράξη.