42 KiB

Raw Blame History Unescape Escape

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

journey
    title Your Canvas Graphics Journey
    section Foundation
      Understand Canvas API: 3: Student
      Learn coordinate system: 4: Student
      Draw basic shapes: 4: Student
    section Image Handling
      Load game assets: 4: Student
      Handle async loading: 5: Student
      Position sprites: 5: Student
    section Game Rendering
      Create game screen: 5: Student
      Build formations: 5: Student
      Optimize performance: 4: Student

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

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

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

mindmap
  root((Canvas Graphics))
    Canvas Element
      HTML5 Feature
      2D Context
      Coordinate System
      Pixel Control
    Drawing Operations
      Basic Shapes
      Text Rendering
      Image Display
      Path Drawing
    Asset Management
      Image Loading
      Async Operations
      Error Handling
      Performance
    Game Rendering
      Sprite Positioning
      Formation Layout
      Scene Composition
      Frame Updates
    Visual Effects
      Colors & Styles
      Transformations
      Animations
      Layering

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

Холст

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

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

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

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

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

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

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

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

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

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

quadrantChart
    title Canvas Coordinate System
    x-axis Left --> Right
    y-axis Top --> Bottom
    quadrant-1 Quadrant 1
    quadrant-2 Quadrant 2  
    quadrant-3 Quadrant 3
    quadrant-4 Quadrant 4
    
    Origin Point: [0.1, 0.1]
    Hero Center: [0.5, 0.8]
    Enemy Formation: [0.3, 0.2]
    Power-up: [0.7, 0.6]
    UI Elements: [0.9, 0.1]

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

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

flowchart LR
    A[HTML Canvas Element] --> B[Get Canvas Reference]
    B --> C[Get 2D Context]
    C --> D[Drawing Operations]
    
    D --> E[Draw Shapes]
    D --> F[Draw Text]
    D --> G[Draw Images]
    D --> H[Apply Styles]
    
    E --> I[Render to Screen]
    F --> I
    G --> I
    H --> I
    
    style A fill:#e1f5fe
    style C fill:#e8f5e8
    style I fill:#fff3e0

Получите ссылку на ваш элемент Canvas из 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

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

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

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

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

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

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

🔄 Педагогическая проверка

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

✅ Объяснить, чем система координат холста отличается от математической системы координат
✅ Понять трехэтапный процесс операций рисования на холсте
✅ Определить, что предоставляет контекст рендеринга 2D
✅ Описать, как fillStyle и fillRect работают вместе

Быстрый тест: Как бы вы нарисовали синий круг в позиции (100, 50) с радиусом 25?

ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 50, 25, 0, 2 * Math.PI);
ctx.fill();

Методы рисования на холсте, которые вы теперь знаете:

fillRect(): Рисует заполненные прямоугольники
fillStyle: Устанавливает цвета и узоры
beginPath(): Начинает новые пути рисования
arc(): Создает круги и кривые

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

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

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

sequenceDiagram
    participant JS as JavaScript
    participant Img as Image Object
    participant Server as File Server
    participant Canvas as Canvas Context
    
    JS->>Img: new Image()
    JS->>Img: Set src property
    Img->>Server: Request image file
    Server->>Img: Return image data
    Img->>JS: Trigger onload event
    JS->>Canvas: drawImage(img, x, y)
    Canvas->>Canvas: Render to screen
    
    Note over JS,Canvas: Async loading prevents UI blocking

Базовая загрузка изображений

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 – этот подход, популяризированный, когда 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
Мы получаем наш элемент canvas и необходимый контекст рендеринга 2D
Мы позиционируем изображение героя прямо в центре, используя небольшую математику координат
Мы размещаем изображение монстра в верхнем левом углу, чтобы начать формирование врагов
Мы обрабатываем любые ошибки, которые могут возникнуть во время загрузки или рендеринга

