12 KiB

Raw Blame History 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);
    }
  }
```

Результат

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

Решение

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

🚀 Задание

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

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

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

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

Задание

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

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

12 KiB Raw Blame History Unescape Escape