يجب أن تكون قد لعبت لعبة Wordle. إليك كيفية إنشاء نسختك الخاصة من Wordle باستخدام JavaScript.

Worlde هي لعبة شهيرة اجتاحت العالم في أوائل عام 2022. إعادة إنشاء لعبة Wordle أو على الأقل إنشاء نسخة أبسط منها أمر يجب على المطورين الجدد في JavaScript التفكير فيه.

كيف يعمل Wordle

في Wordle ، توجد كلمة سرية مكونة من خمسة أحرف. اللاعب لديه ست محاولات ويجب أن يخمن كلمات مختلفة من خمسة أحرف لمعرفة مدى قربها من الكلمة السرية.

بعد أن يقدم اللاعب تخمينًا ، يستخدم Wordle الألوان لإخبار اللاعب بمدى قربه من الكلمة السرية. إذا كان لون الحرف أصفر ، فهذا يعني أن الحرف مكتوب بالكلمة السرية ، لكن في موضع خاطئ.

يخبر اللون الأخضر المستخدم أن الحرف موجود في الكلمة السرية وفي الموضع الصحيح ، بينما يخبر اللون الرمادي اللاعب أن الحرف ليس في الكلمة.

إعداد خادم التطوير

الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT. إذا كنت تريد إلقاء نظرة على نسخة حية من هذا المشروع ، يمكنك التحقق من ذلك تجريبي.

يستخدم المشروع ملف أداة بناء Vite عبر واجهة سطر الأوامر (CLI) للسقالات. تأكد من تثبيت Yarn على جهاز الكمبيوتر الخاص بك لأنه بشكل عام أسرع من

instagram viewer
مدير حزمة العقدة (NPM). افتح Terminal وقم بتشغيل الأمر التالي:

الغزل يخلق vite

سيؤدي هذا إلى إنشاء مشروع Vite جديد. يجب أن يكون الإطار فانيلا ويجب تعيين المتغير على جافا سكريبت. شغّل الآن:

غزل

سيؤدي هذا إلى تثبيت جميع التبعيات اللازمة لإنجاح المشروع. بعد هذا التثبيت ، قم بتشغيل الأمر التالي لبدء خادم التطوير:

ديف الغزل

إعداد اللعبة وتصميم لوحة المفاتيح

افتح المشروع في محرر التعليمات البرمجية الخاص بك ، وامسح محتويات ملف main.js ، وتأكد من أن مجلد مشروعك يبدو كالتالي:

الآن ، استبدل محتويات ملف index.html ملف مع الكود المعياري التالي:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8" />
<وصلةrel="أيقونة"يكتب="صورة / svg + xml"href="/vite.svg" />
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0" />
<عنوان>شبيبة ووردعنوان>
رأس>


<جسم>
<شعبةبطاقة تعريف="برنامج">
<شعبة>
<h1>ووردل استنساخh1>
<شعبةبطاقة تعريف="ضوابط">
<زربطاقة تعريف="إعادة تشغيل- btn">اعادتهازر>
<زربطاقة تعريف="show-btn">اظهر الاجابةزر>
شعبة>
<شعبةبطاقة تعريف="رسالة">انتظر من فضلك. يتم تحميل اللعبة ...شعبة>
شعبة>
<شعبةبطاقة تعريف="واجهه المستخدم">
<شعبةبطاقة تعريف="سبورة">شعبة>
<شعبةفصل="لوحة المفاتيح">شعبة>
شعبة>
شعبة>
<النصييكتب="وحدة"src="/main.js">النصي>
جسم>
لغة البرمجة>

بالنسبة إلى CSS ، توجه إلى مستودع GitHub لهذا المشروع وانسخ محتويات ملف style.css ملف في الخاص بك style.css ملف.

الآن ، في المحطة ، قم بتثبيت حزمة Toastify NPM عن طريق تشغيل الأمر التالي:

إضافة خيوط توستيفي- S.

Toastify هي حزمة JavaScript شائعة تسمح لك بإظهار التنبيهات للمستخدم. بعد ذلك ، في main.js ملف ، قم باستيراد ملف style.css ملف و نخب جدوى.

يستورد"./style.css"
يستورد توست من"توستيفي- js"

حدد المتغيرات التالية لتسهيل التفاعل مع عناصر DOM:

يترك مجلس = وثيقة.querySelector ("#سبورة");
يترك رسالة = وثيقة.querySelector ("#رسالة");
يترك مفاتيح = "QWERTYUIOPASDFGHJKLZXCVBNM".ينقسم("");
يترك إعادة تشغيل Btn = وثيقة.querySelector ("# إعادة تشغيل- btn");
يترك showBtn = وثيقة.querySelector ("# show-btn");
showBtn.setAttribute ("عاجز", "حقيقي");
keys.push ("مسافة للخلف");
يترك لوحة المفاتيح = وثيقة.querySelector (".لوحة المفاتيح");

إعداد لوحة اللعبة

نظرًا لأن Wordle هي لعبة حيث يتعين على المستخدم تخمين كلمة مكونة من خمسة أحرف في ست محاولات ، حدد متغيرًا يسمى boardContent يحتوي على مجموعة من ستة مصفوفات. ثم حدد المتغيرات الصف الحالي و 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; أنا ++) {
يترك صف = وثيقة.createElement ("div")
ل (يترك ص = 0; ص <= 4; ص ++) {
يترك مربع = وثيقة.createElement ('فترة');
 row.appendChild (صندوق) ؛
 row.className = `صف-$ {i + 1}`
 }
 board.appendChild (صف) ؛
}

إضافة لوحة المفاتيح والاستماع إلى إدخال لوحة المفاتيح

لإنشاء لوحة المفاتيح ، كرر من خلال المفاتيح باستخدام لكل، وإنشاء عنصر زر لكل إدخال. اضبط نص الزر على مسافة للخلف إذا كان الإدخال *، وإلا قم بتعيينه على قيمة الإدخال.

عيّن ملف مفتاح فئة على الزر ، واضبط مفتاح البيانات السمة إلى قيمة إدخال الأحرف الكبيرة. بعد ذلك ، أضف مستمع حدث النقر إلى الزر الذي يستدعي الوظيفة insertKey مع قيمة الإدخال الكبيرة.

مفاتيح لكل (دخول => {
يترك مفتاح = وثيقة.createElement ("زر");
لو (دخول "*") {
 key.innerText = "مسافة للخلف";
 } آخر {
 key.innerText = إدخال ؛
 }
 key.className = "مفتاح";
 key.setAttribute ("مفتاح البيانات"، entry.toUpperCase ())؛
 key.addEventListener ("انقر", () => {
 insertKey (entry.toUpperCase ())
 setTimeout (() => {
وثيقة.querySelector (`زر [مفتاح البيانات =$ {entry.toUpperCase ()}]`). blur () ؛
 }, 250)
 })
 keyboard.append (مفتاح) ؛
})

الحصول على كلمة جديدة من API

عندما يقوم المستخدم بتحميل اللعبة لأول مرة ، يجب أن تجلب اللعبة كلمة جديدة مكونة من خمسة أحرف من ملف كلمة عشوائية API. ثم يتم تخزين هذه الكلمة في ملف كلمة السر عامل.

وظيفةالحصول على كلمة جديدة() {
غير متزامنوظيفةfetchWord() {
يحاول {
مقدار ثابت استجابة = انتظر أحضر(" https://random-word-api.herokuapp.com/word? الطول = 5 ");
لو (response.ok) {
مقدار ثابت البيانات = انتظر response.json () ؛
يعود بيانات؛
 } آخر {
يرميجديدخطأ("هناك خطأ ما!")
 }
 } يمسك (خطأ) {
 message.innerText = حدث خطأ ما. \ن$ {error}\ n تحقق من اتصالك بالإنترنت;
 }
 }
 fetchWord (). ثم (بيانات => {
 secretWord = البيانات [0].إلى الحالة العليا()؛
 رئيسي()؛
 })
}

في كتلة التعليمات البرمجية أعلاه ، ملف رئيسي تعمل الوظيفة إذا تم جلب الكلمة العشوائية بنجاح. حدد أ رئيسي تعمل مباشرة أسفل الحصول على كلمة جديدة وظيفة:

وظيفةرئيسي(){
}

لتصميم كل مربع على السبورة ، ستحتاج إلى قائمة بجميع المربعات في كل صف. نعلن متغير ، صف يملأ كل الصفوف في DOM. أيضًا ، قم بتعيين ملف رسالة نمط العرض ل لا أحد:

 من الصفوف لكل (صف => [... row.children] .forEach (طفل => box.push (طفل)))
 مربعات لكل ((صندوق) => {
 box.classList.add ("فارغ");
 })
 message.style.display = "لا أحد";

بعد ذلك ، أضف ملف مفتاح مستمع الحدث إلى كائن النافذة وتحقق مما إذا كان المفتاح الذي تم إصداره صالحًا. إذا كان هذا صحيحًا ، فركز على الزر المقابل ، وحاكي نقرة ، وقم بتشويشها بعد تأخير يبلغ 250 مللي ثانية:

نافذة او شباك.addEventListener ("مفتاح"، (هـ) => {
لو (isValidCharacter (e.key)) {
وثيقة.querySelector (`زر [مفتاح البيانات =$ {e.key.toUpperCase ()}]`).ركز()؛
وثيقة.querySelector (`زر [مفتاح البيانات =$ {e.key.toUpperCase ()}]`).انقر()؛
 setTimeout (() => {
وثيقة.querySelector (`زر [مفتاح البيانات =$ {e.key.toUpperCase ()}]`). blur () ؛
 }, 250)
 }
 })

تحت مفتاح مستمع الحدث ، قم بإعداد أدوات استماع الأحداث لزرين: showBtn و إعادة تشغيل. عندما ينقر اللاعب showBtn، اعرض إشعار نخب بقيمة كلمة السر عامل.

