شبيبة الجمعة: لعبة خط 0 شبيبة و CSS

ربما سيتذكر الكثير من الموقّعين القدامى وباء من المقالات بعناوين مثل "٪ شيء٪ في 30 سطرًا من JS". وكذلك الرسالة الملحمية " اللعبة في 0 سطر من التعليمات البرمجية على JS النقي " التي تلت ذلك ، وبعد ذلك تلاشى الوباء فجأة. أدرك تمامًا أنني لن أتخطى هذه التحفة الفنية أبدًا ، ومع ذلك قررت بعد خمس سنوات أن أنهي سنتي الخمسة.

سيداتي وسادتي ، نقدم لكم لعبة "Tic-Tac-Toe" في خطوط صفر من JS ، وخلافا للعبة المذكورة أعلاه ، في صفر خطوط من CSS (بما في ذلك الأنماط المضمنة). فقط HTML عارية ، المتشددين فقط.


→ رابط اللعبة

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

في الواقع ، كل شيء غبي للغاية. تتكون اللعبة من حوالي 6 آلاف صفحة من HTML الثابت ، ترتبط ببعضها البعض. عند الضغط على خلية في ساحة اللعب ، انتقل إلى الصفحة التي تم فيها الانتقال إلى هذه الخلية بالفعل. من الواضح أن كتابة 6k صفحة بيديك متعة أقل من المتوسط. لذلك (مفاجأة!) يتم إنشاء الصفحات بواسطة نصوص JS باستخدام NodeJS.


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

const initialState = { player: PLAYER_X, field: Array.from(Array(9)).map(() => EMPTY_CELL), moves: {} } 

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

ثم نبدأ ، أعتذر عن الحشو ، من الحالة الأولية والقيام بما يلي:

1. نتحقق مما إذا كانت الدولة نهائية (انتصار الصلبان ، انتصار الرموز ، التعادل).
2. إذا كان الأمر كذلك ، قم بإضافة معلومات حول هذا إلى كائن الدولة وإنهاء.
3. إذا لم يكن الأمر كذلك ، فانتقل عبر جميع الخلايا في الحقل.
4. لكل خلية فارغة في الحقل ، قم بإنشاء حالة لعبة جديدة قام فيها اللاعب الحالي بالانتقال إلى هذه الخلية ، وتمرير النقل إلى اللاعب التالي.
5. في مجال moves في الحالة الحالية ، قم باضافة سجل للحركة المحتملة. المفتاح لهذا الإدخال هو فهرس الخلية ، والقيمة هي الارتباط بالحالة الجديدة.
6. نكرر هذه الخوارزمية بشكل متكرر لجميع الحالات التي ظهرت حديثًا.

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

ثم ، من كل كائن حالة لعبة ، نقوم بإنشاء صفحة HTML. عند المشي عبر كائن moves ، نملأ الخلايا الفارغة للحقل بروابط للصفحات المقابلة للتحركات التي تم إجراؤها في هذه الخلايا. ثم نحول مصفوفة الحقل أحادية البعد إلى جدول HTML ثنائي الأبعاد. نضيف جميع أنواع الأشياء الممتعة مثل التعليمات التي يمشي عليها اللاعب ، والروابط إلى الصفحة الرئيسية - وفويلا!

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

1. أولاً ، بشكل متكرر (في الواقع لا) لكل حالة لعبة ، يتم حساب النتيجة المتوقعة للعبة - النتيجة التي سيتم تحقيقها إذا لعب كلا الجانبين بشكل مثالي.
2. ثم يتم تعديل شجرة اللعبة على النحو التالي: بدلاً من تحرك اللاعب ، نقوم الآن بحركتين في وقت واحد. الخطوة الثانية هي حركة الذكاء الاصطناعي. علاوة على ذلك ، من بين جميع الإجابات الممكنة على تحرك اللاعب ، يتم تحديد الإجابة التي تحتوي على أفضل نتيجة متوقعة. وبالتالي ، بعد النقر على قفص فارغ ، ينتقل اللاعب على الفور إلى الموضع الذي يظهر فيه تقاطع (أو صفر) في هذه الخلية ، ويظهر صفر (أو تقاطع) في خلية أخرى.
3. يتم التخلص من جميع مواقف اللعبة المقابلة للحركات التي لا يقوم بها الذكاء الاصطناعي بلا رحمة.
4. ثم يتم إنشاء HTML من المواضع المتبقية في مجلد منفصل - تمامًا مثل حالة لاعبين اثنين.

من خلال مبادئ مماثلة ، يمكنك تنفيذ أي لعبة ذات شجرة ليست كبيرة جدًا. ومع ذلك ، إذا كنت أريد أن أجعل الشطرنج بهذه الطريقة ، يبدو لي أن github سيرفض استضافة هذا =)

بالحديث عن github: يمكنك رؤية الرمز بالكامل هناك (الرابط موجود في الصفحة الرئيسية للعبة). على هذا ، بشكل عام ، هذا كل شيء. وداعاً أيها الفتيات والفتيان. أراك مرة أخرى.

PS استبدال فواصل الأسطر من نمط Windows إلى نمط Unix هو وقت طويل جدًا عندما يتعلق الأمر بـ 6 آلاف ملف. ندمت على عدم الاهتمام بذلك في مرحلة كتابة الكود ، لكنني لا زلت أتحمل الشجاعة حتى النهاية.