|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "84053695dca714e16ed064366503ebd5",
|
|
|
"translation_date": "2025-10-22T22:00:39+00:00",
|
|
|
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
|
|
|
"language_code": "bn"
|
|
|
}
|
|
|
-->
|
|
|
# স্পেস গেম তৈরি করুন পার্ট ২: হিরো এবং মনস্টারদের ক্যানভাসে আঁকুন
|
|
|
|
|
|
ক্যানভাস API ওয়েব ডেভেলপমেন্টের অন্যতম শক্তিশালী ফিচার যা আপনার ব্রাউজারেই গতিশীল, ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে সাহায্য করে। এই পাঠে, আমরা সেই ফাঁকা HTML `<canvas>` উপাদানকে একটি গেমের জগতে রূপান্তর করব যেখানে থাকবে হিরো এবং মনস্টাররা। ক্যানভাসকে আপনার ডিজিটাল আর্ট বোর্ড হিসেবে ভাবুন যেখানে কোড ভিজ্যুয়াল হয়ে ওঠে।
|
|
|
|
|
|
আমরা আগের পাঠে যা শিখেছেন তার উপর ভিত্তি করে কাজ করছি, এবং এবার আমরা ভিজ্যুয়াল দিকগুলোতে গভীরভাবে প্রবেশ করব। আপনি শিখবেন কীভাবে গেম স্প্রাইট লোড এবং প্রদর্শন করতে হয়, উপাদানগুলো সঠিকভাবে অবস্থান করতে হয় এবং আপনার স্পেস গেমের জন্য ভিজ্যুয়াল ভিত্তি তৈরি করতে হয়। এটি স্থির ওয়েব পেজ এবং গতিশীল, ইন্টারঅ্যাকটিভ অভিজ্ঞতার মধ্যে সেতুবন্ধন তৈরি করে।
|
|
|
|
|
|
এই পাঠের শেষে, আপনার একটি সম্পূর্ণ গেম দৃশ্য থাকবে যেখানে আপনার হিরো শিপ সঠিকভাবে অবস্থান করবে এবং শত্রুদের ফর্মেশন যুদ্ধের জন্য প্রস্তুত থাকবে। আপনি বুঝতে পারবেন কীভাবে আধুনিক গেম ব্রাউজারে গ্রাফিক্স রেন্ডার করে এবং আপনার নিজস্ব ইন্টারঅ্যাকটিভ ভিজ্যুয়াল অভিজ্ঞতা তৈরি করার দক্ষতা অর্জন করবেন। চলুন ক্যানভাস গ্রাফিক্স অন্বেষণ করি এবং আপনার স্পেস গেমকে জীবন্ত করে তুলি!
|
|
|
|
|
|
## প্রি-লেকচার কুইজ
|
|
|
|
|
|
[প্রি-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/31)
|
|
|
|
|
|
## ক্যানভাস
|
|
|
|
|
|
তাহলে এই `<canvas>` উপাদানটি আসলে কী? এটি HTML5-এর সমাধান যা ওয়েব ব্রাউজারে গতিশীল গ্রাফিক্স এবং অ্যানিমেশন তৈরি করতে সাহায্য করে। সাধারণ ছবি বা ভিডিওর মতো স্থির নয়, ক্যানভাস আপনাকে স্ক্রিনে যা কিছু প্রদর্শিত হয় তার উপর পিক্সেল-লেভেল নিয়ন্ত্রণ দেয়। এটি গেম, ডেটা ভিজ্যুয়ালাইজেশন এবং ইন্টারঅ্যাকটিভ আর্টের জন্য একদম উপযুক্ত। এটি একটি প্রোগ্রামেবল ড্রয়িং সারফেস হিসেবে ভাবুন যেখানে জাভাস্ক্রিপ্ট আপনার রংতুলি হয়ে ওঠে।
|
|
|
|
|
|
ডিফল্টভাবে, একটি ক্যানভাস উপাদান আপনার পেজে একটি ফাঁকা, স্বচ্ছ আয়তক্ষেত্রের মতো দেখায়। কিন্তু এখানেই সম্ভাবনা লুকিয়ে আছে! এর আসল শক্তি প্রকাশ পায় যখন আপনি জাভাস্ক্রিপ্ট ব্যবহার করে আকৃতি আঁকেন, ছবি লোড করেন, অ্যানিমেশন তৈরি করেন এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতি সাড়া দেন। এটি অনেকটা ১৯৬০-এর দশকে বেল ল্যাবসের প্রথম ডিজিটাল অ্যানিমেশন তৈরি করার সময় কম্পিউটার গ্রাফিক্সের অগ্রদূতদের মতো।
|
|
|
|
|
|
✅ [ক্যানভাস API সম্পর্কে আরও পড়ুন](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN-এ।
|
|
|
|
|
|
এটি সাধারণত পেজের বডির অংশ হিসেবে এভাবে ঘোষণা করা হয়:
|
|
|
|
|
|
```html
|
|
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
|
|
```
|
|
|
|
|
|
**এই কোডটি যা করে:**
|
|
|
- **`id` অ্যাট্রিবিউট সেট করে** যাতে আপনি জাভাস্ক্রিপ্টে এই নির্দিষ্ট ক্যানভাস উপাদানটি রেফার করতে পারেন
|
|
|
- **পিক্সেলে `width` সংজ্ঞায়িত করে** ক্যানভাসের অনুভূমিক আকার নিয়ন্ত্রণ করতে
|
|
|
- **পিক্সেলে `height` নির্ধারণ করে** ক্যানভাসের উল্লম্ব মাত্রা নির্ধারণ করতে
|
|
|
|
|
|
## সাধারণ জ্যামিতিক আকৃতি আঁকা
|
|
|
|
|
|
এখন আপনি ক্যানভাস উপাদানটি কী তা জানেন, চলুন এটি ব্যবহার করে আঁকা শুরু করি! ক্যানভাস একটি কোঅর্ডিনেট সিস্টেম ব্যবহার করে যা গণিত ক্লাস থেকে পরিচিত মনে হতে পারে, তবে কম্পিউটার গ্রাফিক্সের জন্য একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে।
|
|
|
|
|
|
ক্যানভাস কার্টেসিয়ান কোঅর্ডিনেট ব্যবহার করে যেখানে একটি x-অক্ষ (অনুভূমিক) এবং একটি y-অক্ষ (উল্লম্ব) রয়েছে যা আপনি যা কিছু আঁকেন তার অবস্থান নির্ধারণ করে। তবে এখানে মূল পার্থক্য: গণিত ক্লাসের কোঅর্ডিনেট সিস্টেমের মতো নয়, `(0,0)` এর উৎপত্তি বিন্দুটি উপরের-বাম কোণে শুরু হয়, যেখানে x-মান ডানদিকে যাওয়ার সাথে সাথে বৃদ্ধি পায় এবং y-মান নিচে যাওয়ার সাথে সাথে বৃদ্ধি পায়। এই পদ্ধতি প্রাথমিক কম্পিউটার ডিসপ্লে থেকে এসেছে যেখানে ইলেকট্রন বিম উপরে থেকে নিচে স্ক্যান করত, ফলে উপরের-বাম প্রাকৃতিক শুরুর বিন্দু হয়ে ওঠে।
|
|
|
|
|
|
|
|
|
> ছবি [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) শুরু হয় এবং ২০০ পিক্সেল চওড়া এবং লম্বা
|
|
|
|
|
|
✅ ক্যানভাস 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-ভিত্তিক ফাংশনে মোড়াবো – এই পদ্ধতি, ES6-এ জাভাস্ক্রিপ্ট Promises স্ট্যান্ডার্ড হওয়ার সময় জনপ্রিয় হয়েছিল, আপনার কোডকে আরও সংগঠিত করে এবং ত্রুটি সুন্দরভাবে পরিচালনা করে:
|
|
|
|
|
|
```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` রেন্ডার করবে। আমরা আপনাকে দুটি ইমেজ দিয়েছি:
|
|
|
|
|
|
- হিরো শিপ
|
|
|
|
|
|
|
|
|
|
|
|
- 5*5 মনস্টার
|
|
|
|
|
|
|
|
|
|
|
|
### ডেভেলপমেন্ট শুরু করার জন্য প্রস্তাবিত ধাপ
|
|
|
|
|
|
`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-এর Apollo গাইডেন্স কম্পিউটার তৈরির মতো – প্রতিটি কম্পোনেন্ট পরীক্ষা করে বড় সিস্টেমে একত্রিত করার আগে।
|
|
|
|
|
|
### কোড যোগ করুন
|
|
|
|
|
|
`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 কোঅর্ডিনেটে যা আমরা গণনা করেছি
|
|
|
- সবকিছু **সমানভাবে স্পেসড থাকে** যাতে এটি পেশাদার এবং সংগঠিত দেখায়
|
|
|
|
|
|
## ফলাফল
|
|
|
|
|
|
শেষ ফলাফলটি এমন দেখতে হবে:
|
|
|
|
|
|
|
|
|
|
|
|
## সমাধান
|
|
|
|
|
|
প্রথমে নিজে চেষ্টা করুন, তবে যদি আটকে যান, তাহলে একটি [সমাধান](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) দেখুন।
|
|
|
|
|
|
---
|
|
|
|
|
|
## GitHub Copilot Agent চ্যালেঞ্জ 🚀
|
|
|
|
|
|
Agent মোড ব্যবহার করে নিম্নলিখিত চ্যালেঞ্জ সম্পন্ন করুন:
|
|
|
|
|
|
**বর্ণনা:** আপনার স্পেস গেম ক্যানভাসে ভিজ্যুয়াল ইফেক্ট এবং ইন্টারঅ্যাকটিভ উপাদান যোগ করুন ক
|
|
|
|
|
|
---
|
|
|
|
|
|
**অস্বীকৃতি**:
|
|
|
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। |
