Devi aver giocato a Wordle. Ecco come puoi creare la tua versione di Wordle utilizzando JavaScript.

Worlde è un gioco popolare che ha preso d'assalto il mondo all'inizio del 2022. Ricreare il gioco Wordle o almeno costruirne una versione più semplice è qualcosa che gli sviluppatori che non conoscono JavaScript dovrebbero prendere in considerazione.

Come funziona Wordle

In Wordle c'è una parola segreta di cinque lettere. Il giocatore ha sei tentativi e deve indovinare diverse parole di cinque lettere per vedere quanto sono vicine alla parola segreta.

Dopo che il giocatore ha inviato un'ipotesi, Wordle usa i colori per dire al giocatore quanto sono vicini alla parola segreta. Se una lettera ha il colore giallo, significa che la lettera è nella parola segreta, ma nella posizione sbagliata.

Il colore verde dice all'utente che la lettera è nella parola segreta e nella giusta posizione, mentre il colore grigio dice al giocatore che la lettera non è nella parola.

Configurazione del server di sviluppo

instagram viewer

Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT. Se vuoi dare un'occhiata a una versione live di questo progetto, puoi dare un'occhiata a questo dimostrazione.

Il progetto utilizza il Strumento di costruzione Vite tramite il Interfaccia della riga di comando (CLI) per impalcatura. Assicurati di aver installato Yarn sul tuo computer perché è generalmente più veloce di Node Package Manager (NPM). Apri il tuo terminale ed esegui il seguente comando:

filato crea vite

Questo creerà un nuovo progetto Vite. Il quadro dovrebbe essere Vaniglia e la variante dovrebbe essere impostata su javascript. Ora esegui:

filato

Questo installerà tutte le dipendenze necessarie per far funzionare il progetto. Dopo questa installazione, esegui il seguente comando per avviare il server di sviluppo:

filo dev

Impostazione del gioco e progettazione della tastiera

Apri il progetto nel tuo editor di codice, cancella il contenuto del file principale.js file e assicurati che la cartella del tuo progetto sia simile a questa:

Ora, sostituisci il contenuto del file indice.html file con il seguente codice boilerplate:

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8" />
<collegamentorel="icona"tipo="immagine/svg+xml"href="/vita.svg" />
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0" />
<titolo>JS Wordletitolo>
Testa>


<corpo>
<divid="app">
<div>
<h1>Clone Wordleh1>
<divid="controlli">
<pulsanteid="riavvia-btn">Rigiocarepulsante>
<pulsanteid="show-btn">Mostra rispostapulsante>
div>
<divid="Messaggio">Attendere prego. Il gioco si sta caricando...div>
div>
<divid="interfaccia">
<divid="asse">div>
<divclasse="tastiera">div>
div>
div>
<copionetipo="modulo"src="/principale.js">copione>
corpo>
html>

Per il CSS, vai al repository GitHub di questo progetto e copia il contenuto del file style.css file nel tuo style.css file.

Ora, nel terminale, installa il pacchetto Toastify NPM eseguendo il seguente comando:

filato aggiungere toastify -S

Toastify è un popolare pacchetto JavaScript che ti consente di mostrare avvisi all'utente. Successivamente, nel principale.js file, importa il file style.css file e il tostare utilità.

importare"./stile.css"
importare Tostare da'toastify-js'

Definisci le seguenti variabili per facilitare l'interazione con gli elementi DOM:

permettere tavola = documento.querySelector("#asse");
permettere messaggio = documento.querySelector("#Messaggio");
permettere chiavi = "QWERTYUIOPASDFGHJKLZXCVBNM".diviso("");
permettere riavvioBtn = documento.querySelector("#restart-btn");
permettere mostraBtn = documento.querySelector("#show-btn");
showBtn.setAttribute("Disabilitato", "VERO");
tasti.push("Backspace");
permettere tastiera = documento.querySelector(".tastiera");

Allestimento del tabellone di gioco

Poiché Wordle è un gioco in cui l'utente deve indovinare una parola di cinque lettere in sei tentativi, definire una variabile chiamata boardContent che contiene un array di sei array. Quindi definire le variabili currentRow E casella corrente per facilitarne l'attraversamento boardContent.

permettere contenutoscheda = [
 [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],
];
permettere riga corrente = 0;
permettere CurrentBox = 0;
permettere parola segreta;

