كيفية انشاء لعبة XO باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء لعبة XO باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها الأصدقاء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء لعبة XO باستخدام HTML CSS وجافا سكريبت.

 

XO هي لعبة متعددة اللاعبين ويجب على لاعبي هذه اللعبة وضع علاماتهم (علامة) حتى يتمكنوا من إنشاء خط متصل من ثلاث خلايا أو مربعات عموديًا أو أفقيًا أو قطريًا. يمكن للخصم أن يوقف الفوز بسد نهاية خط الخصم.

 

في برنامجنا أو تصميمنا [لعبة XO] ، في البداية ، على صفحة الويب ، يوجد مربع اختيار بعنوان اللعبة وزرين مُسمى "Player (X)" و "Player (O)". يجب على المستخدمين تحديد خيار أو زر واحد لمواصلة اللعبة. إذا اختار المستخدم X ، فسيكون الروبوت O وإذا اختار المستخدم O ، فسيكون الروبوت X.

 

بمجرد أن يختار المستخدم واحدًا منهم ، سيختفي مربع التحديد وتكون لوحة التشغيل مرئية. توجد أسماء اللاعبين في الجزء العلوي في قسم لوحة التشغيل وهي تشير إلى دورها الآن أو تعرضها. في وسط صفحة الويب ، توجد منطقة لعب تيك تاك تو مع تسعة مربعات مربعة. بمجرد النقر فوق المربع المحدد ، تظهر علامة أو رمز مرئي اخترته في مربع الاختيار.

 

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

 

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

 

في الفيديو ، شاهدت كيف تعمل لعبة XO وكيف أنشأت هذه اللعبة باستخدام HTML CSS و JavaScript. تم إنشاء تصميم هذه اللعبة وتخطيطها باستخدام HTML و CSS ولكن لجعلها قابلة للتطبيق ، استخدمت JavaScript.

 

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

 

لعبة تيك تاك تو في جافا سكريبت

لإنشاء هذا البرنامج [لعبة XO]. أولاً ، تحتاج إلى إنشاء ثلاثة ملفات ، ملف HTML ، ملف CSS ، و ملف جافا سكريبت. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفاتك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر لهذه اللعبة من زر التنزيل المحدد.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow