JavaScript ile Wordle Klonu Nasıl Oluşturulur

Worlde, 2022'nin başlarında dünyayı kasıp kavuran popüler bir oyundur. Wordle oyununu yeniden oluşturmak veya en azından onun daha basit bir sürümünü oluşturmak, JavaScript'te yeni olan geliştiricilerin dikkate alması gereken bir şeydir.

Wordle Nasıl Çalışır?

Wordle'de beş harfli gizli bir kelime var. Oyuncunun altı deneme hakkı vardır ve gizli kelimeye ne kadar yakın olduklarını görmek için farklı beş harfli kelimeleri tahmin etmesi gerekir.

Oyuncu bir tahminde bulunduktan sonra Wordle, oyuncuya gizli kelimeye ne kadar yakın olduklarını söylemek için renkleri kullanır. Bir harfin rengi sarı ise, harfin gizli kelimede olduğu, ancak yanlış konumda olduğu anlamına gelir.

Yeşil renk kullanıcıya harfin gizli kelimede ve doğru konumda olduğunu söylerken gri renk oyuncuya harfin kelimede olmadığını söyler.

Geliştirme Sunucusunu Kurma

proje kullanır Vite oluşturma aracı aracılığıyla Komut Satırı Arayüzü (CLI) iskele için. Yarn'ın bilgisayarınızda yüklü olduğundan emin olun, çünkü genellikle daha hızlıdır. Düğüm Paket Yöneticisi (NPM). Terminalinizi açın ve aşağıdaki komutu çalıştırın:

İplik davet oluştur

Bu, yeni bir Vite projesi yaratacaktır. çerçeve olmalıdır Vanilya ve değişken şu şekilde ayarlanmalıdır: JavaScript. Şimdi çalıştırın:

iplik

Bu, projenin çalışması için gerekli tüm bağımlılıkları kuracaktır. Bu kurulumdan sonra, geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

iplik geliştirme

Oyunu Kurmak ve Klavyeyi Tasarlamak

Projeyi kod düzenleyicinizde açın, içeriğini temizleyin ana.js dosyasını açın ve proje klasörünüzün şöyle göründüğünden emin olun:

Şimdi, içeriğini değiştirin index.html aşağıdaki ortak kod ile dosya:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8" />
<bağlantırel="simge"tip="resim/svg+xml"href="/vite.svg" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" />
<başlık>JS Kelimesibaşlık>
KAFA>
<vücut>
<divİD="uygulama">
<div>
<h1>Kelime Klonuh1>
<divİD="kontroller">
<düğmeİD="btn'yi yeniden başlat">Tekrar oynatdüğme>
<düğmeİD="show-btn">Yanıtı Gösterdüğme>
div>
<divİD="İleti">Lütfen bekleyin. Oyun yükleniyor...div>
div>
<divİD="arayüz">
<divİD="pano">div>
<divsınıf="tuş takımı">div>
div>
div>
<senaryotip="modül"kaynak="/main.js">senaryo>
vücut>
html>

CSS için, bu projenin GitHub Deposuna gidin ve içeriğini kopyalayın. stil.css kendi içine dosyala stil.css dosya.

Şimdi terminalde, aşağıdaki komutu çalıştırarak Toastify NPM paketini kurun:

iplik ekle tostify -S

Toastify, kullanıcıya uyarılar göstermenizi sağlayan popüler bir JavaScript paketidir. Sonraki, içinde ana.js dosya, içe aktar stil.css dosya ve kızartmak Yarar.

içe aktarmak"./style.css"
içe aktarmak Kızartmak itibaren'toastify-js'

DOM öğeleriyle etkileşimi kolaylaştırmak için aşağıdaki değişkenleri tanımlayın:

izin vermek tahta = belge.querySelector("#pano");
izin vermek mesaj = belge.querySelector("#İleti");
izin vermek anahtarlar = "QWERTYUIOPASDFGHJKLZXCVBNM".bölmek("");
izin vermek yenidenBtn = belge.querySelector("#restart-btn");
izin vermek showBtn = belge.querySelector("#show-btn");
showBtn.setAttribute("engelli", "doğru");
tuşlar.push("Geri al");
izin vermek klavye = belge.querySelector(".tuş takımı");

Oyun Tahtasını Kurma

Wordle, kullanıcının beş harfli bir kelimeyi altı denemede tahmin etmesi gereken bir oyun olduğundan, adında bir değişken tanımlayın. tahta içeriği altı diziden oluşan bir dizi tutar. Ardından değişkenleri tanımlayın geçerliSatır Ve akım kutusu geçişini kolaylaştırmak için tahta içeriği.

izin vermek tahtaİçeriği = [
 [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],
];
izin vermek geçerliSatır = 0;
izin vermek akım Kutusu = 0;
izin vermek Gizli kelime;

