متقدم JavaScript: بناء ألعاب حقيقية وتطبيقات أذكى

ملخص سريع

• تعلم كيف يمكن لـ JavaScript المتقدم تشغيل ألعاب وتطبيقات ذكية حقيقية.
• استكشف البنية المعيارية مع نمط نموذج-عرض-تحكم (MVC).
• ابنِ لعبة عداء لا نهائية على طراز سونيك باستخدام كابليه و فيت.
• أنشئ دردشة آلية باستخدام التوليد المُعزَّز بالاسترجاع (RAG) باستخدام لانج تشين.جي اس و OpenAI.
• أتقن ضبط الأداء، والقابلية للتوسع، والاختبار لأنظمة مستوى الإنتاج.

---

ما ستتعلمه

1. كيفية تطبيق التصميم الموجه للكائنات و MVC في محركات ألعاب JavaScript الحديثة.
2. كيفية استخدام البنى المكوناتية لحلقات سير اللعبة سلسة.
3. كيفية بناء دردشة RAG تستند نماذج اللغة الكبيرة فيها إلى بيانات خاصة.
4. كيفية هيكلة مشاريع JavaScript من أجل قابلية الصيانة و الأداء و الأمان.
5. كيفية اختبار ومراقبة ونشر تطبيقات JavaScript المتقدمة التي يمكنها التوسع.

---

المتطلبات الأساسية

قبل الغوص، يجب أن تكون مرتاحًا مع:

• JavaScript الحديث (صياغة ES6+، async/await، الوحدات)
• استخدام Node.js و إن بي إم
• مفاهيم أساسية حول HTML5 اللوحة الرسومية
• اختياري: الإلمام بـ APIs أو مكتبات الذكاء الاصطناعي

---

مقدمة: لماذا لا يزال JavaScript المتقدم مهمًا

تطور JavaScript ليكون أبعد بكثير من مجرد التلاعب بـ DOM. اليوم، إنه العمود الفقري لـ ألعاب المتصفح و مساعدات الذكاء الاصطناعي و أنظمة المكدس الكامل.

سواء كنت تقوم بعرض الرُّسُوم المتحركة على لوحة رسومية أو تنسيق خطوط أنابيب الذكاء الاصطناعي، فإن نفس الأنماط المتقدمة - التصميم المعياري، والبنية المعتمدة على الأحداث، وعمليات async - تنطبق.

سنلقي نظرة على ثلاث دراسات حالة تعرض هذا التطور:

1. Rabbit Trap — لعبة بلاطية معيارية تعتمد على MVC.
2. Sonic Runner — عداء لا نهائي عالي الأداء مبني باستخدام كابليه.
3. Formula One Chatbot — مساعد ذكي مدعوم بـ لانج تشين.جي اس و OpenAI.

كل منها يركز على مجال: البنية و الأداء و الذكاء.

---

1. البنية المعيارية مع MVC: دروس من Rabbit Trap

يظل نمط نموذج-عرض-تحكم (MVC) أحد أقوى الطرق لهيكلة ألعاب وتطبيقات JavaScript. يفصل بشكل نظيف بين البيانات و العرض و منطق الإدخال - مبدأ يدعم أطر عمل مثل React و Angular و Vue¹.

تحليل MVC

المكون	المسؤولية	المثال
Model	منطق اللعبة، إدارة الحالة	موضع اللاعب، السرعة
View	عرض المرئيات	رسم اللوحة الرسومية، تغيير الحجم
Controller	معالجة الإدخال	أحداث لوحة المفاتيح، أو الفأرة، أو اللمس

مخطط البنية

flowchart TD
  subgraph Controller
    A[Keyboard Input] --> B[Controller Class]
  end
  subgraph Model
    C[Game Logic] --> D[Player State]
  end
  subgraph View
    E[Canvas Renderer] --> F[Display Class]
  end
  B --> C
  C --> E

أهمية نموذج-عرض-مراقب

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

• إعادة هيكلة آمنة — عزل التغييرات في طبقة واحدة.
• اختبار مستقل — محاكاة العرض أو الإدخال في اختبارات الوحدات.
• إعادة استخدام المنطق — نقل محركك إلى مشاريع متعددة.

مثال: إعداد محرك نظيف

// main.js
import { Game } from './Game.js';
import { Display } from './Display.js';
import { Controller } from './Controller.js';
import { Engine } from './Engine.js';

