39 KiB

Raw Blame History Unescape Escape

Створення космічної гри, частина 2: Малюємо героя та монстрів на Canvas

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

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

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

До кінця цього уроку у вас буде повна ігрова сцена з правильно розташованим кораблем героя та формаціями ворогів, готовими до бою. Ви зрозумієте, як сучасні ігри рендерять графіку в браузерах, і здобудете навички для створення власних інтерактивних візуальних проектів. Давайте дослідимо графіку 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

Що ж таке цей елемент <canvas>? Це рішення HTML5 для створення динамічної графіки та анімації у веб-браузерах. На відміну від звичайних зображень чи відео, які є статичними, canvas дає вам контроль над кожним пікселем на екрані. Це робить його ідеальним для ігор, візуалізації даних та інтерактивного мистецтва. Уявіть його як програмовану поверхню для малювання, де JavaScript стає вашим пензлем.

За замовчуванням елемент canvas виглядає як порожній, прозорий прямокутник на вашій сторінці. Але саме тут прихована його потенціальна сила! Його справжня міць проявляється, коли ви використовуєте JavaScript для малювання форм, завантаження зображень, створення анімацій та забезпечення взаємодії з користувачем. Це схоже на те, як піонери комп'ютерної графіки в Bell Labs у 1960-х роках програмували кожен піксель для створення перших цифрових анімацій.

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

Ось як зазвичай оголошується canvas, як частина тіла сторінки:

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

Що робить цей код:

Встановлює атрибут id, щоб ви могли звертатися до цього конкретного елемента canvas у JavaScript
Визначає ширину в пікселях для контролю горизонтального розміру canvas
Встановлює висоту в пікселях для визначення вертикальних розмірів canvas

Малювання простих геометричних форм

Тепер, коли ви знаєте, що таке елемент canvas, давайте дослідимо, як на ньому малювати! Canvas використовує систему координат, яка може здатися знайомою з уроків математики, але є одна важлива особливість, специфічна для комп'ютерної графіки.

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, ви будете дотримуватися того самого триетапного процесу, який є основою всієї графіки 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 – це наш набір інструментів для малювання
Ми вказуємо canvas, що хочемо заповнити речі червоним кольором, використовуючи властивість fillStyle
Ми малюємо прямокутник, починаючи з верхнього лівого кута (0,0), шириною та висотою 200 пікселів

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

Ви можете малювати всілякі речі за допомогою Canvas API, наприклад:

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

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

🔄 Педагогічна перевірка

Розуміння основ Canvas: Перед переходом до завантаження зображень переконайтеся, що ви можете:

✅ Пояснити, чим система координат canvas відрізняється від математичної системи координат
✅ Зрозуміти триетапний процес операцій малювання на canvas
✅ Визначити, що забезпечує контекст рендерингу 2D
✅ Описати, як fillStyle і fillRect працюють разом

Швидкий самотест: Як би ви намалювали синє коло в позиції (100, 50) з радіусом 25?

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

Методи малювання Canvas, які ви тепер знаєте:

fillRect(): Малює заповнені прямокутники
fillStyle: Встановлює кольори та шаблони
beginPath(): Починає нові шляхи малювання
arc(): Створює кола та криві

Завантаження та малювання графічного ресурсу

Малювання базових форм корисне для початку, але більшість ігор потребують реальних зображень! Спрайти, фони та текстури — це те, що надає іграм їхню візуальну привабливість. Завантаження та відображення зображень на canvas працює інакше, ніж малювання геометричних форм, але це досить просто, якщо зрозуміти процес.

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

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 – цей підхід, популяризований, коли 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 для акуратного оброблення будь-яких проблем із завантаженням

Коли ваші зображення завантажені, їх малювання на canvas насправді досить просте:

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 і технік завантаження зображень, тому цей практичний розділ проведе вас через створення повного ігрового екрану з правильно розташованими спрайтами.

Що створити

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

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

Додайте код

Додайте необхідний код до your-work/app.js, щоб виконати наступні завдання:

Намалюйте canvas з чорним фоном