Per eseguire il rendering della scheda con cinque riquadri in ciascuna delle sei righe utilizzando elementi HTML, utilizzare cicli annidati per iterare e creare gli elementi. Infine, aggiungili alla lavagna.

per (permettere io = 0; io <= 5; i++) {
permettere riga = documento.createElement('div')
per (permettere e = 0; si <= 4; e++) {
permettere scatola = documento.createElement('intervallo');
 row.appendChild (casella);
 row.className = `riga-${io + 1}`
 }
 board.appendChild (riga);
}

Aggiunta della tastiera e ascolto dell'input da tastiera

Per creare la tastiera, scorrere i tasti utilizzando per ciascuno, creando un elemento pulsante per ogni voce. Imposta il testo del pulsante su Backspace se la voce è *, altrimenti impostalo sul valore della voce.

Assegna il chiave class sul pulsante e impostare il file data-chiave attributo al valore della voce maiuscola. Successivamente, aggiungi un listener di eventi click al pulsante che chiama la funzione insertKey con il valore della voce maiuscola.

keys.forEach(iscrizione => {
permettere chiave = documento.createElement("pulsante");
Se (iscrizione "*") {
 key.innerText = "Backspace";
 } altro {
 key.innerText = voce;
 }
 key.className = "chiave";
 key.setAttribute("chiave dati", entry.toUpperCase());
 key.addEventListener("clic", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
documento.querySelector(`pulsante[chiave-dati=${entry.toUpperCase()}]`).sfocatura();
 }, 250)
 })
 tastiera.append (tasto);
})

Ottenere una nuova parola da un'API

Quando l'utente carica per la prima volta il gioco, il gioco dovrebbe recuperare una nuova parola di cinque lettere dal file Parola a caso API. Questa parola viene quindi memorizzata nel file parola segreta variabile.

funzionegetNewWord() {
asincronofunzionefetchWord() {
Tentativo {
cost risposta = aspetta andare a prendere(" https://random-word-api.herokuapp.com/word? lunghezza=5");
Se (risposta.ok) {
cost dati = aspetta risposta.json();
ritorno dati;
 } altro {
gettarenuovoErrore("Qualcosa è andato storto!")
 }
 } presa (errore) {
 messaggio.innerText = `Qualcosa è andato storto. \N${errore}\nControlla la tua connessione Internet.`;
 }
 }
 fetchWord().then(dati => {
 secretWord = dati[0].toUpperCase();
 principale();
 })
}

Nel blocco di codice sopra, il principale la funzione viene eseguita se la parola casuale viene recuperata correttamente. Definisci un principale funzione proprio sotto il getNewWord funzione:

funzioneprincipale(){
}

Per dare uno stile a ogni casella sulla lavagna, avrai bisogno di un elenco di tutte le caselle in ogni riga. Dichiara una variabile, riga che afferra tutte le righe nel DOM. Inoltre, imposta il Messaggio stile di visualizzazione a nessuno:

 righe.perOgni(riga => [...row.children].forEach(bambino => scatole.push (figlio)))
 scatole.perOgni((scatola) => {
 box.classList.add("vuoto");
 })
 message.style.display = "nessuno";

Successivamente, aggiungi a keyup listener di eventi all'oggetto finestra e controlla se la chiave rilasciata è valida. Se valido, concentrati sul pulsante corrispondente, simula un clic e sfocalo dopo un ritardo di 250 ms:

finestra.addEventListener('tasto', (e) => {
Se (isValidCharacter (e.chiave)) {
documento.querySelector(`pulsante[chiave-dati=${e.key.toUpperCase()}]`).messa a fuoco();
documento.querySelector(`pulsante[chiave-dati=${e.key.toUpperCase()}]`).clic();
 setTimeout(() => {
documento.querySelector(`pulsante[chiave-dati=${e.key.toUpperCase()}]`).sfocatura();
 }, 250)
 }
 })

Sotto il keyup listener di eventi, imposta i listener di eventi per due pulsanti: showBtn E riavviaBtn. Quando il giocatore fa clic showBtn, visualizzare una notifica avviso popup con il valore di parola segreta variabile.

