כיצד לבנות שיבוט Wordle עם JavaScript

Worlde הוא משחק פופולרי שכבש את העולם בסערה בתחילת 2022. יצירה מחדש של משחק Wordle או לפחות בניית גרסה פשוטה יותר שלו היא משהו שמפתחים חדשים ב-JavaScript צריכים לשקול.

איך Wordle עובד

ב-Wordle, יש מילה סודית בת חמש אותיות. לשחקן יש שישה ניסיונות ועליו לנחש מילים שונות בנות חמש אותיות כדי לראות עד כמה הן קרובות למילה הסודית.

לאחר שהשחקן שולח ניחוש, Wordle משתמש בצבעים כדי לומר לשחקן כמה הם קרובים למילה הסודית. אם לאות יש את הצבע צהוב, זה אומר שהאות נמצאת במילה הסודית, אבל במיקום הלא נכון.

הצבע הירוק אומר למשתמש שהאות נמצאת במילה הסודית ובמיקום הנכון, בעוד הצבע האפור אומר לשחקן שהאות אינה במילה.

הגדרת שרת הפיתוח

הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT. אם אתה רוצה להסתכל על גרסה חיה של הפרויקט הזה, אתה יכול לבדוק את זה הַדגָמָה.

הפרויקט משתמש ב- כלי בניית Vite דרך ה ממשק שורת פקודה (CLI) עבור פיגומים. ודא שמותקן Yarn במחשב שלך מכיוון שהוא בדרך כלל מהיר יותר מה- מנהל חבילות צומת (NPM). פתח את הטרמינל שלך והפעל את הפקודה הבאה:

חוט ליצור vite

פעולה זו תיצור פרויקט Vite חדש. המסגרת צריכה להיות וניל ויש להגדיר את הגרסה ל JavaScript. עכשיו הפעל:

חוּט

זה יתקין את כל התלות הדרושים כדי לגרום לפרויקט לעבוד. לאחר התקנה זו, הפעל את הפקודה הבאה כדי להפעיל את שרת הפיתוח:

מפתח חוט

הגדרת המשחק ועיצוב המקלדת

פתח את הפרויקט בעורך הקוד שלך, נקה את התוכן של main.js קובץ, וודא שתיקיית הפרויקט שלך נראית כך:

כעת, החלף את התוכן של index.html קובץ עם קוד ה-boilerplate הבא:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8" />
<קישורrel="סמל"סוּג="image/svg+xml"href="/vite.svg" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0" />
<כותרת>JS Wordleכותרת>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<div>
<h1>Wordle Cloneh1>
<divתְעוּדַת זֶהוּת="בקרות">
<לַחְצָןתְעוּדַת זֶהוּת="הפעל מחדש-btn">שידור חוזרלַחְצָן>
<לַחְצָןתְעוּדַת זֶהוּת="show-btn">תראה תשובהלַחְצָן>
div>
<divתְעוּדַת זֶהוּת="הוֹדָעָה">המתן בבקשה. המשחק נטען...div>
div>
<divתְעוּדַת זֶהוּת="מִמְשָׁק">
<divתְעוּדַת זֶהוּת="גלשן">div>
<divמעמד="מקלדת">div>
div>
div>
<תַסרִיטסוּג="מודול"src="/main.js">תַסרִיט>
גוּף>
html>

עבור ה-CSS, עברו למאגר GitHub של הפרויקט הזה והעתיקו את התוכן של style.css קובץ לתוך שלך style.css קוֹבֶץ.

כעת, בטרמינל, התקן את חבילת Toastify NPM על ידי הפעלת הפקודה הבאה:

חוט להוסיף toastify -S

Toastify היא חבילת JavaScript פופולרית המאפשרת לך להציג התראות למשתמש. לאחר מכן, ב- main.js קובץ, ייבא את style.css הקובץ וה- להקפיץ תוֹעֶלֶת.

יְבוּא"./style.css"
יְבוּא טוסטיפיי מ'toastify-js'

הגדר את המשתנים הבאים כדי להקל על האינטראקציה עם רכיבי ה-DOM:

לתת לוח = מסמך.querySelector("#גלשן");
לתת הודעה = מסמך.querySelector("#הוֹדָעָה");
לתת מפתחות = "QWERTYUIOPASDFGHJKLZXCVBNM".לְפַצֵל("");
לתת restartBtn = מסמך.querySelector("#restart-btn");
לתת showBtn = מסמך.querySelector("#show-btn");
showBtn.setAttribute("נָכֶה", "נָכוֹן");
keys.push("מקש לחזור אחורה");
לתת מקלדת = מסמך.querySelector(".מקלדת");

הגדרת לוח המשחק

מכיוון ש-Wordle הוא משחק שבו המשתמש צריך לנחש מילה בת חמש אותיות בשישה ניסיונות, הגדר משתנה בשם boardContent שמחזיק מערך של שישה מערכים. לאחר מכן הגדר את המשתנים currentRow ו currentBox כדי להקל על המעבר boardContent.

