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

اسپیس گیم بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر ڈرائنگ کریں

کینوس API ویب ڈیولپمنٹ کی سب سے طاقتور خصوصیات میں سے ایک ہے جو آپ کے براؤزر میں متحرک، انٹرایکٹو گرافکس بنانے کے لیے استعمال ہوتی ہے۔ اس سبق میں، ہم اس خالی HTML <canvas> عنصر کو ایک گیم کی دنیا میں تبدیل کریں گے جو ہیروز اور مونسٹرز سے بھری ہوئی ہوگی۔ کینوس کو اپنے ڈیجیٹل آرٹ بورڈ کے طور پر سوچیں جہاں کوڈ بصری شکل اختیار کرتا ہے۔

ہم پچھلے سبق میں سیکھے گئے مواد پر کام کر رہے ہیں، اور اب ہم بصری پہلوؤں میں گہرائی سے جائیں گے۔ آپ سیکھیں گے کہ گیم اسپریٹس کو کیسے لوڈ اور ڈسپلے کریں، عناصر کو بالکل صحیح جگہ پر کیسے رکھیں، اور اپنے اسپیس گیم کے لیے بصری بنیاد کیسے بنائیں۔ یہ جامد ویب صفحات اور متحرک، انٹرایکٹو تجربات کے درمیان خلا کو پُر کرتا ہے۔

اس سبق کے اختتام تک، آپ کے پاس ایک مکمل گیم سین ہوگا جس میں آپ کا ہیرو شپ صحیح جگہ پر ہوگا اور دشمنوں کی فارمیشنز جنگ کے لیے تیار ہوں گی۔ آپ سمجھ جائیں گے کہ جدید گیمز براؤزرز میں گرافکس کیسے رینڈر کرتے ہیں اور اپنی انٹرایکٹو بصری تجربات بنانے کی مہارت حاصل کریں گے۔ آئیے کینوس گرافکس کو دریافت کریں اور اپنے اسپیس گیم کو زندگی بخشیں!

پری لیکچر کوئز

پری لیکچر کوئز

کینوس

تو یہ <canvas> عنصر اصل میں کیا ہے؟ یہ HTML5 کا حل ہے جو ویب براؤزرز میں متحرک گرافکس اور اینیمیشنز بنانے کے لیے استعمال ہوتا ہے۔ عام تصاویر یا ویڈیوز کے برعکس جو جامد ہوتی ہیں، کینوس آپ کو اسکرین پر ظاہر ہونے والی ہر چیز پر پکسل لیول کنٹرول دیتا ہے۔ یہ گیمز، ڈیٹا ویژولائزیشنز، اور انٹرایکٹو آرٹ کے لیے بہترین ہے۔ اسے ایک پروگرام ایبل ڈرائنگ سطح کے طور پر سوچیں جہاں جاوا اسکرپٹ آپ کا پینٹ برش بن جاتا ہے۔

ڈیفالٹ کے طور پر، کینوس عنصر آپ کے صفحے پر ایک خالی، شفاف مستطیل کی طرح نظر آتا ہے۔ لیکن یہی وہ جگہ ہے جہاں اس کی صلاحیت چھپی ہوئی ہے! اس کی اصل طاقت اس وقت ظاہر ہوتی ہے جب آپ جاوا اسکرپٹ کا استعمال کرتے ہوئے شکلیں بناتے ہیں، تصاویر لوڈ کرتے ہیں، اینیمیشنز تخلیق کرتے ہیں، اور چیزوں کو صارف کی تعاملات کے مطابق ردعمل دیتے ہیں۔ یہ بالکل ویسا ہی ہے جیسے 1960 کی دہائی میں بیل لیبز کے ابتدائی کمپیوٹر گرافکس کے ماہرین نے ہر پکسل کو پروگرام کرنا پڑا تاکہ پہلی ڈیجیٹل اینیمیشنز بنائی جا سکیں۔

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

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

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

یہ کوڈ کیا کرتا ہے:

• سیٹ کرتا ہے id ایٹریبیوٹ تاکہ آپ جاوا اسکرپٹ میں اس مخصوص کینوس عنصر کو ریفرنس کر سکیں
• ڈیفائن کرتا ہے پکسلز میں چوڑائی تاکہ کینوس کے افقی سائز کو کنٹرول کیا جا سکے
• اسٹیبلش کرتا ہے پکسلز میں اونچائی تاکہ کینوس کے عمودی طول و عرض کو طے کیا جا سکے

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

