قم بإنشاء لعبة Tic-Tac-Toe ثنائية اللاعبين باستخدام JavaScript و HTML و CSS

Tic-tac-toe هي لعبة شائعة تستخدم شبكة 3 × 3. الهدف من اللعبة هو أن تكون أول لاعب يضع ثلاثة رموز في صف مستقيم أفقي أو رأسي أو قطري.

يمكنك إنشاء لعبة Tic-tac-toe يتم تشغيلها في متصفح ويب باستخدام HTML و CSS و JavaScript. يمكنك استخدام HTML لإضافة المحتوى الذي يحتوي على شبكة 3 × 3 ، و CSS لإضافة بعض الأنماط لتصميم اللعبة.

يمكنك بعد ذلك استخدام JavaScript لوظائف اللعبة. يتضمن ذلك وضع الرموز ، والتناوب بين اللاعبين ، وتحديد الفائز.

كيفية إنشاء واجهة المستخدم للعبة Tic-Tac-Toe

يمكنك قراءة وتنزيل الكود المصدري الكامل لهذه اللعبة من موقعها مستودع جيثب.

Tic-tac-toe هي واحدة من العديد من الألعاب التي يمكنك القيام بها عند تعلم كيفية البرمجة. من الجيد ممارسة لغة أو بيئة جديدة ، مثل محرك تطوير لعبة PICO-8.

لإنشاء لعبة Tic-tac-toe تعمل في مستعرض ويب ، ستحتاج إلى إضافة HTML لمحتوى الصفحة. يمكنك بعد ذلك تصميم هذا باستخدام CSS.

1. قم بإنشاء ملف جديد يسمى "index.html".
2. داخل "index.html" ، أضف البنية الأساسية لملف HTML:
   instagram viewer

   لغة البرمجة>
   <لغة البرمجةلانج="en-US">
   <رأس>
   <عنوان>لعبة تيك تاك توعنوان>
   رأس>
   <جسم>
   
   جسم>
   لغة البرمجة>

3. داخل علامة HTML body ، أضف جدولاً يحتوي على ثلاثة صفوف ، مع ثلاث خلايا في كل صف:

   <شعبةفصل="حاوية">
   <طاولة>
   <آر>
   <tdبطاقة تعريف="1">td>
   <tdبطاقة تعريف="2">td>
   <tdبطاقة تعريف="3">td>
   آر>
   <آر>
   <tdبطاقة تعريف="4">td>
   <tdبطاقة تعريف="5">td>
   <tdبطاقة تعريف="6">td>
   آر>
   <آر>
   <tdبطاقة تعريف="7">td>
   <tdبطاقة تعريف="8">td>
   <tdبطاقة تعريف="9">td>
   آر>
   طاولة>
   شعبة>

4. في نفس المجلد مثل ملف HTML الخاص بك ، قم بإنشاء ملف جديد يسمى "styles.css".
5. داخل ملف CSS ، أضف بعض الأنماط إلى شبكتك 3 في 3:

   طاولة {
   انهيار الحدود: ينهار;
   هامِش: 0 آلي;
   }
   td {
   عرض: 100مقصف;
   ارتفاع: 100مقصف;
   محاذاة النص: مركز;
   محاذاة عمودية: وسط;
   حدود: 1مقصفصلبأسود;
   }

6. اربط ملف CSS بملف HTML عن طريق إضافته إلى علامة الرأس:

   <وصلةrel="ورقة الأنماط"يكتب="text / css"href="styles.css">

كيف تأخذ المنعطفات إضافة الرموز إلى لوحة اللعبة

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

يمكنك إضافة هذه الوظيفة باستخدام JavaScript.

1. في نفس المجلد مثل ملفات HTML و CSS ، قم بإنشاء ملف JavaScript يسمى "script.js".
2. اربط ملف JavaScript بملف HTML عن طريق إضافة البرنامج النصي إلى أسفل علامة النص الأساسي:

   <جسم>
    الكود الخاص بك هنا 
   <النصيsrc="script.js">النصي>
   جسم>