לתת 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],
];
לתת currentRow = 0;
לתת currentBox = 0;
לתת מילה סודית;

כדי לעבד את הלוח עם חמש תיבות בכל אחת משש השורות באמצעות רכיבי HTML, השתמש בלולאות מקוננות כדי לבצע איטרציה וליצור את האלמנטים. לבסוף, צרף אותם ללוח.

ל (לתת אני = 0; אני <= 5; i++) {
לתת שורה = מסמך‎.createElement('div')
ל (לתת y = 0; y <= 4; y++) {
לתת קופסה = מסמך‎.createElement('לְהַקִיף');
 row.appendChild (תיבה);
 row.className = `שורה-${i + 1}`
 }
 board.appendChild (שורה);
}

הוספת המקלדת והאזנה לקלט מקלדת

כדי ליצור את המקלדת, חזור על המקשים באמצעות לכל אחד, יצירת רכיב לחצן עבור כל ערך. הגדר את הטקסט של הכפתור ל מקש לחזור אחורה אם הערך הוא *, אחרת הגדר אותו לערך הכניסה.

הקצה את מַפְתֵחַ מחלקה ללחצן, והגדר את מפתח נתונים תכונה לערך הכניסה באותיות רישיות. לאחר מכן, הוסף מאזין אירועי קליק לכפתור הקורא לפונקציה insertKey עם ערך הכניסה באותיות רישיות.

keys.forEach(כְּנִיסָה => {
לתת מפתח = מסמך‎.createElement("לַחְצָן");
אם (כְּנִיסָה "*") {
 key.innerText = "מקש לחזור אחורה";
 } אַחֵר {
 key.innerText = כניסה;
 }
 key.className = "מַפְתֵחַ";
 key.setAttribute("מפתח נתונים", entry.toUpperCase());
 key.addEventListener("נְקִישָׁה", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
מסמך.querySelector(`button[data-key=${entry.toUpperCase()}]`).לְטַשׁטֵשׁ();
 }, 250)
 })
 keyboard.append (מפתח);
})

קבלת מילה חדשה מ-API

כאשר המשתמש טוען לראשונה את המשחק, המשחק אמור להביא מילה חדשה בת חמש אותיות מה- מילה אקראית ממשק API. מילה זו מאוחסנת לאחר מכן ב- מילה סודית מִשְׁתַנֶה.

