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

خلائی کھیل بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر بنائیں

لیکچر سے پہلے کا کوئز

لیکچر سے پہلے کا کوئز

کینوس

کینوس ایک HTML عنصر ہے جو ڈیفالٹ میں خالی ہوتا ہے؛ یہ ایک خالی تختہ ہے۔ آپ کو اس پر کچھ بنانے کے لیے اس پر ڈرائنگ کرنی ہوگی۔

✅ کینوس API کے بارے میں مزید پڑھیں MDN پر۔

یہ عام طور پر صفحے کے باڈی کے حصے کے طور پر اس طرح اعلان کیا جاتا ہے:

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

اوپر ہم نے id, width اور height سیٹ کیے ہیں۔

• id: اسے سیٹ کریں تاکہ آپ اس کا حوالہ حاصل کر سکیں جب آپ کو اس کے ساتھ تعامل کرنے کی ضرورت ہو۔
• width: یہ عنصر کی چوڑائی ہے۔
• height: یہ عنصر کی اونچائی ہے۔

سادہ جیومیٹری ڈرائنگ

کینوس چیزوں کو ڈرائنگ کرنے کے لیے کارٹیسین کوآرڈینیٹ سسٹم استعمال کرتا ہے۔ اس لیے یہ کسی چیز کے مقام کو ظاہر کرنے کے لیے x-axis اور y-axis استعمال کرتا ہے۔ مقام 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

✅ کینوس API زیادہ تر 2D شکلوں پر مرکوز ہے، لیکن آپ ویب سائٹ پر 3D عناصر بھی بنا سکتے ہیں؛ اس کے لیے آپ WebGL API استعمال کر سکتے ہیں۔

آپ کینوس API کے ساتھ مختلف چیزیں بنا سکتے ہیں جیسے:

• جیومیٹریکل شکلیں، ہم نے پہلے ہی دکھایا ہے کہ مستطیل کیسے بنائی جائے، لیکن آپ اور بھی بہت کچھ بنا سکتے ہیں۔
• متن، آپ اپنی مرضی کے کسی بھی فونٹ اور رنگ کے ساتھ متن بنا سکتے ہیں۔
• تصاویر، آپ کسی تصویر کے اثاثے جیسے .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://localhost:5000 پر شروع ہوگا۔ ایک براؤزر کھولیں اور اس ایڈریس کو درج کریں۔ یہ ابھی ایک خالی صفحہ ہے، لیکن یہ جلد ہی تبدیل ہو جائے گا۔

نوٹ: اپنی اسکرین پر تبدیلیاں دیکھنے کے لیے، اپنے براؤزر کو ریفریش کریں۔

کوڈ شامل کریں

your-work/app.js میں ضروری کوڈ شامل کریں تاکہ نیچے دیے گئے مسائل کو حل کیا جا سکے:

1. کینوس بنائیں سیاہ پس منظر کے ساتھ

   ٹپ: /app.js میں مناسب TODO کے تحت دو لائنیں شامل کریں، ctx عنصر کو سیاہ سیٹ کریں اور اوپر/بائیں کوآرڈینیٹس کو 0,0 پر سیٹ کریں اور کینوس کی اونچائی اور چوڑائی کے برابر سیٹ کریں۔

2. ٹیکسچرز لوڈ کریں

   ٹپ: کھلاڑی اور دشمن کی تصاویر کو await loadTexture کا استعمال کرتے ہوئے اور تصویر کے راستے کو پاس کرتے ہوئے شامل کریں۔ آپ انہیں ابھی اسکرین پر نہیں دیکھیں گے!

3. ہیرو کو اسکرین کے نیچے کے نصف حصے کے مرکز میں بنائیں

   ٹپ: drawImage API کا استعمال کرتے ہوئے 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;
   

   پھر، ایک لوپ بنائیں تاکہ مونسٹرز کی array کو اسکرین پر بنایا جا سکے:

   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 چیلنج 🚀

Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

تفصیل: اپنے خلائی کھیل کے کینوس کو Canvas API تکنیکوں کا استعمال کرتے ہوئے بصری اثرات اور انٹرایکٹو عناصر کے ساتھ بہتر بنائیں۔

پرومپٹ: ایک نئی فائل بنائیں جس کا نام enhanced-canvas.html ہو جس میں ایک کینوس ہو جو پس منظر میں متحرک ستارے دکھائے، ہیرو شپ کے لیے ایک پلسنگ ہیلتھ بار ہو، اور دشمن کے جہاز جو آہستہ آہستہ نیچے کی طرف حرکت کریں۔ جاوا اسکرپٹ کوڈ شامل کریں جو تصادفی پوزیشنز اور اوپیسٹی کا استعمال کرتے ہوئے چمکتے ستارے بنائے، ہیلتھ بار کو صحت کی سطح کے مطابق رنگ تبدیل کرنے کے لیے نافذ کرے (سبز > پیلا > سرخ)، اور دشمن کے جہازوں کو مختلف رفتار سے اسکرین کے نیچے حرکت دینے کے لیے متحرک کرے۔

🚀 چیلنج

آپ نے 2D پر مرکوز Canvas API کے ساتھ ڈرائنگ کے بارے میں سیکھا ہے؛ WebGL API پر ایک نظر ڈالیں، اور 3D آبجیکٹ بنانے کی کوشش کریں۔

لیکچر کے بعد کا کوئز

لیکچر کے بعد کا کوئز

جائزہ اور خود مطالعہ

Canvas API کے بارے میں مزید جاننے کے لیے اس کے بارے میں پڑھیں۔

اسائنمنٹ

Canvas API کے ساتھ کھیلیں

---

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