اب جب کہ آپ جانتے ہیں کہ کینوس عنصر کیا ہے، آئیے اس پر واقعی ڈرائنگ کرنے کی تلاش کریں! کینوس ایک کوآرڈینیٹ سسٹم استعمال کرتا ہے جو شاید آپ کو ریاضی کی کلاس سے واقف لگے، لیکن کمپیوٹر گرافکس کے لیے ایک اہم موڑ ہے۔

کینوس کارٹیسین کوآرڈینیٹس استعمال کرتا ہے جس میں ایک x-axis (افقی) اور y-axis (عمودی) ہوتا ہے تاکہ آپ جو کچھ بھی ڈرائنگ کرتے ہیں اسے پوزیشن میں رکھ سکیں۔ لیکن یہاں ایک اہم فرق ہے: ریاضی کی کلاس کے کوآرڈینیٹ سسٹم کے برعکس، اصل نقطہ (0,0) اوپر بائیں کونے سے شروع ہوتا ہے، x-ویلیوز دائیں طرف بڑھتی ہیں اور y-ویلیوز نیچے کی طرف بڑھتی ہیں۔ یہ نقطہ نظر ابتدائی کمپیوٹر ڈسپلے سے شروع ہوتا ہے جہاں الیکٹران بیم اوپر سے نیچے تک اسکین کرتے تھے، جس سے اوپر بائیں قدرتی نقطہ آغاز بن جاتا تھا۔

تصویر MDN سے

کینوس عنصر پر ڈرائنگ کرنے کے لیے، آپ وہی تین قدمی عمل کریں گے جو تمام کینوس گرافکس کی بنیاد بناتا ہے۔ ایک بار جب آپ یہ چند بار کریں گے، تو یہ آپ کے لیے آسان ہو جائے گا:

1. کینوس عنصر کا حوالہ حاصل کریں DOM سے (بالکل کسی دوسرے HTML عنصر کی طرح)
2. 2D رینڈرنگ کانٹیکسٹ حاصل کریں – یہ تمام ڈرائنگ طریقے فراہم کرتا ہے
3. ڈرائنگ شروع کریں! کانٹیکسٹ کے بلٹ ان طریقوں کا استعمال کرتے ہوئے اپنے گرافکس بنائیں

یہ کوڈ میں کیسے نظر آتا ہے:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

آئیے اسے قدم بہ قدم توڑتے ہیں:

• ہم اپنے کینوس عنصر کو پکڑتے ہیں اس کے ID کا استعمال کرتے ہوئے اور اسے ایک ویری ایبل میں اسٹور کرتے ہیں
• ہم 2D رینڈرنگ کانٹیکسٹ حاصل کرتے ہیں – یہ ہمارا ٹول کٹ ہے جو ڈرائنگ کے طریقوں سے بھرا ہوا ہے
• ہم کینوس کو بتاتے ہیں کہ ہم چیزوں کو سرخ رنگ سے بھرنا چاہتے ہیں fillStyle پراپرٹی کا استعمال کرتے ہوئے
• ہم ایک مستطیل ڈرائنگ کرتے ہیں جو اوپر بائیں کونے (0,0) سے شروع ہوتی ہے اور 200 پکسلز چوڑی اور اونچی ہے

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

آپ کینوس API کے ساتھ بہت سی چیزیں ڈرائنگ کر سکتے ہیں جیسے:

• جیومیٹریکل شکلیں، ہم نے پہلے ہی دکھایا کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، لیکن آپ اور بھی بہت کچھ ڈرائنگ کر سکتے ہیں۔
• ٹیکسٹ، آپ کسی بھی فونٹ اور رنگ کے ساتھ ٹیکسٹ ڈرائنگ کر سکتے ہیں۔
• تصاویر، آپ کسی تصویر کے اثاثے جیسے .jpg یا .png کی بنیاد پر تصویر ڈرائنگ کر سکتے ہیں۔

