History

leestott a2fda673a6 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Unescape Escape

Створення космічної гри, частина 2: Малюємо героя та монстрів на Canvas

Тест перед лекцією

Canvas

Canvas — це HTML-елемент, який за замовчуванням не має вмісту; це чистий аркуш. Ви повинні додати до нього елементи, малюючи на ньому.

✅ Прочитайте більше про Canvas API на MDN.

Ось як зазвичай оголошується Canvas як частина тіла сторінки:

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

Вищезазначений код встановлює id, width і height.

id: встановіть це, щоб отримати посилання, коли вам потрібно взаємодіяти з елементом.
width: це ширина елемента.
height: це висота елемента.

Малювання простих геометричних фігур

Canvas використовує декартову систему координат для малювання. Таким чином, він використовує осі x і y для визначення місця розташування об'єкта. Точка 0,0 — це верхній лівий кут, а нижній правий кут відповідає значенням WIDTH і HEIGHT Canvas.

Зображення з MDN

Щоб малювати на елементі Canvas, потрібно виконати наступні кроки:

Отримати посилання на елемент Canvas.
Отримати посилання на елемент Context, який знаходиться на Canvas.
Виконати операцію малювання за допомогою елемента 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

✅ Canvas API здебільшого зосереджений на 2D-фігурах, але ви також можете малювати 3D-елементи на веб-сторінці; для цього можна використовувати WebGL API.

За допомогою Canvas API можна малювати різні елементи, такі як:

Геометричні фігури. Ми вже показали, як намалювати прямокутник, але є багато інших форм, які можна створити.
Текст. Ви можете малювати текст із будь-яким шрифтом і кольором.
Зображення. Ви можете малювати зображення на основі графічних файлів, таких як .jpg або .png.

✅ Спробуйте! Ви знаєте, як намалювати прямокутник, чи можете ви намалювати коло на сторінці? Подивіться на цікаві приклади малюнків Canvas на 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);
}

Тепер час почати створювати вашу гру

Що створювати

Ви створите веб-сторінку з елементом Canvas. Вона повинна відображати чорний екран розміром 1024*768. Ми надали вам два зображення:

Корабель героя
5*5 монстрів

Додайте код

Додайте необхідний код до your-work/app.js, щоб виконати наступне:

Намалюйте Canvas із чорним фоном.

Порада: додайте два рядки під відповідним TODO у /app.js, встановивши елемент ctx чорним, а верхні/ліві координати — 0,0, а висоту та ширину — рівними розмірам Canvas.
Завантажте текстури.

Порада: додайте зображення гравця та ворога, використовуючи 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);
    }
  }
```

Результат

Готовий результат повинен виглядати так:

Рішення

Спробуйте вирішити завдання самостійно, але якщо ви застрягли, перегляньте рішення.

🚀 Виклик

Ви дізналися про малювання за допомогою Canvas API, орієнтованого на 2D; ознайомтеся з WebGL API і спробуйте намалювати 3D-об'єкт.

Тест після лекції

Огляд і самостійне навчання

Дізнайтеся більше про Canvas API, прочитавши про нього.

Завдання

Попрацюйте з Canvas API

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

README.md Unescape Escape