const game = new Game();
const display = new Display(document.querySelector('canvas');
const controller = new Controller();
const engine = new Engine(30, render, update);

function update() {
  game.update(); // updates player state
}

function render() {
  display.render(game.getState());
}

engine.start();

يضمن هذا الإعداد المعياري أن Display، Game، و Controller تتفاعل فقط من خلال واجهات معرّفة.

المخاطر الشائعة والحلول

المخاطر	لماذا هي مشكلة	الحل
الوصول المباشر للمتغيرات بين الصفوف	الترابط العالي	استخدم طرق الحصول والتعيين
خلط العرض والمنطق	تساقط الإطارات، صعوبة التصحيح	افصل update() و render()
المتغيرات العامة	آثار جانبية غير متوقعة	غلّف الحالة في الصفوف

---

2. بناء لعبة ركض لا نهائية من نوع سونيك باستخدام Kaplay

الآن دعنا نجعل مبادئ MVC حية من خلال بناء لعبة ركض لا نهائية من نوع سونيك باستخدام Kaplay، محرك JavaScript خفيف الوزن قائم على المكونات لألعاب المتصفح ثنائية الأبعاد. تصميم Kaplay مستوحى من المكتبات الحديثة مثل Kaboom.js ويركز على الأداء المعياري².

الخطوة 1: إعداد المشروع

npm create vite@latest sonic-runner
cd sonic-runner
npm install kaplay@0.0.1-alpha.21
npm run dev

قم بزيارة http://localhost:5173 للتأكد من إعدادك.

الخطوة 2: تهيئة سياق Kaplay

// src/main.js
import kaplay from 'kaplay';

const k = kaplay({
  width: 1920,
  height: 1080,
  letterbox: true,
  background: [0, 0, 0]
});

يتعامل Kaplay مع التحجيم ونسب العرض للحصول على رسومات متسقة.

الخطوة 3: إضافة كيانات اللعبة

يستخدم Kaplay API قائمًا على المكونات للتكوين المرن.

k.loadSprite('runner', '/sprites/runner.png');

const player = k.add([
  k.sprite('runner'),
  k.pos(100, 400),
  k.area(),
  k.body()
]);

k.onKeyPress('space', () => {
  if (player.isGrounded()) player.jump(800);
});

الخطوة 4: التمرير المنظوري

const bg = k.add([
  k.sprite('background', { width: 1920, height: 1080 }),
  k.fixed()
]);

k.onUpdate(() => {
  bg.move(-100, 0);
  if (bg.pos.x < -1920) bg.pos.x = 0;
});

نصيحة الأداء

تستخدم حلقة كابليه الداخلية توقيت دلتا لضمان فيزياء متسقة عبر الأجهزة³. يُساعد تثبيت نسب العرض إلى الارتفاع واستخدام الإطار السينمائي على تقليل إعادة رسم وحدة معالجة الرسومات والحفاظ على معدلات إطارات مستقرة.

متى تستخدم كابليه ومتى لا تستخدمها

استخدم كابليه عندما	تجنب كابليه عندما
تحتاج إلى لعبة متصفح ثنائية الأبعاد	تحتاج إلى عرض ثلاثي الأبعاد
تريد نمذجة سريعة	تحتاج إلى فيزياء متقدمة
تفضل مكدس JavaScript فقط	أنت تتكامل مع Unity أو Unreal

مثال من العالم الحقيقي

يستخدم العديد من المطورين المستقلين محركات مثل Phaser أو Kaboom.js لنشر ألعاب المتصفح على itch.io أو Newgrounds. يُسهل النهج المعياري النقل إلى أطر العمل للجوال مثل Capacitor أو React Native.

---

3. التطبيقات الذكية: روبوتات الدردشة RAG مع LangChain.js

وراء الألعاب، أصبح JavaScript الآن لاعبًا جادًا في تطوير الذكاء الاصطناعي. باستخدام LangChain.js، يمكنك بناء روبوتات دردشة Retrieval-Augmented Generation (RAG) تجمع البيانات الخاصة مع نماذج اللغة الكبيرة مثل GPT من OpenAI⁴.

كيف يعمل RAG

flowchart LR
  A[User Query] --> B[Retriever]
  B --> C[Vector Database]
  C --> D[Relevant Context]
  D --> E[LLM (OpenAI)]
  E --> F[Final Answer]

يحسن RAG الدقة الحقيقية من خلال تأسيس الردود في مجموعة البيانات الخاصة بك.

خطوة بخطوة: بناء روبوت دردشة RAG

1. إعداد البيئة:

   npx create-next-app rag-chatbot
   cd rag-chatbot
   npm install langchain openai @datastax/astra-db-client
   

2. تحميل وتضمين البيانات:

   import { OpenAIEmbeddings } from 'langchain/embeddings';
   import { DataStaxVectorStore } from 'langchain/vectorstores';
   
   const embeddings = new OpenAIEmbeddings({ apiKey: process.env.OPENAI_KEY });
   const store = new DataStaxVectorStore({ embeddings });
   
   await store.addDocuments(scrapeDocs());
   

3. الاستعلام وتوليد الإجابات:

   import { RetrievalQAChain } from 'langchain/chains';
   import { OpenAI } from 'langchain/llms/openai';
   
   const chain = new RetrievalQAChain({
     retriever: store.asRetriever(),
     llm: new OpenAI({ apiKey: process.env.OPENAI_KEY })
   });
   
   const answer = await chain.call({ query: 'Who won the 2024 F1 championship?' });
   console.log(answer);
   

اعتبارات الأمان

• لا تعرض مفاتيح OpenAI أبدًا في كود العميل — استخدم متغيرات البيئة دائمًا.
• تحقق من البيانات المستخرجة قبل التضمين لتجنب المدخلات المعطوبة.
• حد من معدل استدعاءات OpenAI لمنع استنفاد الحصة والإساءة.

الاختبار والمراقبة

• استخدم أدوات استرجاع وهمية للاختبار الوحدوي.
• سجل التأخير واستخدام الرموز للتحكم في التكلفة.
• راقب صحة مخزن المتجهات باستخدام لوحات مزود الخدمة.

المشكلات الشائعة

المشكلة	السبب	الحل
استجابات فارغة	تضمينات مفقودة	أعد تشغيل التضمين المتجهي
تأخير عالٍ	نوافذ سياق كبيرة	استخدم الاسترجاع المجزأ
إجابات قديمة	بيانات قديمة	جدولة إعادة الاستخراج

---

4. الأداء والقابلية للتوسع & الصيانة

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

مقاييس الأداء

مقياس	سياق اللعبة	سياق الذكاء الاصطناعي
معدل الإطارات	الهدف 60 إطارًا في الثانية	غير متاح
زمن الاستجابة	الإدخال → الإطار <16 مللي ثانية	الاستعلام → الاستجابة <2 ثانية
الذاكرة	<200 ميجابايت	يعتمد على حجم التضمين

نصائح القابلية للتوسع

• استخدم Web Workers للحسابات الثقيلة⁵.
• حمّل الأصول والتضمينات بشكل كسول.
• قسّم الشيفرة إلى وحدات باستخدام الواردات الديناميكية في Vite لتحميل أسرع.

قائمة الصيانة

✅ استخدم وحدات ES (import/export)
✅ حافظ على حدود MVC نظيفة
✅ احفظ الأسرار في .env
✅ اكتب اختبارات التكامل
✅ وثّق واجهات API العامة

---

الأخطاء الشائعة التي يرتكبها الجميع

1. خلط المنطق والعرض: يؤدي إلى سقوط الإطارات.
2. ترميز الثوابت بشكل صلب: يكسر القابلية للتوسع.
3. تجاهل أخطاء async: يؤدي إلى انهيار تطبيقات الإنتاج.
4. تخطي تثبيت الإصدار: يسبب انجراف التبعيات.

---

دليل استكشاف الأخطاء وإصلاحها

خطأ	السبب المحتمل	الحل
Canvas لا يتغير الحجم	مستمع تغيير الحجم مفقود	استدعِ display.resize() عند تغيير حجم النافذة
شاشة Kaplay سوداء	إصدار خاطئ	استخدم @0.0.1-alpha.21
يعيد Chatbot 401	مفتاح API غير صالح	تحقق من ملف .env
استجابات OpenAI بطيئة	سياق كبير	قلّل نافذة الرمز

---

النقاط الرئيسية

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

---

الأسئلة الشائعة

س1: هل يمكنني استخدام MVC لتطبيقات غير الألعاب؟
نعم. يُستخدم MVC على نطاق واسع في أطر الويب مثل React وAngular وVue⁶.

س2: هل Kaplay أفضل من Phaser؟
Kaplay أخف وأكثر حداثة، بينما يوفر Phaser المزيد من الأدوات المدمجة. اختر بناءً على تعقيد مشروعك.

س3: هل أحتاج إلى خلفية لـ RAG chatbots؟
ليس بالضرورة. يمكن لـ LangChain.js العمل على جانب العميل إذا استخدمت مخازن متجهات مستضافة.

س4: كيف أستضيف هذه المشاريع؟
الألعاب: itch.io أو Netlify. Chatbots: Vercel أو Render.

س5: هل OpenAI مطلوب؟
لا. يمكنك استبدال أي LLM API يدعم التضمينات.

---

الخطوات التالية

• بنِ لعبتك الخاصة القائمة على البلاط باستخدام مبادئ MVC.
• جرّب واجهات برمجة الفيزياء والصوت في Kaplay.
• وسّع chatbot RAG الخاص بك باستخدام قواعد معرفة خاصة بالشركة.
• اشترك في نشرات JavaScript المطورين للحصول على تحديثات حول LangChain.js وKaplay.

---

الحواشي

1. MDN Web Docs – نمط النموذج-العرض-التحكم: https://developer.mozilla.org/en-US/docs/Glossary/MVC ↩

2. مستودع Kaplay GitHub: https://GitHub.com/kaplayjs/kaplay ↩

3. وثائق MDN الويب – requestAnimationFrame(): https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame ↩

4. وثائق LangChain.js: https://js.langchain.com/docs/ ↩

5. وثائق MDN الويب – عمال الويب API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API ↩

6. وثائق React – بنية المكونات: https://React.dev/learn/thinking-in-React ↩