💡 Як це зробити: Знайдіть TODO у /app.js і додайте лише два рядки. Встановіть ctx.fillStyle у чорний, потім використовуйте ctx.fillRect(), починаючи з (0,0) з розмірами вашого canvas. Легко!
Завантажте текстури гри

💡 Як це зробити: Використовуйте 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, які ми обчислили
Все залишається рівномірно розташованим, щоб виглядало профес
Системи координат: Перетворення математичних даних у позиції на екрані
Управління спрайтами: Завантаження та відображення графіки гри
Алгоритми формування: Математичні шаблони для організованих макетів
Асинхронні операції: Сучасний JavaScript для плавного користувацького досвіду

Результат

Готовий результат має виглядати так:

Рішення

Спробуйте вирішити це самостійно, але якщо застрягнете, перегляньте рішення

Виклик GitHub Copilot Agent 🚀

Використовуйте режим Agent, щоб виконати наступний виклик:

Опис: Покращіть ваш космічний ігровий екран, додавши візуальні ефекти та інтерактивні елементи, використовуючи техніки Canvas API, які ви вивчили.

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

Дізнайтеся більше про режим Agent тут.

🚀 Виклик

Ви вивчили малювання за допомогою Canvas API, орієнтованого на 2D; ознайомтеся з WebGL API і спробуйте намалювати 3D-об'єкт.

Післялекційний тест

Огляд і самостійне навчання

Дізнайтеся більше про Canvas API, прочитавши про нього.

⚡ Що ви можете зробити за наступні 5 хвилин

Відкрийте консоль браузера і створіть елемент canvas за допомогою document.createElement('canvas')
Спробуйте намалювати прямокутник за допомогою методу fillRect() на контексті canvas
Експериментуйте з різними кольорами, використовуючи властивість fillStyle
Намалюйте просте коло за допомогою методу arc()

🎯 Що ви можете досягти за годину

Пройдіть післялекційний тест і зрозумійте основи canvas
Створіть додаток для малювання на canvas з різними формами та кольорами
Реалізуйте завантаження зображень і рендеринг спрайтів для вашої гри
Побудуйте просту анімацію, яка переміщує об'єкти по canvas
Практикуйте трансформації canvas, такі як масштабування, обертання та переміщення

📅 Ваш тижневий шлях освоєння Canvas

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

🌟 Ваш місячний шлях до майстерності графіки

Створіть складні візуальні додатки, використовуючи Canvas 2D і WebGL
Вивчіть концепції графічного програмування та основи шейдерів
Внесіть вклад у відкриті графічні бібліотеки та інструменти візуалізації
Освойте оптимізацію продуктивності для графічно інтенсивних додатків
Створіть навчальний контент про програмування canvas і комп'ютерну графіку
Станьте експертом у графічному програмуванні, який допомагає іншим створювати візуальні досвіди

🎯 Ваш графічний шлях до майстерності Canvas

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

🛠️ Підсумок вашого інструментарію Canvas Graphics

Після завершення цього уроку ви тепер маєте:

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

Застосування в реальному світі: Ваші навички Canvas безпосередньо застосовуються до:

Візуалізації даних: Діаграми, графіки та інтерактивні панелі
Розробки ігор: 2D-ігри, симуляції та інтерактивні досвіди
Цифрового мистецтва: Творче кодування та проекти генеративного мистецтва
UI/UX дизайну: Кастомна графіка та інтерактивні елементи
Освітнього програмного забезпечення: Візуальні навчальні інструменти та симуляції
Веб-додатків: Динамічна графіка та візуалізації в реальному часі

Професійні навички, які ви здобули: Тепер ви можете:

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

Методи Canvas API, які ви освоїли:

Управління елементами: getElementById, getContext
Операції малювання: fillRect, drawImage, fillStyle
Завантаження ресурсів: Об'єкти Image, шаблони Promise
Математичне позиціонування: Розрахунки координат, алгоритми формування

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

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

Завдання

Попрацюйте з Canvas API

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

39 KiB Raw Blame History Unescape Escape