flowchart TD
    A[Load Assets] --> B{All Images Loaded?}
    B -->|No| C[Show Loading]
    B -->|Yes| D[Get Canvas Context]
    C --> B
    D --> E[Clear Screen]
    E --> F[Draw Background]
    F --> G[Draw Enemy Formation]
    G --> H[Draw Hero Ship]
    H --> I[Apply Visual Effects]
    I --> J[Render Frame]
    
    subgraph "Rendering Pipeline"
        K[Asset Management]
        L[Scene Composition]
        M[Drawing Operations]
        N[Frame Output]
    end
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style I fill:#fff3e0

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

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

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

Вы создадите веб-страницу с элементом 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)
Мы определяем, сколько пространства оставить между врагами, чтобы они не выглядели тесно
Мы вычисляем, насколько широкой будет вся формация
Мы определяем, где начать и закончить, чтобы формация выглядела центрированной

flowchart LR
    A["Canvas Width: 1024px"] --> B["Formation Width: 490px"]
    B --> C["Start X: 267px"]
    C --> D["Enemy Spacing: 98px"]
    
    subgraph "5x5 Enemy Formation"
        E["Row 1: Y=0"]
        F["Row 2: Y=50"]
        G["Row 3: Y=100"]
        H["Row 4: Y=150"]
        I["Row 5: Y=200"]
    end
    
    subgraph "Column Spacing"
        J["Col 1: X=267"]
        K["Col 2: X=365"]
        L["Col 3: X=463"]
        M["Col 4: X=561"]
        N["Col 5: X=659"]
    end
    
    style A fill:#e1f5fe
    style B fill:#e8f5e8
    style C fill:#fff3e0

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

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, которые мы рассчитали
Все остается равномерно расположенным, чтобы выглядеть профессионально и организованно

🔄 Педагогическая проверка

Мастерство рендеринга игры: Убедитесь, что вы понимаете всю систему рендеринга:

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

Соображения производительности: Ваша игра теперь демонстрирует:

Эффективную загрузку ресурсов: Управление изображениями на основе Promise
Организованный рендеринг: Структурированные операции рисования
Математическое позиционирование: Вычисленное размещение спрайтов
Обработку ошибок: Аккуратное управление сбоями

Концепции визуального программирования: Вы изучили:

Системы координат: Перевод математических расчетов в экранные позиции
Управление спрайтами: Загрузка и отображение графики для игры
Алгоритмы формирования: Математические шаблоны для организованных макетов
Асинхронные операции: Современный JavaScript для плавного пользовательского опыта

Результат

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

Решение

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

Вызов GitHub Copilot Agent 🚀

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

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

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

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

🚀 Вызов

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

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

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

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

⚡ Что можно сделать за следующие 5 минут

Откройте консоль браузера и создайте элемент холста с помощью document.createElement('canvas')
Попробуйте нарисовать прямоугольник с помощью метода fillRect() на контексте холста
Поэкспериментируйте с разными цветами, используя свойство fillStyle
Нарисуйте простой круг с помощью метода arc()

🎯 Что можно достичь за час

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

📅 Ваш недельный путь изучения холста

Завершите космическую игру с улучшенной графикой и анимацией спрайтов
Освойте продвинутые техники работы с холстом, такие как градиенты, узоры и композитинг
Создайте интерактивные визуализации с использованием холста для представления данных
Узнайте о техниках оптимизации холста для плавной производительности
Постройте приложение для рисования или живописи с различными инструментами
Исследуйте творческое программирование и генеративное искусство с использованием холста

🌟 Ваш месячный путь к мастерству графики

Создайте сложные визуальные приложения с использованием Canvas 2D и WebGL
Изучите концепции программирования графики и основы шейдеров
Внесите вклад в открытые графические библиотеки и инструменты визуализации
Освойте оптимизацию производительности для графически интенсивных приложений
Создайте образовательный контент о программировании холста и компьютерной графике
Станьте экспертом в программировании графики, помогая другим создавать визуальные проекты

🎯 Ваш график освоения графики на холсте

