Anda pasti pernah memainkan permainan Wordle. Inilah cara Anda dapat membuat Wordle versi Anda sendiri menggunakan JavaScript.

Worlde adalah game populer yang menggemparkan dunia pada awal tahun 2022. Membuat ulang game Wordle atau setidaknya membuat versi yang lebih sederhana adalah sesuatu yang harus dipertimbangkan oleh pengembang yang baru mengenal JavaScript.

Bagaimana Wordl Bekerja

Di Wordle, ada kata lima huruf rahasia. Pemain memiliki enam percobaan dan harus menebak kata lima huruf yang berbeda untuk melihat seberapa dekat mereka dengan kata rahasia.

Setelah pemain mengajukan tebakan, Wordle menggunakan warna untuk memberi tahu pemain seberapa dekat mereka dengan kata rahasia. Jika sebuah huruf berwarna kuning, berarti huruf tersebut berada dalam kata rahasia, tetapi posisinya salah.

Warna hijau memberi tahu pengguna bahwa huruf itu ada di kata rahasia dan di posisi yang benar, sedangkan warna abu-abu memberi tahu pemain bahwa huruf itu tidak ada di kata.

Menyiapkan Server Pengembangan

instagram viewer

Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung dari proyek ini, Anda dapat melihatnya demo.

Proyek ini menggunakan Alat pembuatan Vite Melalui Antarmuka Baris Perintah (CLI) untuk perancah. Pastikan Anda telah menginstal Yarn di komputer Anda karena umumnya lebih cepat daripada Manajer Paket Node (NPM). Buka terminal Anda dan jalankan perintah berikut:

benang buat vite

Ini akan membuat proyek Vite baru. Kerangka seharusnya Vanila dan varian harus disetel ke JavaScript. Sekarang jalankan:

benang

Ini akan menginstal semua dependensi yang diperlukan untuk membuat proyek berfungsi. Setelah penginstalan ini, jalankan perintah berikut untuk memulai server pengembangan:

dev benang

Menyiapkan Game dan Merancang Keyboard

Buka proyek di editor kode Anda, hapus konten main.js file, dan pastikan folder proyek Anda terlihat seperti ini:

Sekarang, ganti isi dari index.html file dengan kode boilerplate berikut:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8" />
<tautanrel="ikon"jenis="gambar/svg+xml"href="/vite.svg" />
<metanama="area pandang"isi="width=device-width, initial-scale=1.0" />
<judul>JS Wordljudul>
kepala>


<tubuh>
<divpengenal="aplikasi">
<div>
<h1>Klon Katah1>
<divpengenal="kontrol">
<tombolpengenal="restart-btn">Memutar ulangtombol>
<tombolpengenal="show-btn">Tunjukkan jawabantombol>
div>
<divpengenal="pesan">Harap tunggu. Game sedang memuat...div>
div>
<divpengenal="antarmuka">
<divpengenal="papan">div>
<divkelas="papan ketik">div>
div>
div>
<naskahjenis="modul"src="/main.js">naskah>
tubuh>
html>

Untuk CSS, buka Repositori GitHub proyek ini dan salin konten file style.css file ke milik Anda sendiri style.css mengajukan.

Sekarang, di terminal, instal paket Toastify NPM dengan menjalankan perintah berikut:

benang tambahkan toastify -S

Toastify adalah paket JavaScript populer yang memungkinkan Anda menampilkan peringatan kepada pengguna. Selanjutnya, di main.js file, impor style.css berkas dan bersulang kegunaan.

impor"./style.css"
impor Bersulang dari'bersulang-js'

Tentukan variabel berikut untuk mempermudah interaksi dengan elemen DOM:

membiarkan papan = dokumen.querySelector("#papan");
membiarkan pesan = dokumen.querySelector("#pesan");
membiarkan kunci = "QWERTYUIOPASDFGHJKLZXCVBNM".membelah("");
membiarkan restartBtn = dokumen.querySelector("#restart-btn");
membiarkan showBtn = dokumen.querySelector("#show-btn");
showBtn.setAttribute("dengan disabilitas", "BENAR");
kunci.push("Menghapus");
membiarkan papan ketik = dokumen.querySelector(".papan ketik");

Menyiapkan Papan Permainan

Karena Wordle adalah permainan di mana pengguna harus menebak kata lima huruf dalam enam percobaan, tentukan variabel yang disebut boardContent yang memegang array dari enam array. Kemudian tentukan variabelnya Baris saat ini Dan currentBox untuk memudahkan melintas boardContent.

