Cara Membuat Klon Wordle Dengan JavaScript
Table of content:
- Bagaimana Wordl Bekerja
- Menyiapkan Server Pengembangan
- Menyiapkan Game dan Merancang Keyboard
- Menyiapkan Papan Permainan
- Menambahkan Keyboard dan Mendengarkan Input Keyboard
- Mendapatkan Kata Baru Dari API
- Menangani Input Keyboard Dengan Fungsi
- Mengevaluasi Tebakan Pemain
- Tingkatkan Keterampilan JavaScript Anda ke Tingkat Selanjutnya dengan Membuat Ulang Game
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.
Baca Juga:
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
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 build Vite melalui Command Line Interface (CLI) untuk perancah. Pastikan Anda telah menginstal Yarn di komputer Anda karena umumnya lebih cepat daripada Node Package Manager (NPM). Buka terminal Anda dan jalankan perintah berikut:
yarn create vite
Ini akan membuat proyek Vite baru. Kerangka seharusnya Vanila dan varian harus disetel ke JavaScript. Sekarang jalankan:
yarn
Ini akan menginstal semua dependensi yang diperlukan untuk membuat proyek berfungsi. Setelah penginstalan ini, jalankan perintah berikut untuk memulai server pengembangan:
yarn dev 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:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Wordle</title>
</head>
<body>
<div id="app">
<div>
<h1>Wordle Clone</h1>
<div id="controls">
<button id="restart-btn">Replay</button>
<button id="show-btn">Show Answer</button>
</div>
<div id="message">Please wait. The Game is loading...</div>
</div>
<div id="interface">
<div id="board"></div>
<div class="keyboard"></div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</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:
yarn add 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.
import "./style.css"
import Toastify from 'toastify-js'
Tentukan variabel berikut untuk memudahkan interaksi dengan elemen DOM:
let board = document.querySelector("#board");
let message = document.querySelector("#message");
let keys = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
let restartBtn = document.querySelector("#restart-btn");
let showBtn = document.querySelector("#show-btn");
showBtn.setAttribute("disabled", "true");
keys.push("Backspace");
let keyboard = document.querySelector(".keyboard");
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.
let 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],
];
let currentRow = 0;
let currentBox = 0;
let secretWord;
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.
for (let i = 0; i <= 5; i++) {
let row = document.createElement('div')
for (let y = 0; y <= 4; y++) {
let box = document.createElement('span');
row.appendChild(box);
row.className = `row-${i + 1}`
}
board.appendChild(row);
} 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.
keys.forEach(entry => {
let key = document.createElement("button");
if (entry === "*") {
key.innerText = "Backspace";
} else {
key.innerText = entry;
}
key.className = "key";
key.setAttribute("data-key", entry.toUpperCase());
key.addEventListener("click", () => {
insertKey(entry.toUpperCase())
setTimeout(() => {
document.querySelector(`button[data-key=${entry.toUpperCase()}]`).blur();
}, 250)
})
keyboard.append(key);
})
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.
function getNewWord() {
async function fetchWord() {
try {
const response = await fetch("https://random-word-api.herokuapp.com/word?length=5");
if (response.ok) {
const data = await response.json();
return data;
} else {
throw new Error("Something went wrong!")
}
} catch (error) {
message.innerText = `Something went wrong. \n${error}\nCheck your internet connection.`;
}
}
fetchWord().then(data => {
secretWord = data[0].toUpperCase();
main();
})}
Di blok kode di atas, file utama fungsi berjalan jika kata acak berhasil diambil. Tentukan a utama fungsi tepat di bawah getNewWord fungsi:
function main(){}
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:
rows.forEach(row => [...row.children].forEach(child => boxes.push(child)))
boxes.forEach((box) => {
box.classList.add("empty");
})
message.style.display = "none";
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:
window.addEventListener('keyup', (e) => {
if (isValidCharacter(e.key)) {
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).focus();
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).click();
setTimeout(() => {
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).blur();
}, 250)
}
})
Di bawah keyup pendengar acara, atur pendengar acara untuk dua tombol: showBtn Dan restartBtn. Saat pemain mengklik showBtntampilkan 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('click', () => {
Toastify({
text: `Alright fine! the answer is ${secretWord}`,
duration: 2500,
className: "alert",
}).showToast();
}) restartBtn.addEventListener('click', () => {
location.reload();
})
function isValidCharacter(val) {
return (val.match(/^[a-zA-Z]+$/) && (val.length === 1 || val === "Backspace"))
}
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).
function renderBox(row, box, data) {
[...document.querySelector(`.row-${row}`).children][box].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.
function insertKey(key) {
if (key === "Backspace".toUpperCase() && currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = 0;
if (currentBox !== 0) {
currentBox--;
renderBox(currentRow + 1, currentBox, "");
}
} else {
if (currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = key;
renderBox(currentRow + 1, currentBox, key);
currentBox++;
}
if (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
evaluate(currentRow, key);
currentBox = 0;
currentRow++;
}
}
} Mengevaluasi Tebakan Pemain
Buat sebuah evaluasi fungsi yang menerima parameter baris. Fungsi ini bertanggung jawab untuk mengevaluasi tebakan pemain.
function evaluate(row){}
Setiap permainan memiliki Tunjukkan jawaban tombol yang muncul hanya setelah pengguna membuat empat tebakan. Jadi, dalam fungsinya, terapkan fungsi yang melakukan hal itu:
if (currentRow === 4) {
showBtn.removeAttribute('disabled')
}
Kemudian tentukan variabel tebakan dan variabel jawaban yang memeriksa apakah huruf berada di posisi yang benar.
let guess = boardContent[row].join('').toUpperCase();
let answer = 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.
let colors = guess
.split("")
.map((letter, idx) => letter == answer[idx] ? (answer[idx] = false) : letter)
.map((letter, idx) =>
letter
? (idx = answer.indexOf(letter)) < 0
? "grey"
: (answer[idx] = "yellow")
: "green"
);
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:
function setColor(colors) {
colors.forEach((color, index) => {
document.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = color;
document.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.color= "black";
[...document.querySelector(`.row-${row + 1}`).children][index].style.backgroundColor = color;
})
}
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.
Artikel Terkait