timeline
    title Canvas API Learning Progression
    
    section Canvas Fundamentals (15 minutes)
        Basic Operations: Element reference
                        : 2D context access
                        : Coordinate system
                        : Simple shape drawing
        
    section Drawing Techniques (20 minutes)
        Graphics Primitives: Rectangles and circles
                           : Colors and styles
                           : Text rendering
                           : Path operations
        
    section Image Handling (25 minutes)
        Asset Management: Image object creation
                        : Async loading patterns
                        : Error handling
                        : Performance optimization
        
    section Game Graphics (30 minutes)
        Sprite Rendering: Positioning algorithms
                        : Formation calculations
                        : Scene composition
                        : Frame rendering
        
    section Advanced Techniques (40 minutes)
        Visual Effects: Transformations
                      : Animations
                      : Layering
                      : State management
        
    section Performance (35 minutes)
        Optimization: Efficient drawing
                    : Memory management
                    : Frame rate control
                    : Asset caching
        
    section Professional Skills (1 week)
        Production Graphics: WebGL integration
                           : Canvas libraries
                           : Game engines
                           : Cross-platform considerations
        
    section Advanced Graphics (1 month)
        Specialized Applications: Data visualization
                                : Interactive art
                                : Real-time effects
                                : 3D graphics

🛠️ Резюме вашего инструментария для работы с графикой на холсте

После завершения этого урока вы теперь обладаете:

Мастерством API Canvas: Полное понимание программирования 2D-графики
Математикой координат: Точные алгоритмы позиционирования и макета
Управлением ресурсами: Профессиональная загрузка изображений и обработка ошибок
Конвейером рендеринга: Структурированный подход к композиции сцены
Игровой графикой: Позиционирование спрайтов и расчеты формирования
Асинхронным программированием: Современные шаблоны JavaScript для плавной производительности
Визуальным программированием: Перевод математических концепций в экранную графику

Применение в реальном мире: Ваши навыки работы с Canvas напрямую применимы к:

Визуализации данных: Графики, диаграммы и интерактивные панели
Разработке игр: 2D-игры, симуляции и интерактивные приложения
Цифровому искусству: Творческое программирование и проекты генеративного искусства
UI/UX дизайну: Пользовательские графики и интерактивные элементы
Образовательному программному обеспечению: Инструменты визуального обучения и симуляции
Веб-приложениям: Динамическая графика и визуализация в реальном времени

Приобретенные профессиональные навыки: Теперь вы можете:

Создавать пользовательские графические решения без внешних библиотек
Оптимизировать производительность рендеринга для плавного пользовательского опыта
Отлаживать сложные визуальные проблемы с помощью инструментов разработчика браузера
Проектировать масштабируемые графические системы, используя математические принципы
Интегрировать графику Canvas с современными веб-фреймворками

Методы API Canvas, которые вы освоили:

Управление элементами: getElementById, getContext
Операции рисования: fillRect, drawImage, fillStyle
Загрузка ресурсов: Объекты Image, шаблоны Promise
Математическое позиционирование: Вычисления координат, алгоритмы формирования

Следующий уровень: Вы готовы добавить анимацию, взаимодействие с пользователем, обнаружение столкновений или изучить WebGL для 3D-графики!

🌟 Достижение разблокировано: Вы создали полноценную систему рендеринга игры, используя основные техники API Canvas!

Задание

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

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

42 KiB Raw Blame History Unescape Escape

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

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

Холст

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

🔄 Педагогическая проверка

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

Базовая загрузка изображений

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

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

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

Рекомендуемые шаги для начала разработки

Добавьте код

🔄 Педагогическая проверка

Результат

Решение

Вызов GitHub Copilot Agent 🚀

🚀 Вызов

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

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

⚡ Что можно сделать за следующие 5 минут

🎯 Что можно достичь за час

📅 Ваш недельный путь изучения холста

🌟 Ваш месячный путь к мастерству графики

🎯 Ваш график освоения графики на холсте

🛠️ Резюме вашего инструментария для работы с графикой на холсте

Задание

42 KiB

Raw Blame History Unescape Escape