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	4 weeks ago

README.md

Unescape Escape

Создание космической игры, часть 2: Рисуем героя и монстров на Canvas

Викторина перед лекцией

Canvas

Canvas — это HTML-элемент, который по умолчанию не содержит контента; это чистый холст. Вы должны добавлять на него элементы, рисуя их.

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

Обычно он объявляется следующим образом, как часть тела страницы:

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

В приведенном выше примере мы задаем id, width и height.

id: задается для того, чтобы вы могли получить ссылку на элемент, когда нужно с ним взаимодействовать.
width: ширина элемента.
height: высота элемента.

Рисование простой геометрии

Canvas использует декартову систему координат для рисования. Таким образом, он использует оси x и y для указания местоположения объекта. Точка 0,0 находится в верхнем левом углу, а нижний правый угол определяется значениями WIDTH и HEIGHT холста.

Изображение с 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);
    }
  }
```

Результат

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

Решение

Попробуйте решить задачу самостоятельно, но если у вас возникнут трудности, посмотрите решение.

🚀 Задание

Вы узнали о рисовании с помощью 2D-ориентированного Canvas API. Ознакомьтесь с WebGL API и попробуйте нарисовать 3D-объект.

Викторина после лекции

Обзор и самостоятельное изучение

Узнайте больше о Canvas API, прочитав об этом.

Задание

Попробуйте Canvas API

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

README.md Unescape Escape