11 KiB

Raw Permalink Blame History

ساخت یک بازی فضایی قسمت دوم: رسم قهرمان و هیولاها روی بوم

آزمون پیش از درس

بوم

بوم یک عنصر HTML است که به طور پیش‌فرض هیچ محتوایی ندارد؛ یک صفحه خالی است. شما باید با رسم روی آن، محتوا اضافه کنید.

در اینجا نحوه تعریف معمولی آن به عنوان بخشی از بدنه صفحه آمده است:

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

در بالا، id، width و height تنظیم شده‌اند.

id: این را تنظیم کنید تا بتوانید زمانی که نیاز به تعامل با آن دارید، به آن دسترسی پیدا کنید.
width: این عرض عنصر است.
height: این ارتفاع عنصر است.

رسم اشکال ساده

بوم از یک سیستم مختصات کارتزین برای رسم استفاده می‌کند. بنابراین از محور x و محور y برای بیان مکان چیزی استفاده می‌کند. مکان 0,0 گوشه بالا سمت چپ است و گوشه پایین سمت راست همان چیزی است که شما به عنوان عرض و ارتفاع بوم تعیین کرده‌اید.

تصویر از MDN

برای رسم روی عنصر بوم، باید مراحل زیر را طی کنید:

دریافت مرجع عنصر بوم.
دریافت مرجع عنصر Context که روی عنصر بوم قرار دارد.
انجام عملیات رسم با استفاده از عنصر Context.

کد مربوط به مراحل بالا معمولاً به این شکل است:

// 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 بوم بیشتر بر اشکال دوبعدی تمرکز دارد، اما شما می‌توانید عناصر سه‌بعدی را نیز روی یک وب‌سایت رسم کنید؛ برای این کار ممکن است از 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 را در آدرس http://localhost:5000 راه‌اندازی می‌کند. یک مرورگر باز کنید و این آدرس را وارد کنید. در حال حاضر یک صفحه خالی است، اما این تغییر خواهد کرد.

توجه: برای مشاهده تغییرات روی صفحه، مرورگر خود را تازه‌سازی کنید.

اضافه کردن کد

کد مورد نیاز را به your-work/app.js اضافه کنید تا موارد زیر را حل کنید:

رسم یک بوم با پس‌زمینه سیاه

نکته: دو خط زیر TODO مناسب در /app.js اضافه کنید، عنصر ctx را به رنگ سیاه تنظیم کنید و مختصات بالا/چپ را روی 0,0 و ارتفاع و عرض را برابر با بوم قرار دهید.
بارگذاری تکسچرها

نکته: تصاویر بازیکن و دشمن را با استفاده از await loadTexture و مسیر تصویر اضافه کنید. هنوز آن‌ها را روی صفحه نخواهید دید!
رسم قهرمان در مرکز صفحه در نیمه پایین

نکته: از API drawImage برای رسم heroImg روی صفحه استفاده کنید، مختصات را روی canvas.width / 2 - 45 و canvas.height - canvas.height / 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);
    }
  }
```

نتیجه

نتیجه نهایی باید به این شکل باشد:

راه‌حل

لطفاً ابتدا خودتان سعی کنید آن را حل کنید، اما اگر گیر کردید، به راه‌حل نگاهی بیندازید.

🚀 چالش

شما درباره رسم با API دوبعدی بوم یاد گرفتید؛ نگاهی به WebGL API بیندازید و سعی کنید یک شیء سه‌بعدی رسم کنید.

آزمون پس از درس

مرور و مطالعه شخصی

بیشتر درباره API بوم یاد بگیرید با مطالعه درباره آن.

تکلیف

بازی با API بوم

سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

11 KiB Raw Permalink Blame History