3. داخل ملف JavaScript ، أضف سلسلة لتمثيل رمز اللاعب. يمكن أن يكون هذا إما "X" أو "O". بشكل افتراضي ، سيضع اللاعب الأول علامة "X":

   يترك playerSymbol = "X";

4. أضف متغيرًا آخر لتتبع ما إذا كانت اللعبة قد انتهت أم لا:

   يترك انتهت اللعبة = خطأ شنيع

5. تحتوي كل خلية في جدول HTML على معرف بين 1 و 9. لكل خلية في الجدول ، أضف مستمعًا للأحداث يتم تشغيله عندما ينقر المستخدم على الخلية:

   ل (يترك أنا = 1; أنا <= 9; أنا ++) {
   وثيقة.getElementById (i.toString ()). addEventListener (
   "انقر", 
   وظيفة() {
   
    }
    );
   }

6. داخل مستمع الحدث ، قم بتغيير HTML الداخلي لعرض الرمز الحالي. تأكد من استخدام جمل JavaScript الشرطي للتأكد أولاً من أن الخلية فارغة وأن اللعبة لم تنته بعد:

   لو (هذا.innerHTML "" &&! gameEnded) {
   هذا.innerHTML = playerSymbol؛
   }

7. أضف فئة إلى عنصر HTML لتصميم الرمز الذي سيظهر على الشبكة. سيكون اسم فئات CSS إما "X" أو "O" ، اعتمادًا على الرمز:

   هذا.classList.add (playerSymbol.toLowerCase ()) ؛

8. داخل ملف "styles.css" ، أضف هاتين الفئتين الجديدتين للرموز "X" و "O". سيظهر الرمزان "X" و "O" بألوان مختلفة:

   .x {
   لون: أزرق;
   حجم الخط: 80مقصف;
   }
   .o {
   لون: أحمر;
   حجم الخط: 80مقصف;
   }

9. في ملف JavaScript ، بعد تغيير لغة HTML الداخلية لعرض الرمز ، قم بتبديل الرمز. على سبيل المثال ، إذا وضع اللاعب للتو "X" ، فغيّر الرمز التالي إلى "O":

   لو (playerSymbol "X")
    playerSymbol = "يا"
   آخر
    playerSymbol = "X"

10. لتشغيل اللعبة ، افتح ملف "index.html" في متصفح الويب لعرض شبكة 3 في 3:
11. ابدأ بوضع الرموز على الشبكة بالنقر فوق الخلايا. ستتبادل اللعبة بين رمزي "X" و "O":

كيفية تحديد الفائز

في الوقت الحالي ، ستستمر اللعبة حتى لو وضع اللاعب ثلاثة رموز متتالية. ستحتاج إلى إضافة شرط نهائي للتحقق من ذلك بعد كل منعطف.

1. داخل ملف JavaScript ، أضف متغيرًا جديدًا لتخزين جميع المواضع "الفائزة" الممكنة للشبكة 3 في 3. على سبيل المثال ، "[1،2،3]" هو الصف العلوي ، أو "[1،4،7]" هو صف قطري.

   يترك winPos = [
    [1, 2, 3], [4, 5, 6], 
    [7, 8, 9], [1, 4, 7], 
    [2, 5, 8], [3, 6, 9], 
    [1, 5, 9], [3, 5, 7]
   ];

2. أضف وظيفة جديدة تسمى checkWin ():

   وظيفةتحقق() {
   
   }

3. داخل الوظيفة ، قم بالتكرار خلال كل من المراكز الفائزة المحتملة:

   ل (يترك أنا = 0; أنا 
   }

4. داخل حلقة for ، تحقق مما إذا كانت جميع الخلايا تحتوي على رمز اللاعب:

   لو (
   وثيقة.getElementById (winPos [i] [0]). مشغل داخلي HTML رمز &&
   وثيقة.getElementById (winPos [i] [1]). مشغل داخلي HTML رمز &&
   وثيقة.getElementById (winPos [i] [2]). innerHTML playerSymbol
   ) {
   }