✅ اسے آزمائیں! آپ جانتے ہیں کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، کیا آپ صفحے پر ایک دائرہ ڈرائنگ کر سکتے ہیں؟ کچھ دلچسپ کینوس ڈرائنگز کو CodePen پر دیکھیں۔ یہاں ایک خاص طور پر متاثر کن مثال ہے۔

ایک تصویر اثاثہ لوڈ کریں اور ڈرائنگ کریں

بنیادی شکلیں ڈرائنگ کرنا شروع کرنے کے لیے مفید ہے، لیکن زیادہ تر گیمز کو اصل تصاویر کی ضرورت ہوتی ہے! اسپریٹس، بیک گراؤنڈز، اور ٹیکسچرز وہ ہیں جو گیمز کو بصری کشش دیتے ہیں۔ کینوس پر تصاویر لوڈ کرنا اور ڈسپلے کرنا جیومیٹریکل شکلوں کو ڈرائنگ کرنے سے مختلف کام کرتا ہے، لیکن ایک بار جب آپ عمل کو سمجھ لیں تو یہ آسان ہے۔

ہمیں ایک Image آبجیکٹ بنانا ہوگا، اپنی تصویر فائل لوڈ کرنی ہوگی (یہ غیر متزامن طور پر ہوتا ہے، مطلب "پس منظر میں")، اور پھر اسے کینوس پر ڈرائنگ کرنا ہوگا جب یہ تیار ہو جائے۔ یہ طریقہ یقینی بناتا ہے کہ آپ کی تصاویر صحیح طریقے سے ڈسپلے ہوں بغیر آپ کی ایپلیکیشن کو لوڈنگ کے دوران بلاک کیے۔

بنیادی تصویر لوڈنگ

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

اس کوڈ میں کیا ہو رہا ہے:

• ہم ایک نیا Image آبجیکٹ بناتے ہیں تاکہ ہمارا اسپریٹ یا ٹیکسچر رکھ سکے
• ہم اسے بتاتے ہیں کہ کون سی تصویر فائل لوڈ کرنی ہے سورس پاتھ سیٹ کرکے
• ہم لوڈ ایونٹ کے لیے سنتے ہیں تاکہ ہمیں بالکل معلوم ہو کہ تصویر کب استعمال کے لیے تیار ہے

تصاویر لوڈ کرنے کا ایک بہتر طریقہ

یہاں ایک زیادہ مضبوط طریقہ ہے جو پروفیشنل ڈیولپرز عام طور پر استعمال کرتے ہیں۔ ہم تصویر لوڈنگ کو ایک Promise-based فنکشن میں لپیٹیں گے – یہ طریقہ، جب جاوا اسکرپٹ Promises ES6 میں معیاری بنے، آپ کے کوڈ کو زیادہ منظم بناتا ہے اور غلطیوں کو خوبصورتی سے ہینڈل کرتا ہے:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

ہم نے یہاں کیا کیا:

• تمام تصویر لوڈنگ منطق کو ایک Promise میں لپیٹ دیا تاکہ ہم اسے بہتر طریقے سے ہینڈل کر سکیں
• غلطی ہینڈلنگ شامل کی جو ہمیں واقعی بتاتی ہے کہ جب کچھ غلط ہو جاتا ہے
• جدید async/await نحو استعمال کی کیونکہ یہ پڑھنے میں بہت صاف ہے
• try/catch بلاکس شامل کیے تاکہ لوڈنگ کے کسی بھی مسئلے کو خوبصورتی سے ہینڈل کیا جا سکے

ایک بار جب آپ کی تصاویر لوڈ ہو جائیں، انہیں کینوس پر ڈرائنگ کرنا دراصل کافی سیدھا ہے:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

آئیے اسے قدم بہ قدم دیکھتے ہیں:

• ہم اپنے ہیرو اور مونسٹر تصاویر کو پس منظر میں لوڈ کرتے ہیں await کا استعمال کرتے ہوئے
• ہم اپنے کینوس عنصر کو پکڑتے ہیں اور وہ 2D رینڈرنگ کانٹیکسٹ حاصل کرتے ہیں جس کی ہمیں ضرورت ہے
• ہم ہیرو تصویر کو بالکل مرکز میں پوزیشن دیتے ہیں کچھ فوری کوآرڈینیٹ میتھ کا استعمال کرتے ہوئے
• ہم مونسٹر تصویر کو اوپر بائیں کونے پر رکھتے ہیں تاکہ ہماری دشمن فارمیشن شروع ہو سکے
• ہم کسی بھی غلطی کو پکڑتے ہیں جو لوڈنگ یا رینڈرنگ کے دوران ہو سکتی ہیں

