History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	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