tictactoe

لعبة تيك تاك تو متعددة اللاعبين عبر الإنترنت

عرض الفيديو:

الوصف: يهدف تطبيق الويب هذا إلى أن يكون "الورقة" عبر الإنترنت للعبة الورق الكلاسيكية Tic Tac Toe. يعمل التطبيق كمنصة تسمح بلعب لعبة TTT، إلى جانب توفير ميزة الدردشة الأساسية أيضًا لتسهيل تواصل اللاعبين.

مواصفات الماكرو:

• "لوحة ألعاب" عبر الإنترنت للعب لعبة TTT؛
  • يجب أن يكون اللاعبون قادرين على التواصل مع بعضهم البعض؛
• يجب أن يوفر تطبيق الويب ميزة الغرف المتعددة.

د-_-ب

الأدوات والتقنيات:

اتصال عميل الخادم بناءً على بروتوكول Jack.IO

جانب العميل * :	جانب الخادم:
HTML وCSS وJS (بما في ذلك إطار عمل JackIO)	أطر عمل بايثون: Flask، Flask JackIO

^* عناصر الواجهة الأمامية للوحة Tic Tac Toe مستوحاة من مشروع Web Dev المبسط Tic Tac Toe - وظيفة جانب واحد للاعبين

لعبة محددة

• 2 لاعبين ( س | س );
• اللاعب صاحب الحركة الأولى => علامة المكان ( x | o ):
• حتى (الفوز أو التعادل): علامة مكان اللاعب الثاني => تبديل الدور => علامة مكان اللاعب الأول؛

منطق التنفيذ

---

في لعبة Tic-Tac-Toe متعددة اللاعبين عبر الإنترنت ، يتم توفير معالجة الحركات والتعامل مع اتصال اللاعبين ودردشة اللاعبين وإدارة غرف الألعاب بواسطة الخادم (في هذه الحالة بمساعدة أطر عمل Flask وFlask JackIO). وفقًا لقواعد تيك تاك تو، لا يوجد سوى لاعبين اثنين في لعبة واحدة. هذا يعني أنه يجب على الخادم التحقق من وجود غرفة الألعاب وما إذا كان هناك لاعبان بالفعل قبل توصيل لاعب جديد.

الخطوة 1 - الاتصال

• يتصل عميلان بالخادم.
  • الفحص الأولي: وجود الغرفة، عدد اللاعبين؛

الخطوة 2 – يتم إعلام اللاعب

• يتلقى العميل معلومات حول معرف اللاعب الخاص به المستخدم لرسم خريطة لشكل اللاعب (على سبيل المثال، صليب أو دائرة).

الخطوة 3 - ابدأ اللعبة

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

app.py

الملف الذي تبدأ فيه كل المتعة... إليك تكوين أطر عمل Flask وFlask Jack IO. بمجرد التهيئة، يتم تزيين مسارات Flask بـ @app.route() ويتم تزيين معالجات Flask SwitchIO بـ @socketio.event . في أسفل الملف، يوجد socketio.run(app, debug=True) الذي سيقوم بتشغيل الخادم. "تقوم وظيفة socketio.run() بتغليف بدء تشغيل خادم الويب وتحل محل بدء تشغيل خادم تطوير Flask القياسي app.run() ." قارورة المقبسIO

oophelpers.py

هناك نمذجة لكائنات Player() و GameRoom() . في حد ذاتها، تحدد الفئات السلوك والصفات المطلوبة.

templates/

في الأساس، يعتبر templates/index.html مجرد صفحة HTML تصف محتوى الصفحة - لعبة اللوحة ومنطقة السجلات. يوجد في أعلى الصفحة "عرض الترحيبات" كعرض مشروط من شأنه تغيير الحالة: display: show -> display: none عندما يصدر حدث الخادم توفر الغرفة.

static/styles/

هذا هو المكان الذي يتم فيه استخدام ملفات CSS لوصف جماليات الصفحة.

static/scripts/

يوجد في الملف main.js البرامج النصية التي تجعل التفاعل مع تطبيق الويب ممكنًا. يبدأ الملف بـ " VARIABLE DECLARATIONS " في الأعلى، وبعد ذلك في وظيفة addEventListener المجهولة الخاصة بـ joinButton يتم التحقق من وظيفة roomAvailability() عن طريق وظائف async await . بمجرد تأكيد توفر الغرفة، يتم استدعاء userConnectedHandlers() . يتم توفير وظيفة الدردشة واللعبة عبر EventListener المرفق بأزرار sendButton و startGameButton و restartButton .

requirements.txt

يصف هذا الملف ببساطة حزم التبعيات لتطبيق الويب هذا.

إعادة إنتاج تطبيق الويب

طريقة واحدة لتشغيل هذا التطبيق:

• إنشاء بيئة بايثون الافتراضية؛

python -m venv [directory]

• تثبيت المتطلبات في البيئة الافتراضية؛

pip install -r requirements.txt

• قم بتشغيل python app.py أو flask run وقم بزيارة http://localhost:5000 في علامتي تبويب منفصلتين للمتصفح.

python app.py

أو

flask run

الحاويات باستخدام عامل الإرساء

قم ببناء صورة من ملف Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

قم بتشغيل حاوية في الخلفية باستخدام منفذ (منافذ) الحاوية ونشرها على المضيف

docker run -d -p < host_port > : < container_port > < image_name >    

docker run -d -p 80:5000 flask-tictactoe  

الوصول إلى الحاوية في المتصفح باستخدام: http://localhost أو http://127.0.0.1