اب وقت ہے کہ آپ اپنا گیم بنانا شروع کریں

اب ہم سب کچھ ایک ساتھ رکھیں گے تاکہ آپ کے اسپیس گیم کے بصری بنیاد بنائی جا سکے۔ آپ کے پاس کینوس کی بنیادی باتوں اور تصویر لوڈنگ تکنیکوں کی ٹھوس سمجھ ہے، لہذا یہ عملی سیکشن آپ کو ایک مکمل گیم اسکرین بنانے کے لیے رہنمائی کرے گا جس میں صحیح طریقے سے پوزیشنڈ اسپریٹس ہوں۔

کیا بنانا ہے

آپ ایک ویب صفحہ بنائیں گے جس میں ایک کینوس عنصر ہوگا۔ یہ ایک سیاہ اسکرین 1024*768 رینڈر کرے گا۔ ہم نے آپ کو دو تصاویر فراہم کی ہیں:

• ہیرو شپ

  

• 5*5 مونسٹر

  

ترقی شروع کرنے کے لیے تجویز کردہ اقدامات

اسٹارٹر فائلز کو تلاش کریں جو آپ کے لیے your-work سب فولڈر میں بنائی گئی ہیں۔ آپ کے پروجیکٹ کی ساخت میں شامل ہونا چاہیے:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

یہ ہے جس کے ساتھ آپ کام کر رہے ہیں:

• گیم اسپریٹس assets/ فولڈر میں رہتے ہیں تاکہ سب کچھ منظم رہے
• آپ کی مین HTML فائل کینوس عنصر کو سیٹ اپ کرتی ہے اور سب کچھ تیار کرتی ہے
• ایک جاوا اسکرپٹ فائل جہاں آپ اپنا گیم رینڈرنگ جادو لکھیں گے
• ایک package.json جو ایک ترقیاتی سرور سیٹ اپ کرتا ہے تاکہ آپ مقامی طور پر ٹیسٹ کر سکیں

اس فولڈر کو Visual Studio Code میں کھولیں تاکہ ترقی شروع کی جا سکے۔ آپ کو Visual Studio Code، NPM، اور Node.js کے ساتھ ایک مقامی ترقیاتی ماحول کی ضرورت ہوگی۔ اگر آپ کے کمپیوٹر پر npm سیٹ اپ نہیں ہے، یہاں اسے انسٹال کرنے کا طریقہ ہے۔

اپنے ترقیاتی سرور کو your-work فولڈر پر نیویگیٹ کرکے شروع کریں:

cd your-work
npm start

یہ کمانڈ کچھ بہت زبردست کام کرتی ہے:

• ایک مقامی سرور شروع کرتی ہے http://localhost:5000 پر تاکہ آپ اپنا گیم ٹیسٹ کر سکیں
• آپ کی تمام فائلز کو صحیح طریقے سے سرو کرتی ہے تاکہ آپ کا براؤزر انہیں صحیح طریقے سے لوڈ کر سکے
• آپ کی فائلز کے لیے تبدیلیوں کو دیکھتی ہے تاکہ آپ آسانی سے ترقی کر سکیں
• آپ کو ایک پروفیشنل ترقیاتی ماحول دیتی ہے تاکہ سب کچھ ٹیسٹ کیا جا سکے

💡 نوٹ: آپ کا براؤزر ابتدائی طور پر ایک خالی صفحہ دکھائے گا – یہ متوقع ہے! جیسے جیسے آپ کوڈ شامل کریں گے، اپنے براؤزر کو ریفریش کریں تاکہ اپنی تبدیلیاں دیکھ سکیں۔ یہ ترقیاتی طریقہ NASA نے اپولو گائیڈنس کمپیوٹر بنانے کے لیے استعمال کیا تھا – ہر جزو کو بڑے نظام میں ضم کرنے سے پہلے ٹیسٹ کرنا۔

کوڈ شامل کریں

your-work/app.js میں مطلوبہ کوڈ شامل کریں تاکہ درج ذیل کام مکمل کیے جا سکیں:

1. ایک کینوس ڈرائنگ کریں جس کا پس منظر سیاہ ہو

   💡 یہاں کیسے: /app.js میں TODO تلاش کریں اور صرف دو لائنیں شامل کریں۔ ctx.fillStyle کو سیاہ سیٹ کریں، پھر ctx.fillRect() کا استعمال کریں جو (0,0) سے شروع ہو اور آپ کے کینوس کے طول و عرض کے ساتھ ہو۔ آسان!

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

   💡 یہاں کیسے: await loadAsset() کا استعمال کریں تاکہ اپنے پلیئر اور دشمن تصاویر لوڈ کریں۔ انہیں ویری ایبلز میں اسٹور کریں تاکہ آپ انہیں بعد میں استعمال کر سکیں۔ یاد رکھیں – وہ اس وقت تک ظاہر نہیں ہوں گی جب تک آپ انہیں واقعی ڈرائنگ نہ کریں!

3. ہیرو شپ کو مرکز-نیچے کی پوزیشن میں ڈرائنگ کریں

   💡 یہاں کیسے: ctx.drawImage() کا استعمال کریں تاکہ اپنے ہیرو کو پوزیشن دیں۔ x-کوآرڈینیٹ کے لیے، canvas.width / 2 - 45 آزمائیں تاکہ اسے مرکز میں رکھیں، اور y-کوآرڈینیٹ کے لیے canvas.height - canvas.height / 4 استعمال کریں تاکہ اسے نیچے کے علاقے میں رکھیں۔

4. دشمن جہازوں کی 5×5 فارمیشن ڈرائنگ کریں

   💡 یہاں کیسے: createEnemies فنکشن تلاش کریں اور ایک نیسٹڈ لوپ سیٹ اپ کریں۔ آپ کو اسپیسنگ اور پوزیشننگ کے لیے کچھ حساب کتاب کرنے کی ضرورت ہوگی، لیکن فکر نہ کریں – میں آپ کو بالکل دکھاؤں گا کہ کیسے!

پہلے، دشمن فارمیشن لے آؤٹ کے لیے مناسب کانسٹینٹس قائم کریں:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

آئیے ان کانسٹینٹس کو توڑتے ہیں:

• ہم پانچ دشمن فی قطار اور کالم سیٹ کرتے ہیں (ایک خوبصورت 5×5 گرڈ)
• ہم تعین کرتے ہیں کہ دشمنوں کے درمیان کتنا اسپیس رکھنا ہے تاکہ وہ تنگ نہ لگیں
• ہم حساب کرتے ہیں کہ ہماری پوری فارمیشن کتنی چوڑی ہوگی
• ہم پتہ لگاتے ہیں کہ کہاں سے شروع کریں اور کہاں ختم کریں تاکہ فارمیشن مرکز میں نظر آئے

پھر، دشمن فارمیشن ڈرائنگ کرنے کے لیے نیسٹڈ لوپس بنائیں:

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

یہ نیسٹڈ لوپ کیا کرتا ہے:

• بیرونی لوپ بائیں سے دائیں حرکت کرتا ہے ہماری فارمیشن کے پار
• اندرونی لوپ اوپر سے نیچے جاتا ہے تاکہ صاف قطاریں بنائی جا سکیں
• ہم ہر دشمن اسپریٹ کو ڈرائنگ کرتے ہیں بالکل ان x,y کوآرڈینیٹس پر جو ہم نے حساب کیے ہیں
• سب کچھ یکساں طور پر اسپیسڈ رہتا ہے تاکہ یہ پروفیشنل اور منظم نظر آئے

نتیجہ

مکمل نتیجہ کچھ اس طرح نظر آنا چاہیے:

حل

براہ کرم پہلے خود اسے حل کرنے کی کوشش کریں لیکن اگر آپ پھنس جائیں تو حل دیکھیں۔

---

GitHub Copilot ایجنٹ چیلنج 🚀

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

تفصیل: اپنے اسپیس گیم کینوس کو بصری اثرات اور انٹرایکٹو عناصر شامل کرکے بہتر بنائیں، کینوس API تکنیکوں کا استعمال کرتے ہوئے جو آپ نے سیکھا ہے۔

پرومپٹ: ایک نئی فائل بنائیں جس کا نام

---

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