History

softchris 9837770ac1 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

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

API Canvas — одна из самых мощных функций веб-разработки для создания динамической, интерактивной графики прямо в вашем браузере. В этом уроке мы превратим пустой HTML-элемент <canvas> в игровой мир, наполненный героями и монстрами. Представьте себе холст как цифровую художественную доску, где код становится визуальным.

Мы продолжаем то, что вы изучили в предыдущем уроке, и теперь углубимся в визуальные аспекты. Вы узнаете, как загружать и отображать игровые спрайты, точно позиционировать элементы и создавать визуальную основу для вашей космической игры. Это мост между статическими веб-страницами и динамическими, интерактивными впечатлениями.

К концу этого урока у вас будет готовая игровая сцена с правильно расположенным кораблем героя и формациями врагов, готовыми к бою. Вы поймете, как современные игры отображают графику в браузерах, и получите навыки для создания собственных интерактивных визуальных проектов. Давайте изучим графику на холсте и оживим вашу космическую игру!

Предварительный тест

Холст

Что же такое этот элемент <canvas>? Это решение HTML5 для создания динамической графики и анимации в веб-браузерах. В отличие от обычных изображений или видео, которые статичны, холст дает вам контроль над каждым пикселем на экране. Это делает его идеальным для игр, визуализации данных и интерактивного искусства. Представьте его как программируемую поверхность для рисования, где JavaScript становится вашей кистью.

По умолчанию элемент холста выглядит как пустой, прозрачный прямоугольник на вашей странице. Но именно в этом заключается его потенциал! Его настоящая мощь раскрывается, когда вы используете JavaScript для рисования фигур, загрузки изображений, создания анимации и реакции на взаимодействие пользователя. Это похоже на то, как пионеры компьютерной графики в Bell Labs в 1960-х годах программировали каждый пиксель для создания первых цифровых анимаций.

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

Вот как обычно объявляется холст, как часть тела страницы:

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

Что делает этот код:

Устанавливает атрибут id, чтобы вы могли ссылаться на этот конкретный элемент холста в JavaScript
Определяет ширину в пикселях для управления горизонтальным размером холста
Устанавливает высоту в пикселях для определения вертикальных размеров холста

Рисуем простую геометрию

Теперь, когда вы знаете, что такое элемент холста, давайте изучим, как на нем рисовать! Холст использует систему координат, которая может показаться знакомой из уроков математики, но есть одно важное отличие, специфичное для компьютерной графики.

Холст использует декартовы координаты с осью x (горизонтальной) и осью y (вертикальной) для позиционирования всего, что вы рисуете. Но вот ключевое отличие: в отличие от системы координат из математики, точка начала (0,0) находится в верхнем левом углу, причем значения x увеличиваются при движении вправо, а значения y увеличиваются при движении вниз. Этот подход берет начало от ранних компьютерных дисплеев, где электронные лучи сканировали сверху вниз, делая верхний левый угол естественной точкой начала.

Изображение с MDN

Чтобы рисовать на элементе холста, вы будете следовать тому же трехэтапному процессу, который составляет основу всей графики на холсте. Как только вы сделаете это несколько раз, это станет привычным:

Получите ссылку на ваш элемент холста из DOM (так же, как и на любой другой HTML-элемент)
Получите контекст рендеринга 2D – он предоставляет все методы рисования
Начните рисовать! Используйте встроенные методы контекста для создания вашей графики

Вот как это выглядит в коде:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Давайте разберем это шаг за шагом:

Мы получаем наш элемент холста, используя его ID, и сохраняем его в переменной
Мы получаем контекст рендеринга 2D – это наш набор инструментов для рисования
Мы говорим холсту, что хотим заполнять элементы красным цветом, используя свойство fillStyle
Мы рисуем прямоугольник, начиная с верхнего левого угла (0,0), шириной и высотой 200 пикселей

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

С помощью Canvas API можно рисовать множество вещей, таких как:

Геометрические фигуры, мы уже показали, как нарисовать прямоугольник, но есть еще много других форм.
Текст, вы можете рисовать текст с любым шрифтом и цветом, который вам нравится.
Изображения, вы можете рисовать изображение на основе графического файла, например .jpg или .png.

✅ Попробуйте! Вы знаете, как нарисовать прямоугольник, сможете ли вы нарисовать круг на странице? Посмотрите на некоторые интересные рисунки на холсте на CodePen. Вот особенно впечатляющий пример.

Загрузка и рисование графического ресурса

Рисование простых фигур полезно для начала, но большинству игр нужны настоящие изображения! Спрайты, фоны и текстуры придают играм визуальную привлекательность. Загрузка и отображение изображений на холсте работает иначе, чем рисование геометрических фигур, но это просто, как только вы поймете процесс.