Cliccando riavviaBtn ricarica la pagina. Inoltre, assicurati di includere un file isValidCharacter funzione per verificare se una chiave è un carattere valido.

 showBtn.addEventListener('clic', () => {
 Toastify({
 testo: `Va bene bene! la risposta è ${parola segreta}`,
 durata: 2500,
 nome della classe: "mettere in guardia",
 }).showToast();
 })
 restartBtn.addEventListener('clic', () => {
 posizione.ricarica();
 })
funzioneisValidCharacter(val) {
ritorno (val.match(/^[a-zA-Z]+$/) && (val.lunghezza 1 || val "Backspace"))
 }

Fuori da principale funzione, creare un renderBox funzione e fornire tre parametri: riga (il numero di riga), scatola (l'indice della casella all'interno della riga), e dati (il contenuto del testo da aggiornare).

funzionerenderBox(riga, casella, dati) {
 [...document.querySelector(`.row-${riga}`).children][box].innerText = dati;
}

Gestione dell'input da tastiera con una funzione

Per gestire gli input chiave e aggiornare la scheda, creare un file insertKey funzione con A chiave parametro. La funzione dovrebbe comportarsi in base al parametro passato.

funzioneinsertKey(chiave) {
Se (chiave "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
Se (casellacorrente!== 0) {
 currentBox--;
 renderBox (riga corrente + 1, CurrentBox, "");
 }
 } altro {
Se (currentRow  boardContent[currentRow][currentBox] = chiave;
 renderBox (riga corrente + 1, currentBox, chiave);
 casella corrente++;
 }
Se (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 valutare (currentRow, chiave);
 CurrentBox = 0;
 riga corrente++;
 }
 }
}

Valutazione dell'ipotesi del giocatore

Creare un valutare funzione che accetta un parametro di riga. Questa funzione è responsabile della valutazione dell'ipotesi del giocatore.

funzionevalutare(riga){
}

Ogni gioco ha un Mostra risposta pulsante che appare solo dopo che l'utente ha fatto quattro tentativi. Quindi, nella funzione, implementa la funzionalità che fa proprio questo:

Se (currentRow 4) {
 showBtn.removeAttribute('Disabilitato')
}

Quindi definisci la variabile di ipotesi e una variabile di risposta che controlla se le lettere sono nella posizione corretta.

permettere indovina = boardContent[row].join('').toUpperCase();
permettere risposta = SecretWord.split("");

L'algoritmo di colorazione delle tessere tornerà utile qui. Ricorda che una tessera o una lettera dovrebbe essere verde se è nella parola e nel punto corretto.

Se la tessera è nella parola ma nel punto sbagliato, la tessera è gialla e, infine, il colore grigio è per le tessere che non sono nella parola.

permettere colori = indovina
 .diviso("")
 .carta geografica((lettera, idx) => lettera == risposta[idx]? (risposta[idx] = falso): lettera)
 .carta geografica((lettera, idx) =>
 lettera
? (idx = answer.indexOf (lettera)) < 0
? "grigio"
: (risposta[idx] = "giallo")
: "verde"
);

Il blocco di codice sopra indicato esegue un confronto elemento per elemento tra il file Indovinare matrice e il risposta vettore. Sulla base dei risultati di questo confronto, il codice aggiorna il file colori vettore.

Successivamente, definisci a setColors funzione che può assumere il colori array come parametro e colora le tessere in modo appropriato:

funzionesetColor(colori) {
 colori.perOgni((colore, indice) => {
documento.querySelector(`pulsante[chiave-dati=${indovina[indice].toUpperCase()}]`).style.backgroundColor = colore;
documento.querySelector(`pulsante[chiave-dati=${indovina[indice].toUpperCase()}]`).style.color= "nero";
 [...document.querySelector(`.row-${riga + 1}`).children][index].style.backgroundColor = colore;
 })
}

Il gioco è ora completo. Ora non ti resta che chiamare il getNewWord funzione e sei a posto.

getNuovaParola();

Congratulazioni, hai appena ricreato Wordle.

Porta le tue abilità JavaScript al livello successivo ricreando i giochi

Imparare una nuova lingua da principiante non è facile. Ricreare giochi come Tic-tac-toe, Hangman e Wordle in un linguaggio come JavaScript può aiutare i principianti a padroneggiare i concetti del linguaggio mettendoli in pratica.