النقر إعادة تشغيل يعيد تحميل الصفحة. تأكد أيضًا من تضمين ملف isValidCharacter وظيفة للتحقق مما إذا كان المفتاح حرفًا صالحًا.

 showBtn.addEventListener ('انقر', () => {
 توستيفي ({
 نص: حسنا حسنا! الجواب هو $ {كلمة سر}`,
 مدة: 2500,
 الاسم: "يُحذًِر",
 }). showToast () ؛
 })
 resetBtn.addEventListener ('انقر', () => {
 location.reload () ؛
 })
وظيفةisValidCharacter(فال) {
يعود (مباراة val.match (/^[a-zA-Z]+$/) && (الطول 1 || فال "مسافة للخلف"))
 }

خارج رئيسي وظيفة ، وخلق رندر بوكس وظيفة وتوفر ثلاث معلمات: صف (رقم الصف) ، صندوق (مربع الفهرس داخل الصف) ، و بيانات (محتوى النص المراد تحديثه).

وظيفةرندر بوكس(صف ، مربع ، بيانات) {
 [... document.querySelector (".row-$ {row}`). الأطفال] [مربع] .innerText = البيانات ؛
}

التعامل مع إدخال لوحة المفاتيح مع وظيفة

للتعامل مع المدخلات الرئيسية ولتحديث اللوحة ، قم بإنشاء ملف insertKey تعمل مع أ مفتاح معامل. يجب أن تتصرف الوظيفة وفقًا للمعامل الذي تم تمريره.

وظيفةinsertKey(مفتاح) {
لو (مفتاح "مسافة للخلف".toUpperCase () && currentRow  boardContent [currentRow] [currentBox] = 0;
لو (currentBox! == 0) {
 CurrentBox-- ؛
 RenderBox (currentRow + 1، currentBox ، "");
 }
 } آخر {
لو (currentRow  boardContent [currentRow] [currentBox] = مفتاح ؛
 RenderBox (currentRow + 1، currentBox ، مفتاح) ؛
 CurrentBox ++ ؛
 }
لو (currentRow 0) {
 تقييم (currentRow، key) ؛
 CurrentBox = 0;
 CurrentRow ++ ؛
 }
 }
}

تقييم تخمين اللاعب

يخترع يقيم الوظيفة التي تقبل معلمة صف. هذه الوظيفة مسؤولة عن تقييم تخمين اللاعب.

وظيفةيقيم(صف){
}

كل لعبة لها اظهر الاجابة الذي يظهر فقط بعد أن يقوم المستخدم بأربعة تخمينات. لذلك ، في الوظيفة ، قم بتنفيذ الوظيفة التي تفعل ذلك بالضبط:

لو (الصف الحالي 4) {
 showBtn.removeAttribute ('عاجز')
}

ثم حدد متغير guess ومتغير الإجابة الذي يتحقق مما إذا كانت الأحرف في الموضع الصحيح.

يترك guess = boardContent [row] .join ('').إلى الحالة العليا()؛
يترك الإجابة = secretWord.split ("");

ستكون خوارزمية تلوين البلاط مفيدة هنا. تذكر أن البلاط أو الحرف يجب أن يكون باللون الأخضر إذا كان في الكلمة وفي المكان الصحيح.

إذا كان المربع مكتوبًا بالكلمة ولكن في مكان خاطئ ، فإن البلاط يكون أصفر وأخيراً يكون اللون الرمادي للبلاط غير الموجود في الكلمة.

يترك الألوان = تخمين
 .ينقسم("")
 .خريطة((حرف ، معرف) => letter == الجواب [idx]؟ (إجابة [idx] = خطأ شنيع): خطاب)
 .خريطة((حرف ، معرف) =>
 خطاب
? (idx = answer.indexOf (letter)) < 0
? "رمادي"
: (إجابة [idx] = "أصفر")
: "أخضر"
);

تؤدي كتلة التعليمات البرمجية الموضحة أعلاه مقارنة عنصر تلو الآخر بين يخمن مجموعة و إجابة مجموعة مصفوفة. استنادًا إلى نتائج هذه المقارنة ، يقوم الكود بتحديث ملف الألوان مجموعة مصفوفة.

بعد ذلك ، حدد ملف setColors الوظيفة التي يمكن أن تأخذ في الألوان صفيف كمعامل ولون المربعات بشكل مناسب:

وظيفةمجموعة(الألوان) {
 الألوان لكل ((مؤشر اللون) => {
وثيقة.querySelector (`زر [مفتاح البيانات =$ {guess [index] .toUpperCase ()}]`) .style.backgroundColor = اللون ؛
وثيقة.querySelector (`زر [مفتاح البيانات =$ {guess [index] .toUpperCase ()}]`). style.color = "أسود";
 [... document.querySelector (".row-$ {row + 1}`). الأطفال] [الفهرس] .style.backgroundColor = اللون ؛
 })
}

اللعبة اكتملت الان كل ما عليك فعله الآن هو الاتصال بـ الحصول على كلمة جديدة وظيفة ، وأنت على ما يرام.

getNewWord () ،

تهانينا ، لقد قمت للتو بإعادة إنشاء Wordle.

ارتق بمهارات JavaScript الخاصة بك إلى المستوى التالي من خلال إعادة إنشاء الألعاب

تعلم لغة جديدة كمبتدئ ليس بالأمر السهل. يمكن أن تساعد إعادة إنشاء ألعاب مثل Tic-tac-toe و Hangman و Wordle بلغة مثل JavaScript ، المبتدئين في إتقان مفاهيم اللغة من خلال وضعها موضع التنفيذ.