Tahtayı HTML öğelerini kullanarak altı satırın her birinde beş kutuyla oluşturmak için öğeleri yinelemek ve oluşturmak için iç içe döngüler kullanın. Son olarak, bunları panoya ekleyin.

için (izin vermek ben = 0; ben <= 5; ben++) {
izin vermek sıra = belge.createElement('div')
için (izin vermek y = 0; sen <= 4; y++) {
izin vermek kutu = belge.createElement('açıklık');
 satır.appendChild (kutu);
 satır.sınıfAdı = sıra-${ben + 1}`
 }
 board.appendChild (satır);
}

Klavye Ekleme ve Klavye Girişini Dinleme

Klavyeyi oluşturmak için, tuşları kullanarak tuşları yineleyin. her biri için, her giriş için bir düğme öğesi oluşturma. Düğmenin metnini şu şekilde ayarlayın: geri al giriş ise *, aksi halde giriş değerine ayarlayın.

ata anahtar class düğmesine basın ve veri anahtarı büyük harf giriş değerine öznitelik. Ardından, işlevi çağıran düğmeye bir tıklama olayı dinleyicisi ekleyin ekleAnahtar büyük harf giriş değeri ile.

Keys.ForEach(giriş => {
izin vermek anahtar = belge.createElement("düğme");
eğer (giriş "*") {
 key.innerText = "Geri al";
 } başka {
 key.innerText = giriş;
 }
 key.className = "anahtar";
 key.setAttribute("veri anahtarı", entry.toUpperCase());
 key.addEventListener("tıklamak", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
belge.querySelector(`düğmesi[veri-anahtarı=${entry.toUpperCase()}]`).bulanıklık();
 }, 250)
 })
 keyboard.append (anahtar);
})

Bir API'den Yeni Bir Kelime Almak

Kullanıcı oyunu ilk yüklediğinde, oyun kullanıcıdan beş harfli yeni bir kelime getirmelidir. Rastgele kelime API. Bu kelime daha sonra Gizli kelime değişken.

işlevyeni kelime almak() {
zaman uyumsuzişlevkelime getir() {
denemek {
sabit cevap = beklemek gidip getirmek(" https://random-word-api.herokuapp.com/word? uzunluk=5");
eğer (yanıt.tamam) {
sabit veri = beklemek yanıt.json();
geri dönmek veri;
 } başka {
fırlatmakyeniHata("Bir şeyler yanlış gitti!")
 }
 } yakalamak (hata) {
 mesaj.içText = “Bir şeyler ters gitti. \N${hata}\nİnternet bağlantınızı kontrol edin.`;
 }
 }
 fetchWord().then(veri => {
 gizliKelime = veri[0].toUpperCase();
 ana();
 })
}

Yukarıdaki kod bloğunda, ana rastgele sözcük başarıyla getirilirse işlev çalışır. tanımla ana işlevinin hemen altında yeni kelime almak işlev:

işlevana(){
}

Tahtadaki her kutuyu biçimlendirmek için, her satırdaki tüm kutuların bir listesine ihtiyacınız olacak. Bir değişken bildirin, sıra DOM'daki tüm satırları kapar. Ayrıca, İleti stili göster hiçbiri:

 satırlar.forEach(sıra => [...row.children].forEach(çocuk => box.push (çocuk)))
 herbiri için((kutu) => {
 box.classList.add("boş");
 })
 mesaj.tarzı.göster = "hiçbiri";

Sonra, bir ekleyin tuş takımı pencere nesnesine olay dinleyicisi ekleyin ve serbest bırakılan anahtarın geçerli olup olmadığını kontrol edin. Geçerliyse ilgili düğmeye odaklanın, bir tıklamayı simüle edin ve 250 ms'lik bir gecikmeden sonra bulanıklaştırın:

pencere.addEventListener('anahtarlama', (e) => {
eğer (isValidCharacter (e.key)) {
belge.querySelector(`düğmesi[veri-anahtarı=${e.key.toUpperCase()}]`).odak();
belge.querySelector(`düğmesi[veri-anahtarı=${e.key.toUpperCase()}]`).tıklamak();
 setTimeout(() => {
belge.querySelector(`düğmesi[veri-anahtarı=${e.key.toUpperCase()}]`).bulanıklık();
 }, 250)
 }
 })

Altında tuş takımı olay dinleyicisi, iki düğme için olay dinleyicileri kurun: gösterBtn Ve yeniden başlatBtn. Oyuncu tıkladığında gösterBtndeğeriyle bir tost bildirimi görüntüler. Gizli kelime değişken.

