Web-Dev-For-Beginners/translations/ar/6-space-game/2-drawing-to-canvas/README.md

بناء لعبة فضاء الجزء الثاني: رسم البطل والوحوش على اللوحة

اختبار ما قبل المحاضرة

اختبار ما قبل المحاضرة

اللوحة

اللوحة هي عنصر HTML لا يحتوي على محتوى افتراضيًا؛ إنها بمثابة صفحة فارغة. تحتاج إلى إضافة محتوى إليها عن طريق الرسم عليها.

✅ اقرأ المزيد عن واجهة برمجة تطبيقات اللوحة على موقع MDN.

عادةً ما يتم تعريفها كجزء من جسم الصفحة كما يلي:

<canvas id="myCanvas" width="200" height="100"></canvas>

في الأعلى، قمنا بتحديد id وwidth وheight.

• id: قم بتعيينه للحصول على مرجع عندما تحتاج إلى التفاعل معه.
• width: هذا هو عرض العنصر.
• height: هذا هو ارتفاع العنصر.

رسم الأشكال البسيطة

تستخدم اللوحة نظام إحداثيات ديكارتي للرسم. وبالتالي، فهي تستخدم محور x ومحور y للتعبير عن موقع شيء ما. الموقع 0,0 هو الزاوية العلوية اليسرى، والزاوية السفلية اليمنى هي ما قمت بتحديده كعرض وارتفاع اللوحة.

الصورة من MDN

للرسم على عنصر اللوحة، ستحتاج إلى اتباع الخطوات التالية:

1. الحصول على مرجع لعنصر اللوحة.
2. الحصول على مرجع لعنصر السياق الذي يجلس على عنصر اللوحة.
3. تنفيذ عملية الرسم باستخدام عنصر السياق.

عادةً ما يبدو الكود الخاص بالخطوات أعلاه كما يلي:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ تركز واجهة برمجة تطبيقات اللوحة بشكل أساسي على الأشكال ثنائية الأبعاد، ولكن يمكنك أيضًا رسم عناصر ثلاثية الأبعاد على موقع ويب؛ لهذا، قد تستخدم واجهة برمجة تطبيقات WebGL.

يمكنك رسم جميع أنواع الأشياء باستخدام واجهة برمجة تطبيقات اللوحة مثل:

• الأشكال الهندسية، لقد أظهرنا بالفعل كيفية رسم مستطيل، ولكن هناك الكثير مما يمكنك رسمه.
• النصوص، يمكنك رسم نص بأي خط ولون ترغب فيه.
• الصور، يمكنك رسم صورة بناءً على أصل صورة مثل .jpg أو .png على سبيل المثال.

✅ جربها! تعرف كيفية رسم مستطيل، هل يمكنك رسم دائرة على الصفحة؟ ألقِ نظرة على بعض الرسومات المثيرة للاهتمام باستخدام اللوحة على CodePen. إليك مثال مثير للإعجاب.

تحميل ورسم أصل صورة

يمكنك تحميل أصل صورة عن طريق إنشاء كائن Image وتعيين خاصية src الخاصة به. ثم تستمع إلى حدث load لمعرفة متى يكون جاهزًا للاستخدام. يبدو الكود كما يلي:

تحميل الأصل

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

نمط تحميل الأصل

يُوصى بتغليف الكود أعلاه في هيكل مثل هذا، بحيث يكون من الأسهل استخدامه ولا تحاول التلاعب به إلا عندما يتم تحميله بالكامل:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

لرسم أصول اللعبة على الشاشة، سيبدو الكود الخاص بك كما يلي:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

الآن حان الوقت لبدء بناء لعبتك

ما الذي ستبنيه

ستقوم ببناء صفحة ويب تحتوي على عنصر لوحة. يجب أن تعرض شاشة سوداء بحجم 1024*768. لقد وفرنا لك صورتين:

• سفينة البطل

  

• 5*5 وحوش

  

الخطوات الموصى بها لبدء التطوير

حدد الملفات التي تم إنشاؤها لك في مجلد your-work. يجب أن يحتوي على ما يلي:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

