Hoe een Wordle-kloon te bouwen met JavaScript

Worlde is een populaire game die begin 2022 de wereld stormenderhand veroverde. Het opnieuw maken van het Wordle-spel of het in ieder geval bouwen van een eenvoudigere versie ervan is iets dat ontwikkelaars die nieuw zijn in JavaScript zouden moeten overwegen.

Hoe Wordle werkt

In Wordle is er een geheim woord van vijf letters. De speler heeft zes pogingen en moet verschillende woorden van vijf letters raden om te zien hoe dicht ze bij het geheime woord zijn.

Nadat de speler een gok heeft ingediend, gebruikt Wordle kleuren om de speler te vertellen hoe dicht ze bij het geheime woord zijn. Als een letter de kleur geel heeft, betekent dit dat de letter in het geheime woord staat, maar op de verkeerde plaats.

De groene kleur vertelt de gebruiker dat de letter in het geheime woord en op de juiste plaats staat, terwijl de grijze kleur de speler vertelt dat de letter niet in het woord staat.

De ontwikkelingsserver instellen

De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie. Als je een live versie van dit project wilt zien, kun je dit bekijken demo.

Het project maakt gebruik van de Vite bouwtool via de Opdrachtregelinterface (CLI) voor steigers. Zorg ervoor dat je Yarn op je computer hebt geïnstalleerd, want het is over het algemeen sneller dan het Knooppuntpakketbeheerder (NPM). Open uw terminal en voer de volgende opdracht uit:

garen creëren vite

Hiermee wordt een nieuw Vite-project gemaakt. Het kader zou moeten zijn Vanille en de variant moet worden ingesteld op javascript. Voer nu uit:

garen

Hiermee worden alle afhankelijkheden geïnstalleerd die nodig zijn om het project te laten werken. Voer na deze installatie de volgende opdracht uit om de ontwikkelingsserver te starten:

garen ontwikkelaar

Het spel opzetten en het toetsenbord ontwerpen

Open het project in uw code-editor, wis de inhoud van het main.js bestand en zorg ervoor dat uw projectmap er als volgt uitziet:

Vervang nu de inhoud van het index.html bestand met de volgende boilerplate-code:

html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8" />
<koppelingrel="icoon"type="afbeelding/svg+xml"href="/vite.svg" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0" />
<titel>JS Wordletitel>
hoofd>
<lichaam>
<divID kaart="app">
<div>
<h1>Wordle-kloonh1>
<divID kaart="controles">
<knopID kaart="herstart-btn">Herhalingknop>
<knopID kaart="show-btn">Toon het antwoordknop>
div>
<divID kaart="bericht">Even geduld aub. Het spel wordt geladen...div>
div>
<divID kaart="koppel">
<divID kaart="bord">div>
<divklas="toetsenbord">div>
div>
div>
<scripttype="module"src="/main.js">script>
lichaam>
html>

Ga voor de CSS naar de GitHub Repository van dit project en kopieer de inhoud van het stijl.css bestand in uw eigen stijl.css bestand.

Installeer nu in de terminal het Toastify NPM-pakket door de volgende opdracht uit te voeren:

garen toevoegen toastify -S

Toastify is een populair JavaScript-pakket waarmee u waarschuwingen aan de gebruiker kunt tonen. Vervolgens in de main.js bestand, importeer het stijl.css bestand en de roosteren nutsvoorziening.

importeren"./stijl.css"
importeren roosteren van'toastify-js'

Definieer de volgende variabelen om interactie met de DOM-elementen gemakkelijker te maken:

laten bord = document.querySelector("#bord");
laten bericht = document.querySelector("#bericht");
laten sleutels = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
laten herstartBtn = document.querySelector("#herstart-btn");
laten showBtn = document.querySelector("#show-btn");
showBtn.setAttribute("gehandicapt", "WAAR");
toetsen.push("Backspace");
laten toetsenbord = document.querySelector(".toetsenbord");

Opstelling van het speelbord

Aangezien Wordle een spel is waarbij de gebruiker in zes pogingen een woord van vijf letters moet raden, definieert u een variabele genaamd boardInhoud dat een array van zes arrays bevat. Definieer vervolgens de variabelen huidigeRij En huidigeBox om het oversteken te vergemakkelijken boardInhoud.