membiarkan Konten papan = [
 [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],
];
membiarkan Baris saat ini = 0;
membiarkan kotak arus = 0;
membiarkan kata rahasia;

Untuk merender papan dengan lima kotak di masing-masing dari enam baris menggunakan elemen HTML, gunakan pengulangan bersarang untuk mengulang dan membuat elemen. Terakhir, tambahkan mereka ke papan tulis.

untuk (membiarkan saya = 0; saya <= 5; saya++) {
membiarkan baris = dokumen.createElement('div')
untuk (membiarkan y = 0; y <= 4; y++) {
membiarkan kotak = dokumen.createElement('menjangkau');
 baris.appendChild (kotak);
 baris.className = `baris-${i + 1}`
 }
 papan.appendChild (baris);
}

Menambahkan Keyboard dan Mendengarkan Input Keyboard

Untuk membuat keyboard, ulangi melalui tombol menggunakan untuk setiap, membuat elemen tombol untuk setiap entri. Setel teks tombol ke Menghapus jika entri tersebut *, jika tidak, setel ke nilai entri.

Tetapkan kunci kelas ke tombol, dan atur data-key atribut ke nilai entri huruf besar. Selanjutnya, tambahkan pendengar acara klik ke tombol yang memanggil fungsi insertKey dengan nilai entri huruf besar.

kunci.untukSetiap(pintu masuk => {
membiarkan kunci = dokumen.createElement("tombol");
jika (pintu masuk "*") {
 key.innerText = "Menghapus";
 } kalau tidak {
 key.innerText = entri;
 }
 key.className = "kunci";
 key.setAttribute("kunci data", entri.toUpperCase());
 key.addEventListener("klik", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokumen.querySelector(`tombol[kunci-data=${entry.toUpperCase()}]`).mengaburkan();
 }, 250)
 })
 keyboard.append (kunci);
})

Mendapatkan Kata Baru Dari API

Saat pengguna pertama kali memuat game, game harus mengambil kata lima huruf baru dari Kata acak API. Kata ini kemudian disimpan di kata rahasia variabel.

fungsigetNewWord() {
asinkronfungsiambilWord() {
mencoba {
const tanggapan = menunggu mengambil(" https://random-word-api.herokuapp.com/word? panjang = 5");
jika (respons.ok) {
const data = menunggu respon.json();
kembali data;
 } kalau tidak {
melemparkanbaruKesalahan("Ada yang salah!")
 }
 } menangkap (kesalahan) {
 pesan.innerText = `Ada yang tidak beres. \N${kesalahan}\nPeriksa koneksi internet Anda.`;
 }
 }
 fetchWord().kemudian(data => {
 kata rahasia = data[0].toUpperCase();
 utama();
 })
}

Di blok kode di atas, file utama fungsi berjalan jika kata acak berhasil diambil. Tentukan a utama fungsi tepat di bawah getNewWord fungsi:

fungsiutama(){
}

Untuk menata setiap kotak di papan, Anda memerlukan daftar semua kotak di setiap baris. mendeklarasikan variabel, baris yang mengambil semua baris di DOM. Juga, atur pesan gaya tampilan ke tidak ada:

 baris.untukSetiap(baris => [...baris.anak-anak].forEach(anak => kotak.push (anak)))
 kotak.untukSetiap((kotak) => {
 kotak.classList.add("kosong");
 })
 pesan.gaya.tampilan = "tidak ada";

Selanjutnya, tambahkan a keyup pendengar acara ke objek jendela dan periksa apakah kunci yang dirilis valid. Jika valid, fokuskan pada tombol yang sesuai, simulasikan klik, dan buramkan setelah jeda 250 md:

jendela.addEventListener('keyup', (e) => {
jika (isValidCharacter (e.key)) {
dokumen.querySelector(`tombol[kunci-data=${e.key.toUpperCase()}]`).fokus();
dokumen.querySelector(`tombol[kunci-data=${e.key.toUpperCase()}]`).klik();
 setTimeout(() => {
dokumen.querySelector(`tombol[kunci-data=${e.key.toUpperCase()}]`).mengaburkan();
 }, 250)
 }
 })

Di bawah keyup pendengar acara, atur pendengar acara untuk dua tombol: showBtn Dan restartBtn. Saat pemain mengklik showBtn, tampilkan pemberitahuan bersulang dengan nilai kata rahasia variabel.