افتح نسخة من هذا المجلد في Visual Studio Code. تحتاج إلى إعداد بيئة تطوير محلية، ويفضل أن تكون باستخدام Visual Studio Code مع NPM وNode مثبتين. إذا لم يكن لديك npm مثبتًا على جهاز الكمبيوتر الخاص بك، إليك كيفية القيام بذلك.

ابدأ مشروعك عن طريق التنقل إلى مجلد your_work:

cd your-work
npm start

سيبدأ الخادم HTTP على العنوان http://localhost:5000. افتح متصفحًا وأدخل هذا العنوان. إنها صفحة فارغة الآن، ولكن هذا سيتغير.

ملاحظة: لرؤية التغييرات على شاشتك، قم بتحديث المتصفح.

إضافة الكود

أضف الكود المطلوب إلى your-work/app.js لحل ما يلي:

1. رسم لوحة بخلفية سوداء

   نصيحة: أضف سطرين تحت التعليق المناسب في /app.js، وقم بتعيين عنصر ctx ليكون أسودًا، وحدد إحداثيات الأعلى/اليسار عند 0,0 والارتفاع والعرض ليكونا مساويين لعرض وارتفاع اللوحة.

2. تحميل القوام

   نصيحة: أضف صور اللاعب والعدو باستخدام await loadTexture وتمرير مسار الصورة. لن تراها على الشاشة بعد!

3. رسم البطل في وسط الشاشة في النصف السفلي

   نصيحة: استخدم واجهة برمجة التطبيقات drawImage لرسم heroImg على الشاشة، مع تحديد canvas.width / 2 - 45 وcanvas.height - canvas.height / 4).

4. رسم 5*5 وحوش

   نصيحة: الآن يمكنك إلغاء تعليق الكود لرسم الأعداء على الشاشة. بعد ذلك، انتقل إلى وظيفة createEnemies وقم ببنائها.

   أولاً، قم بإعداد بعض الثوابت:

   const MONSTER_TOTAL = 5;
   const MONSTER_WIDTH = MONSTER_TOTAL * 98;
   const START_X = (canvas.width - MONSTER_WIDTH) / 2;
   const STOP_X = START_X + MONSTER_WIDTH;
   

   ثم، قم بإنشاء حلقة لرسم مصفوفة الوحوش على الشاشة:

   for (let x = START_X; x < STOP_X; x += 98) {
       for (let y = 0; y < 50 * 5; y += 50) {
         ctx.drawImage(enemyImg, x, y);
       }
     }
   

النتيجة

يجب أن تبدو النتيجة النهائية كما يلي:

الحل

يرجى محاولة حلها بنفسك أولاً، ولكن إذا واجهت صعوبة، ألقِ نظرة على الحل

---

تحدي GitHub Copilot Agent 🚀

استخدم وضع الوكيل لإكمال التحدي التالي:

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

المهمة: قم بإنشاء ملف جديد يسمى enhanced-canvas.html يحتوي على لوحة تعرض نجومًا متحركة في الخلفية، شريط صحة نابض لسفينة البطل، وسفن الأعداء التي تتحرك ببطء نحو الأسفل. قم بتضمين كود JavaScript يرسم نجومًا متلألئة باستخدام مواقع وألوان عشوائية، ينفذ شريط صحة يتغير لونه بناءً على مستوى الصحة (أخضر > أصفر > أحمر)، ويقوم بتحريك سفن الأعداء للنزول على الشاشة بسرعات مختلفة.

🚀 التحدي

لقد تعلمت كيفية الرسم باستخدام واجهة برمجة التطبيقات للوحة ثنائية الأبعاد؛ ألقِ نظرة على واجهة برمجة تطبيقات WebGL، وحاول رسم كائن ثلاثي الأبعاد.

اختبار ما بعد المحاضرة

اختبار ما بعد المحاضرة

المراجعة والدراسة الذاتية

تعرف على المزيد حول واجهة برمجة تطبيقات اللوحة من خلال قراءتها.

الواجب

العب مع واجهة برمجة تطبيقات اللوحة

---

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.