tıklama yeniden başlatBtn sayfayı yeniden yükler. Ayrıca, eklediğinizden emin olun. isGeçerliKarakter bir tuşun geçerli bir karakter olup olmadığını kontrol etme işlevi.

 showBtn.addEventListener('tıklamak', () => {
 Kızartmak({
 metin: Pekala, tamam! cevap ${secretWord}`,
 süre: 2500,
 sınıf adı: "uyarı",
 }).showToast();
 })
 restartBtn.addEventListener('tıklamak', () => {
 konum.yeniden yükle();
 })
işlevisGeçerliKarakter(val) {
geri dönmek (val.match(/^[a-zA-Z]+$/) && (değer.uzunluk 1 || val "Geri al"))
 }

Dışında ana işlev, oluştur renderBox işlev görür ve üç parametre sağlar: sıra (satır numarası), kutu (satır içindeki kutu dizini) ve veri (güncellenecek metin içeriği).

işlevrenderBox(satır, kutu, veri) {
 [...document.querySelector(.sıra-${sıra}`).children][box].innerText = veri;
}

Bir İşlevle Klavye Girişini İşleme

Tuş girişlerini işlemek ve panoyu güncellemek için bir ekleAnahtar ile işlev anahtar parametre. İşlev, geçirilen parametreye göre davranmalıdır.

işlevekleAnahtar(anahtar) {
eğer (anahtar "Geri al".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
eğer (akım Kutusu !== 0) {
 akımKutu--;
 renderBox (geçerli Satır + 1akım Kutusu, "");
 }
 } başka {
eğer (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = anahtar;
 renderBox (geçerli Satır + 1, currentBox, anahtar);
 akım Kutusu++;
 }
eğer (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 değerlendir (currentRow, anahtar);
 akım Kutusu = 0;
 currentRow++;
 }
 }
}

Oyuncunun Tahminini Değerlendirmek

Oluşturduğunuz bir değerlendirmek bir satır parametresini kabul eden işlev. Bu işlev, oyuncunun tahminini değerlendirmekten sorumludur.

işlevdeğerlendirmek(sıra){
}

Her oyunun bir Yanıtı Göster yalnızca kullanıcı dört tahmin yaptıktan sonra görünen düğme. Bu nedenle, işlevde, tam da bunu yapan işlevi uygulayın:

eğer (geçerli Satır 4) {
 showBtn.removeAttribute('engelli')
}

Ardından tahmin değişkenini ve harflerin doğru konumda olup olmadığını kontrol eden bir cevap değişkenini tanımlayın.

izin vermek tahmin = boardContent[sıra].join('').toUpperCase();
izin vermek cevap = gizliKelime.split("");

Döşeme boyama algoritması burada kullanışlı olacaktır. Kelimenin içinde ve doğru yerdeyse, bir karo veya harfin yeşil olması gerektiğini hatırlayın.

Karo kelimede ama yanlış yerdeyse, karo sarıdır ve son olarak gri renk kelimede olmayan karolar içindir.

izin vermek renkler = tahmin
 .bölmek("")
 .harita((mektup, idx) => mektup == cevap[idx]? (cevap[idx] = YANLIŞ): mektup)
 .harita((mektup, idx) =>
 mektup
? (idx = answer.indexOf (harf)) < 0
? "gri"
: (cevap[idx] = "sarı")
: "yeşil"
);

Yukarıda verilen kod bloğu, aşağıdakiler arasında öğe bazında bir karşılaştırma gerçekleştirir: tahmin etmek dizi ve cevap sıralamak. Bu karşılaştırmanın sonuçlarına göre kod, renkler sıralamak.

Ardından, bir tanımlayın setRenkler alabilen fonksiyon renkler dizisini bir parametre olarak seçin ve döşemeleri uygun şekilde renklendirin:

işlevrenk ayarla(renkler) {
 renkler.her biri için((renk, indeks) => {
belge.querySelector(`düğmesi[veri-anahtarı=${guess[index].toUpperCase()}]`).style.backgroundColor = renk;
belge.querySelector(`düğmesi[veri-anahtarı=${guess[index].toUpperCase()}]`).style.color= "siyah";
 [...document.querySelector(.sıra-${sıra + 1}`).children][index].style.backgroundColor = renk;
 })
}

Oyun şimdi tamamlandı. Şimdi yapmanız gereken tek şey aramak yeni kelime almak işlev ve gitmeye hazırsınız.

getNewWord();

Tebrikler, az önce Wordle'ı yeniden yarattınız.

Oyunları Yeniden Oluşturarak JavaScript Becerilerinizi Bir Sonraki Seviyeye Taşıyın

Yeni başlayan biri olarak yeni bir dil öğrenmek kolay değildir. Tic-tac-toe, Adam Asmaca ve Wordle gibi oyunları JavaScript gibi bir dilde yeniden oluşturmak, yeni başlayanların dilin kavramlarını uygulamaya koyarak ustalaşmasına yardımcı olabilir.