Mengklik restartBtn memuat ulang halaman. Juga, pastikan Anda menyertakan file isValidCharacter fungsi untuk memeriksa apakah kunci adalah karakter yang valid.

 showBtn.addEventListener('klik', () => {
 Bersulang({
 teks: `Baiklah baiklah! jawabannya adalah ${secretWord}`,
 durasi: 2500,
 nama kelas: "peringatan",
 }).showToast();
 })
 restartBtn.addEventListener('klik', () => {
 lokasi.reload();
 })
fungsiisValidCharacter(val) {
kembali (val.cocok(/^[a-zA-Z]+$/) && (val.panjang 1 || val "Menghapus"))
 }

Di luar utama fungsi, buat a renderBox fungsi dan memberikan tiga parameter: baris (nomor baris), kotak (indeks kotak di dalam baris), dan data (isi teks yang akan diperbarui).

fungsirenderBox(baris, kotak, data) {
 [...document.querySelector(`.baris-${baris}`.anak-anak][kotak].innerText = data;
}

Menangani Input Keyboard Dengan Fungsi

Untuk menangani input kunci dan memperbarui papan, buat sebuah insertKey berfungsi dengan a kunci parameter. Fungsi harus berperilaku sesuai dengan parameter yang diteruskan.

fungsiinsertKey(kunci) {
jika (kunci "Menghapus".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
jika (Kotak sekarang !== 0) {
 kotak arus--;
 renderBox (Baris saat ini + 1, kotak saat ini, "");
 }
 } kalau tidak {
jika (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = kunci;
 renderBox (Baris saat ini + 1, kotak sekarang, kunci);
 kotak sekarang++;
 }
jika (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evaluasi (currentRow, kunci);
 kotak arus = 0;
 baris saat ini++;
 }
 }
}

Mengevaluasi Tebakan Pemain

Buat sebuah evaluasi fungsi yang menerima parameter baris. Fungsi ini bertanggung jawab untuk mengevaluasi tebakan pemain.

fungsievaluasi(baris){
}

Setiap permainan memiliki Tunjukkan jawaban tombol yang muncul hanya setelah pengguna membuat empat tebakan. Jadi, dalam fungsinya, terapkan fungsi yang melakukan hal itu:

jika (Baris saat ini 4) {
 showBtn.removeAttribute('dengan disabilitas')
}

Kemudian tentukan variabel tebakan dan variabel jawaban yang memeriksa apakah huruf berada di posisi yang benar.

membiarkan tebak = boardContent[baris].join('').toUpperCase();
membiarkan jawaban = secretWord.split("");

Algoritme pewarnaan ubin akan berguna di sini. Ingatlah bahwa ubin atau huruf harus berwarna hijau jika ada di kata dan di tempat yang benar.

Jika ubin ada di kata tetapi di tempat yang salah, ubin berwarna kuning dan terakhir, warna abu-abu untuk ubin yang tidak ada di kata.

membiarkan warna = tebakan
 .membelah("")
 .peta((surat, idx) => huruf == jawab[idx]? (jawaban[idx] = PALSU): surat)
 .peta((surat, idx) =>
 surat
? (idx = answer.indexOf (huruf)) < 0
? "abu-abu"
: (jawaban[idx] = "kuning")
: "hijau"
);

Blok kode yang diberikan di atas melakukan perbandingan elemen demi elemen antara tebakan larik dan menjawab Himpunan. Berdasarkan hasil perbandingan ini, kode memperbarui file warna Himpunan.

Selanjutnya tentukan a setColors fungsi yang dapat mengambil di warna array sebagai parameter dan warnai ubin dengan tepat:

fungsisetColor(warna) {
 warna.untukSetiap((warna, indeks) => {
dokumen.querySelector(`tombol[kunci-data=${guess[index].toUpperCase()}]`).style.backgroundColor = warna;
dokumen.querySelector(`tombol[kunci-data=${guess[index].toUpperCase()}]`).gaya.warna= "hitam";
 [...document.querySelector(`.baris-${baris + 1}`).anak-anak][indeks].style.backgroundColor = warna;
 })
}

Permainan sekarang selesai. Yang harus Anda lakukan sekarang adalah menelepon getNewWord fungsi, dan Anda baik untuk pergi.

getNewWord();

Selamat, Anda baru saja membuat ulang Wordle.

Tingkatkan Keterampilan JavaScript Anda ke Tingkat Selanjutnya dengan Membuat Ulang Game

Mempelajari bahasa baru sebagai pemula tidaklah mudah. Membuat ulang game seperti Tic-tac-toe, Hangman, dan Wordle dalam bahasa seperti JavaScript, dapat membantu pemula menguasai konsep bahasa dengan mempraktikkannya.