5. إذا تم تقييم الشرط إلى صحيح ، فستكون جميع الرموز في خط مستقيم. داخل عبارة if ، اعرض رسالة للمستخدم. يمكنك أيضًا تغيير نمط عنصر HTML عن طريق إضافة فئة CSS تسمى "win":

   وثيقة.getElementById (winPos [i] [0]). classList.add ("يفوز");
   وثيقة.getElementById (winPos [i] [1]). classList.add ("يفوز");
   وثيقة.getElementById (winPos [i] [2]). classList.add ("يفوز"); 
   انتهت اللعبة = حقيقي;
   setTimeout (وظيفة() {
    تنبيه (playerSymbol + "يفوز!");
   }, 500);

6. أضف فئة CSS "win" هذه إلى ملف "styles.css". عندما يفوز اللاعب ، سيتم تغيير لون خلفية الخلايا الفائزة إلى اللون الأصفر:

   .يفوز {
   لون الخلفية: أصفر;
   }

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

   ل (يترك أنا = 1; أنا <= 9; أنا ++) {
   // عندما ينقر اللاعب على خلية
   وثيقة.getElementById (i.toString ()). addEventListener (
   "انقر", 
   وظيفة() {
   لو (هذا.innerHTML "" &&! gameEnded) {
   // اعرض إما "X" أو "O" في الخلية ، ونمطها
   هذا.innerHTML = playerSymbol؛
   هذا.classList.add (playerSymbol.toLowerCase ()) ؛
   
   // تحقق من فوز اللاعب
    checkWin () ؛
   
   // تبديل الرمز بالرمز الآخر في المنعطف التالي
   لو (playerSymbol "X")
    playerSymbol = "يا"
   آخر
    playerSymbol = "X"
    }
    }
    );
   }

كيفية إعادة تعيين لوحة اللعبة

بمجرد فوز اللاعب باللعبة ، يمكنك إعادة تعيين لوحة اللعبة. يمكنك أيضًا إعادة تعيين لوحة اللعبة في حالة التعادل.

1. في ملف HTML ، بعد الجدول ، أضف زر إعادة تعيين:

   <زربطاقة تعريف="إعادة ضبط">إعادة ضبطزر>

2. أضف بعض التصميم إلى زر إعادة الضبط:

   .حاوية {
   عرض: ثني;
   الاتجاه المرن: عمود;
   }
   #إعادة ضبط {
   هامِش: 48مقصف 40%;
   حشوة: 20مقصف;
   }

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

   وثيقة.getElementById ("إعادة ضبط") .addEventListener (
   "انقر", 
   وظيفة() {
    }
   );

4. لكل خلية في الشبكة ، احصل على عنصر HTML باستخدام دالة getElementById (). أعد تعيين لغة HTML الداخلية لإزالة رموز "O" و "X" ، وإزالة جميع أنماط CSS الأخرى:

   ل (يترك أنا = 1; أنا <= 9; أنا ++) {
   وثيقة.getElementById (i.toString ()). innerHTML = "";
   وثيقة.getElementById (i.toString ()). classList.remove ("x");
   وثيقة.getElementById (i.toString ()). classList.remove ("س");
   وثيقة.getElementById (i.toString ()). classList.remove ("يفوز");
    انتهت اللعبة = خطأ شنيع;
   }

5. قم بتشغيل اللعبة بفتح ملف "index.html" في متصفح الويب.
6. ابدأ بوضع رموز "X" و "O" على الشبكة. حاول أن تجعل أحد الرموز يفوز.
7. اضغط على زر إعادة الضبط لإعادة ضبط لوحة اللعبة.

تعلم JavaScript عن طريق صنع الألعاب

يمكنك الاستمرار في تحسين مهارات البرمجة الخاصة بك عن طريق إنشاء المزيد من المشاريع في JavaScript. من السهل إنشاء ألعاب وأدوات بسيطة في بيئة الويب ، باستخدام تقنيات مفتوحة ومتعددة المنصات مثل JavaScript و HTML.

لا توجد طريقة أفضل لتحسين البرمجة من التدرب على برامج الكتابة!