Нам нужно создать объект Image, загрузить наш графический файл (это происходит асинхронно, то есть "в фоне"), а затем нарисовать его на холсте, как только он будет готов. Такой подход гарантирует, что ваши изображения отображаются правильно, не блокируя приложение во время загрузки.

Основы загрузки изображений

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

Что происходит в этом коде:

Мы создаем совершенно новый объект Image для хранения нашего спрайта или текстуры
Мы указываем, какой графический файл загрузить, задавая путь к источнику
Мы слушаем событие загрузки, чтобы точно знать, когда изображение готово к использованию

Более надежный способ загрузки изображений

Вот более надежный способ обработки загрузки изображений, который часто используют профессиональные разработчики. Мы обернем логику загрузки изображений в функцию на основе Promise – этот подход, популяризированный, когда JavaScript Promises стал стандартом в ES6, делает ваш код более организованным и позволяет аккуратно обрабатывать ошибки:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Что мы сделали здесь:

Объединили всю логику загрузки изображений в Promise, чтобы лучше управлять процессом
Добавили обработку ошибок, которая действительно сообщает нам, если что-то пошло не так
Использовали современный синтаксис async/await, потому что он гораздо удобнее для чтения
Включили блоки try/catch для аккуратной обработки любых проблем с загрузкой

Как только ваши изображения загружены, их рисование на холсте становится довольно простым:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Давайте разберем это шаг за шагом:

Мы загружаем изображения героя и монстра в фоне, используя await
Мы получаем наш элемент холста и необходимый контекст рендеринга 2D
Мы позиционируем изображение героя прямо в центре, используя небольшую математику координат
Мы размещаем изображение монстра в верхнем левом углу, чтобы начать формирование врагов
Мы обрабатываем любые ошибки, которые могут возникнуть во время загрузки или рендеринга

Теперь пора начинать создавать вашу игру

Теперь мы объединим все вместе, чтобы создать визуальную основу вашей космической игры. У вас есть прочное понимание основ холста и техник загрузки изображений, поэтому этот практический раздел проведет вас через создание полного игрового экрана с правильно расположенными спрайтами.

Что нужно создать

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

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

Добавьте код

Добавьте необходимый код в your-work/app.js, чтобы выполнить следующие задачи:

Нарисуйте холст с черным фоном

💡 Как это сделать: Найдите TODO в /app.js и добавьте всего две строки. Установите ctx.fillStyle в черный цвет, затем используйте ctx.fillRect(), начиная с (0,0) с размерами вашего холста. Легко!
Загрузите игровые текстуры

💡 Как это сделать: Используйте await loadAsset() для загрузки изображений игрока и врага. Сохраните их в переменных, чтобы использовать позже. Помните – они не появятся, пока вы их не нарисуете!
Нарисуйте корабль героя в центре нижней части экрана

💡 Как это сделать: Используйте ctx.drawImage() для позиционирования героя. Для координаты x попробуйте canvas.width / 2 - 45, чтобы центрировать его, а для координаты y используйте canvas.height - canvas.height / 4, чтобы разместить его в нижней части.
Нарисуйте формацию врагов 5×5

💡 Как это сделать: Найдите функцию createEnemies и настройте вложенный цикл. Вам нужно будет сделать некоторые вычисления для расстояния и позиционирования, но не волнуйтесь – я покажу вам, как!

Сначала установите константы для правильной компоновки формации врагов:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Давайте разберем, что делают эти константы:

Мы устанавливаем 5 врагов в каждом ряду и колонке (красивая сетка 5×5)
Мы определяем, сколько пространства оставить между врагами, чтобы они не выглядели тесно
Мы вычисляем, насколько широкой будет вся формация
Мы определяем, где начать и закончить, чтобы формация выглядела центрированной

Затем создайте вложенные циклы для рисования формации врагов:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

Что делает этот вложенный цикл:

Внешний цикл перемещается слева направо по нашей формации
Внутренний цикл проходит сверху вниз, создавая аккуратные ряды
Мы рисуем каждый спрайт врага в точных координатах x, y, которые мы рассчитали
Все остается равномерно расположенным, чтобы выглядеть профессионально и организованно

Результат

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

Решение

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

Задание GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

Описание: Улучшите холст вашей космической игры, добавив визуальные эффекты и интерактивные элементы, используя изученные техники Canvas API.

Задание: Создайте новый файл enhanced-canvas.html с холстом, который отображает анимированные звезды на фоне, пульсирующую шкалу здоровья для корабля героя и корабли врагов, которые медленно движутся вниз. Включите JavaScript-код, который рисует мерцающие звезды с случайными позициями и прозрачностью, реализует шкалу здоровья, меняющую цвет в зависимости от уровня здоровья (зеленый > желтый > красный), и анимирует корабли врагов, чтобы они двигались вниз с разной скоростью.

Узнайте больше о режиме Agent здесь.

🚀 Вызов

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

Тест после лекции

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

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

Задание

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

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

README.md Unescape Escape