פוּנקצִיָהgetNewWord() {
אסינכרוןפוּנקצִיָהfetchWord() {
לְנַסוֹת {
const תגובה = לְהַמתִין לְהָבִיא(" https://random-word-api.herokuapp.com/word? אורך=5 אינץ');
אם (response.ok) {
const נתונים = לְהַמתִין response.json();
לַחֲזוֹר נתונים;
 } אַחֵר {
לזרוקחָדָשׁשְׁגִיאָה("משהו השתבש!")
 }
 } לתפוס (שגיאה) {
 message.innerText = `משהו השתבש. \n${error}\nבדוק את חיבור האינטרנט שלך.`;
 }
 }
 fetchWord().then(נתונים => {
 secretWord = נתונים[0].toUpperCase();
 רָאשִׁי();
 })
}

בבלוק הקוד למעלה, ה- רָאשִׁי הפונקציה פועלת אם המילה האקראית מאוחזרת בהצלחה. תגדיר א רָאשִׁי לתפקד ממש מתחת ל getNewWord פוּנקצִיָה:

פוּנקצִיָהרָאשִׁי(){
}

כדי לסגנן כל תיבה על הלוח, תזדקק לרשימה של כל התיבות בכל שורה. הכרזה על משתנה, שׁוּרָה שתופס את כל השורות ב-DOM. כמו כן, הגדר את הוֹדָעָה סגנון להציג ל אף אחד:

 rows.forEach(שׁוּרָה => [...row.children].forEach(יֶלֶד => boxes.push (ילד)))
 boxes.forEach((קופסא) => {
 box.classList.add("ריק");
 })
 message.style.display = "אף אחד";

לאחר מכן, הוסף א מפתח למעלה מאזין אירועים לאובייקט החלון ולבדוק אם המפתח ששוחרר חוקי. אם תקף, התמקד בלחצן המתאים, הדמי לחיצה וטשטוש לאחר עיכוב של 250ms:

חַלוֹן.addEventListener('מפתח למעלה', (ה) => {
אם (isValidCharacter (e.key)) {
מסמך.querySelector(`button[data-key=${e.key.toUpperCase()}]`).מוֹקֵד();
מסמך.querySelector(`button[data-key=${e.key.toUpperCase()}]`).נְקִישָׁה();
 setTimeout(() => {
מסמך.querySelector(`button[data-key=${e.key.toUpperCase()}]`).לְטַשׁטֵשׁ();
 }, 250)
 }
 })

תחת מפתח למעלה מאזין אירועים, הגדר מאזינים לאירועים עבור שני לחצנים: showBtn ו הפעל מחדש את Btn. כאשר הנגן לוחץ showBtn, הצג הודעת טוסט עם הערך של מילה סודית מִשְׁתַנֶה.

לחיצה הפעל מחדש את Btn טוען מחדש את הדף. כמו כן, ודא שאתה כולל א isValidCharacter פונקציה כדי לבדוק אם מפתח הוא תו חוקי.

 showBtn.addEventListener('נְקִישָׁה', () => {
 Toastify({
 טֶקסט: `בסדר בסדר! התשובה היא ${secretWord}`,
 מֶשֶׁך: 2500,
 שם כיתה: "עֵרָנִי",
 }).showToast();
 })
 restartBtn.addEventListener('נְקִישָׁה', () => {
 location.reload();
 })
פוּנקצִיָהisValidCharacter(val) {
לַחֲזוֹר (val.match(/^[a-zA-Z]+$/) && (val.length 1 || val "מקש לחזור אחורה"))
 }

מחוץ ל רָאשִׁי פונקציה, צור א renderBox לתפקד ולספק שלושה פרמטרים: שׁוּרָה (מספר השורה), קופסא (אינדקס התיבה בתוך השורה), ו נתונים (תוכן הטקסט לעדכון).

פוּנקצִיָהrenderBox(שורה, תיבה, נתונים) {
 [...document.querySelector(`.שורה-${row}`).children][box].innerText = data;
}

טיפול בקלט מקלדת עם פונקציה

כדי לטפל בכניסות המפתח וכדי לעדכן את הלוח, צור insertKey לתפקד עם א מַפְתֵחַ פָּרָמֶטֶר. הפונקציה צריכה להתנהג לפי הפרמטר שעבר.

פוּנקצִיָהinsertKey(מַפְתֵחַ) {
אם (מַפְתֵחַ "מקש לחזור אחורה".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
אם (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } אַחֵר {
אם (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = מפתח;
 renderBox (currentRow + 1, currentBox, key);
 currentBox++;
 }
אם (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evaluate (currentRow, key);
 currentBox = 0;
 currentRow++;
 }
 }
}

הערכת הניחוש של השחקן

ליצור להעריך פונקציה שמקבלת פרמטר שורה. פונקציה זו אחראית להערכת הניחוש של השחקן.

פוּנקצִיָהלהעריך(שׁוּרָה){
}

לכל משחק יש א תראה תשובה כפתור המופיע רק לאחר שהמשתמש ביצע ארבעה ניחושים. אז, בפונקציה, יישם את הפונקציונליות שעושה בדיוק את זה:

אם (שורה נוכחית 4) {
 showBtn.removeAttribute('נָכֶה')
}

לאחר מכן הגדר את משתנה הניחוש ומשתנה תשובה שבודק אם האותיות נמצאות במיקום הנכון.

לתת guess = boardContent[row].join('').toUpperCase();
לתת answer = secretWord.split("");

אלגוריתם צביעת האריחים יהיה שימושי כאן. זכור שאריח או אות צריכים להיות ירוקים אם הם נמצאים במילה ובמקום הנכון.

אם האריח נמצא במילה אבל במקום הלא נכון, האריח צהוב ולבסוף, הצבע האפור מיועד לאריחים שאינם במילה.

לתת צבעים = ניחוש
 .לְפַצֵל("")
 .מַפָּה((מכתב, idx) => אות == תשובה[idx]? (תשובה[idx] = שֶׁקֶר): מכתב)
 .מַפָּה((מכתב, idx) =>
 מִכְתָב
? (idx = answer.indexOf (אות)) < 0
? "אפור"
: (תשובה[idx] = "צהוב")
: "ירוק"
);

בלוק הקוד הנתון לעיל מבצע השוואה בין אלמנט אחר אלמנט בין לְנַחֵשׁ מערך ואת תשובה מַעֲרָך. בהתבסס על תוצאות השוואה זו, הקוד מעדכן את צבעים מַעֲרָך.

לאחר מכן, הגדר את א setColors פונקציה שיכולה לקלוט את צבעים מערך כפרמטר וצבע את האריחים כראוי:

פוּנקצִיָהsetColor(צבעים) {
 colors.forEach((צבע, אינדקס) => {
מסמך.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = צבע;
מסמך.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.color= "שָׁחוֹר";
 [...document.querySelector(`.שורה-${שורה + 1}`).children][index].style.backgroundColor = color;
 })
}

המשחק הושלם כעת. כל מה שאתה צריך לעשות עכשיו זה להתקשר ל getNewWord לתפקד, ואתה מוכן ללכת.

getNewWord();

מזל טוב, זה עתה יצרת מחדש את Wordle.

קח את כישורי JavaScript שלך לשלב הבא על ידי יצירה מחדש של משחקים

ללמוד שפה חדשה בתור מתחיל זה לא קל. יצירה מחדש של משחקים כמו Tic-tac-toe, Hangman ו-Wordle בשפה כמו JavaScript, יכולה לעזור למתחילים לשלוט במושגי השפה על ידי מימושם.