بناء لعبة إكس أو باستخدام React

مرحبًا بك في نسختي من لعبة تيك تاك تو الكلاسيكية! لقد أنشأت لعبة تيك تاك تو باستخدام React و SCSS، وأكملتها في حوالي 6 ساعات. تتميز اللعبة بوضع لاعب واحد ضد الكمبيوتر، ونوافذ منبثقة لإعلان الفائز، وعدد مرات الفوز لكل من اللاعبين. بينما يمكن تخصيص الشبكة إلى n x n، فإن منطق الفوز الحالي يدعم فقط 3 x 3. تشمل التحسينات المستقبلية حركات أكثر ذكاءً للكمبيوتر ووظيفة متعددة اللاعبين في الوقت الحقيقي.

نظرة عامة

• إجمالي الوقت المطلوب للتطوير: ~6 ساعات
• التقنيات المستخدمة: JavaScript (React) + SCSS

قواعد اللعبة

1. الهدف

هدف اللعبة هو محاذاة ثلاثة من رموزك (X أو O) في صف أفقي أو رأسي أو قطري على شبكة 3 x 3.

2. ترتيب الدور

• اللاعب A يبدأ دائمًا ويلعب كـ X.
• الخصم الكمبيوتر يلعب كـ O ويتخذ حركته مباشرة بعد اللاعب A.

3. طريقة اللعب

• يتناوب اللاعبون على وضع علامات على الخلايا الفارغة في الشبكة.
• أول لاعب ينجح في محاذاة ثلاثة رموز يفوز باللعبة.

4. شروط الفوز

يفوز اللاعب إذا حقق:

• ثلاثة رموز في صف أفقي
• ثلاثة رموز في عمود عمودي، أو
• ثلاثة رموز في خط مائل

5. ارسم

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

6. تتبع النقاط

تحتفظ عدادات الفوز بعدد الانتصارات الكلي لكل من اللاعب أ والكمبيوتر.

الميزات المنفذة (MVP)

إليك ما هو متضمن في هذه النسخة من اللعبة:

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

التحسينات الممكنة

نظرة مستقبلية، إليك بعض المجالات التي يمكن تحسينها:

1. [UX] تخزين محلي للنقاط: احفظ نقاط اللعبة محليًا حتى تظل موجودة بعد تحديث المتصفح.
2. [UX/تقنية] حركات الكمبيوتر الأكثر ذكاءً: استبدال الحركات العشوائية بخوارزمية لألعاب أكثر تنافسية.
3. [UX] متعددة اللاعبين في الوقت الحقيقي: يمكن تمكين لاعبين للتنافس في الوقت الحقيقي باستخدام تقنيات مثل Socket.io.
4. [التقنية] تنظيم SCSS المتقدم: إعادة هيكلة SCSS باستخدام الميكسين والمتغيرات وتقنيات هيكلة أفضل.
5. [UX/تقنية] تدهور أنيق: تأكد من التوافق مع المتصفحات غير الحديثة لدعم أوسع.

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

المتطلبات المسبقة

قبل البدء، تأكد من تثبيت Node.js (الإصدار الموصى به: 6.4.1).

البدء

1. قم بنسخ المستودع من GitHub.

2. تثبيت الاعتماديات:

npm install

3. بدء خادم التطوير:

npm start

• افتح http://localhost:3000 في متصفحك لعرض التطبيق.

4. (اختياري) بناء المشروع للإنتاج:

npm run build

هذا ينشئ مجلد build محسن، جاهز للنشر.

الاختبار

قم بتشغيل الاختبارات في وضع المراقبة التفاعلية باستخدام:

npm test

تفاصيل تقنية

هيكل الملف

يتبع المشروع هيكل Create React App القياسي مع نهج قائم على المكونات المودولية.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

الوصف والنهج

• تم بدء التطبيق باستخدام Create React App لإعداد نموذج أولي سريع.
• تقوم اللعبة بتهيئة شبكة n x n للعب.
• كل خلية تحتوي على مستمع لحدث النقر، مما يسمح للاعب A (X) بإجراء الخطوة الأولى.
• يتم محاكاة دور الكمبيوتر من خلال منطق اختيار خلية عشوائية، والذي سيحتاج إلى تحسين لأحجام الشبكات المخصصة.
• تم استخدام SCSS للتصميم مع التركيز على السرعة بدلاً من التعقيد أثناء التطوير.

نهج الاختبار

اختبارات يدوية

• تأكد من أن الكمبيوتر يقوم بإجراء خطوة بعد انتهاء اللاعب A.
• تحقق من أن اللعبة تنتهي مع لافتة إعلان الفائز.
• اختبر الحركات التلقائية من قبل الكمبيوتر.

اختبارات وحدات محتملة

• تحقق مما إذا كان الكمبيوتر يتحرك بعد اللاعب A.
• تحقق من أن اللعبة تعرض الفائز الصحيح.
• اختبر حالات الحافة لتهيئة الشبكة وتفاعلات المستخدم.

الخاتمة

شكرًا لاستكشاف مشروعي!

يمكنك العثور على الكود المصدري الكامل والمساهمة في هذا المشروع على GitHub. دعونا نبني أشياء رائعة معًا!