laten bordInhoud = [
 [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],
];
laten huidigeRij = 0;
laten huidigeBox = 0;
laten geheim woord;

Om het bord met vijf vakken in elk van de zes rijen weer te geven met behulp van HTML-elementen, gebruikt u geneste lussen om de elementen te herhalen en te maken. Voeg ze ten slotte toe aan het bord.

voor (laten ik = 0; ik <= 5; ik++) {
laten rij = document.createElement('div')
voor (laten j = 0; j <= 4; y++) {
laten doos = document.createElement('span');
 rij.appendChild (vak);
 rij.className = `rij-${i + 1}`
 }
 board.appendChild (rij);
}

Het toetsenbord toevoegen en luisteren naar toetsenbordinvoer

Om het toetsenbord te maken, herhaalt u de toetsen met behulp van voor elk, waarbij voor elk item een ​​knopelement wordt gemaakt. Stel de tekst van de knop in op Backspace als de invoer is *, stel het anders in op de invoerwaarde.

Wijs de sleutel class naar de knop en stel de datasleutel attribuut toe aan de invoerwaarde in hoofdletters. Voeg vervolgens een klikgebeurtenislistener toe aan de knop die de functie aanroept sleutel invoegen met de invoerwaarde in hoofdletters.

sleutels.voorElk(binnenkomst => {
laten sleutel = document.createElement("knop");
als (invoer "*") {
 key.innerText = "Backspace";
 } anders {
 key.innerText = invoer;
 }
 sleutel.className = "sleutel";
 sleutel.setAttribuut("gegevenssleutel", entry.toUpperCase());
 toets.addEventListener("Klik", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
document.querySelector(`knop[gegevenssleutel=${entry.toUpperCase()}]`).vervagen();
 }, 250)
 })
 toetsenbord.toevoegen (toets);
})

Een nieuw woord krijgen van een API

Wanneer de gebruiker het spel voor het eerst laadt, moet het spel een nieuw woord van vijf letters ophalen uit de Willekeurig woord API. Dit woord wordt dan opgeslagen in de geheim woord variabel.

functiehaalNieuwWord() {
asynchroonfunctiehaalWoord() {
poging {
const reactie = wachten ophalen(" https://random-word-api.herokuapp.com/word? lengte=5");
als (antwoord.ok) {
const gegevens = wachten reactie.json();
opbrengst gegevens;
 } anders {
gooiennieuwFout("Er is iets fout gegaan!")
 }
 } vangst (fout) {
 bericht.innerText = 'Er is iets misgegaan. \N${fout}\nControleer je internetverbinding.`;
 }
 }
 fetchWord().then(gegevens => {
 geheimWoord = data[0].toUpperCase();
 voornaamst();
 })
}

In het codeblok hierboven, de voornaamst functie wordt uitgevoerd als het willekeurige woord succesvol is opgehaald. Definieer een voornaamst functie direct onder de haalNieuwWord functie:

functievoornaamst(){
}

Om elk vakje op het bord te stylen, heb je een lijst nodig van alle vakjes in elke rij. Declareer een variabele, rij dat pakt alle rijen in de DOM. Stel ook de bericht stijl weergeven geen:

 rijen.voorElk(rij => [...rij.kinderen].forEach(kind => dozen.push (kind)))
 vakken.voorElk((doos) => {
 box.classList.add("leeg");
 })
 message.style.display = "geen";

Voeg vervolgens een toe intoetsen gebeurtenislistener naar het vensterobject en controleer of de vrijgegeven sleutel geldig is. Indien geldig, focus op de overeenkomstige knop, simuleer een klik en vervaag deze na een vertraging van 250 ms:

raam.addEventListener('sleutel omhoog', (e) => {
als (isValidCharacter (e.sleutel)) {
document.querySelector(`knop[gegevenssleutel=${e.key.toUpperCase()}]`).focus();
document.querySelector(`knop[gegevenssleutel=${e.key.toUpperCase()}]`).Klik();
 setTimeout(() => {
document.querySelector(`knop[gegevenssleutel=${e.key.toUpperCase()}]`).vervagen();
 }, 250)
 }
 })

Onder de intoetsen gebeurtenislistener, stel gebeurtenislisteners in voor twee knoppen: showBtn En herstartBtn. Als de speler klikt showBtn, geef een toastmelding weer met de waarde van de geheim woord variabel.

