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

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "84053695dca714e16ed064366503ebd5",
  "translation_date": "2025-10-22T15:08:51+00:00",
  "source_file": "6-space-game/2-drawing-to-canvas/README.md",
  "language_code": "ur"
}
-->
# اسپیس گیم بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر ڈرائنگ کریں

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

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

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

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

[پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/31)

## کینوس

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

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

✅ [کینوس API کے بارے میں مزید پڑھیں](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN پر۔

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

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

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

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

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

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

![کینوس کا گرڈ](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ur.png)
> تصویر [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) سے

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

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

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

```javascript
// 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](https://developer.mozilla.org/docs/Web/API/WebGL_API) استعمال کر سکتے ہیں۔

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

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

✅ اسے آزمائیں! آپ جانتے ہیں کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، کیا آپ صفحے پر ایک دائرہ ڈرائنگ کر سکتے ہیں؟ کچھ دلچسپ کینوس ڈرائنگز کو CodePen پر دیکھیں۔ یہاں ایک [خاص طور پر متاثر کن مثال](https://codepen.io/dissimulate/pen/KrAwx) ہے۔

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

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

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

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

```javascript
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 میں معیاری بنے، آپ کے کوڈ کو زیادہ منظم بناتا ہے اور غلطیوں کو خوبصورتی سے ہینڈل کرتا ہے:

```javascript
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 بلاکس شامل کیے** تاکہ لوڈنگ کے کسی بھی مسئلے کو خوبصورتی سے ہینڈل کیا جا سکے

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

```javascript
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` رینڈر کرے گا۔ ہم نے آپ کو دو تصاویر فراہم کی ہیں:

- ہیرو شپ

   ![ہیرو شپ](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ur.png)

- 5*5 مونسٹر

   ![مونسٹر شپ](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ur.png)

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

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

```bash
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` سیٹ اپ نہیں ہے، [یہاں اسے انسٹال کرنے کا طریقہ](https://www.npmjs.com/get-npm) ہے۔

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

```bash
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` فنکشن تلاش کریں اور ایک نیسٹڈ لوپ سیٹ اپ کریں۔ آپ کو اسپیسنگ اور پوزیشننگ کے لیے کچھ حساب کتاب کرنے کی ضرورت ہوگی، لیکن فکر نہ کریں – میں آپ کو بالکل دکھاؤں گا کہ کیسے!

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

```javascript
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 گرڈ)
- ہم **تعین کرتے ہیں** کہ دشمنوں کے درمیان کتنا اسپیس رکھنا ہے تاکہ وہ تنگ نہ لگیں
- ہم **حساب کرتے ہیں** کہ ہماری پوری فارمیشن کتنی چوڑی ہوگی
- ہم **پتہ لگاتے ہیں** کہ کہاں سے شروع کریں اور کہاں ختم کریں تاکہ فارمیشن مرکز میں نظر آئے

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

```javascript
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 کوآرڈینیٹس پر جو ہم نے حساب کیے ہیں
- سب کچھ **یکساں طور پر اسپیسڈ رہتا ہے** تاکہ یہ پروفیشنل اور منظم نظر آئے

## نتیجہ

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

![سیاہ اسکرین جس پر ایک ہیرو اور 5×5 مونسٹرز ہیں](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ur.png)

## حل

براہ کرم پہلے خود اسے حل کرنے کی کوشش کریں لیکن اگر آپ پھنس جائیں تو [حل](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) دیکھیں۔

---

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

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

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

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

---

**ڈسکلیمر**:  
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