Klikken herstartBtn laadt de pagina opnieuw. Zorg er ook voor dat u een isValidCharacter functie om te controleren of een sleutel een geldig teken is.

 showBtn.addEventListener('Klik', () => {
 roosteren({
 tekst: 'Oké prima! het antwoord is ${geheimWoord}`,
 duur: 2500,
 naam van de klasse: "waarschuwen",
 }).showToast();
 })
 herstartBtn.addEventListener('Klik', () => {
 locatie.herladen();
 })
functieisValidCharacter(val) {
opbrengst (val.match(/^[a-zA-Z]+$/) && (val.lengte 1 || val "Backspace"))
 }

Buiten de voornaamst functie, maak een renderBox functie en geef drie parameters: rij (het rijnummer), doos (de vakindex binnen de rij), en gegevens (de tekstinhoud die moet worden bijgewerkt).

functierenderBox(rij, vak, gegevens) {
 [...document.querySelector(`.rij-${rij}`).children][box].innerText = data;
}

Omgaan met toetsenbordinvoer met een functie

Maak een sleutel invoegen functie met een sleutel parameter. De functie moet zich gedragen volgens de doorgegeven parameter.

functiesleutel invoegen(sleutel) {
als (sleutel "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
als (currentBox !== 0) {
 huidigeBox--;
 renderBox (currentRow + 1, huidigeBox, "");
 }
 } anders {
als (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = sleutel;
 renderBox (currentRow + 1, huidigeBox, sleutel);
 huidigeBox++;
 }
als (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evalueren (currentRow, sleutel);
 huidigeBox = 0;
 huidigeRij++;
 }
 }
}

De gok van de speler evalueren

Creëer een evalueren functie die een rijparameter accepteert. Deze functie is verantwoordelijk voor het evalueren van de gok van de speler.

functieevalueren(rij){
}

Elk spel heeft een Toon het antwoord knop die pas verschijnt nadat de gebruiker vier keer heeft geraden. Implementeer dus in de functie de functionaliteit die precies dat doet:

als (huidigeRij 4) {
 showBtn.removeAttribute('gehandicapt')
}

Definieer vervolgens de gokvariabele en een antwoordvariabele die controleert of de letters op de juiste plaats staan.

laten raad = boardContent[rij].join('').naarHoofdletter();
laten antwoord = geheimWoord.split("");

Het algoritme voor het kleuren van tegels komt hier van pas. Bedenk dat een tegel of letter groen moet zijn als deze in het woord en op de juiste plek staat.

Als de tegel in het woord staat maar op de verkeerde plek, is de tegel geel en tot slot is de grijze kleur voor tegels die niet in het woord staan.

laten kleuren = raden
 .split("")
 .kaart((brief, idd) => letter == antwoord[idx]? (antwoord[idx] = vals): brief)
 .kaart((brief, idd) =>
 brief
? (idx = antwoord.indexOf (brief)) < 0
? "grijs"
: (antwoord[idx] = "geel")
: "groente"
);

Het gegeven codeblok hierboven voert een element-voor-element vergelijking uit tussen de gok array en de antwoord reeks. Op basis van de resultaten van deze vergelijking werkt de code de kleuren reeks.

Definieer vervolgens een setKleuren functie die de kleuren array als parameter en kleur de tegels op de juiste manier:

functiesetKleur(kleuren) {
 kleuren.voorElk((kleur, index) => {
document.querySelector(`knop[gegevenssleutel=${guess[index].toUpperCase()}]`).style.backgroundColor = kleur;
document.querySelector(`knop[gegevenssleutel=${guess[index].toUpperCase()}]`).stijl.kleur= "zwart";
 [...document.querySelector(`.rij-${rij + 1}`).children][index].style.backgroundColor = kleur;
 })
}

Het spel is nu voltooid. Het enige wat je nu nog hoeft te doen is bellen met de haalNieuwWord functie, en je bent klaar om te gaan.

haalNieuwWoord();

Gefeliciteerd, je hebt zojuist Wordle opnieuw gemaakt.

Til je JavaScript-vaardigheden naar een hoger niveau door games opnieuw te maken

Een nieuwe taal leren als beginner is niet eenvoudig. Door games als Tic-tac-toe, Hangman en Wordle opnieuw te maken in een taal als JavaScript, kunnen beginners de concepten van de taal onder de knie krijgen door ze in de praktijk te brengen.