28 KiB

Raw Blame History Unescape Escape

Створення космічної гри, частина 5: Очки та життя

journey
    title Your Game Design Journey
    section Player Feedback
      Understand scoring psychology: 3: Student
      Learn visual communication: 4: Student
      Design reward systems: 4: Student
    section Technical Implementation
      Canvas text rendering: 4: Student
      State management: 5: Student
      Event-driven updates: 5: Student
    section Game Polish
      User experience design: 5: Student
      Balance challenge and reward: 5: Student
      Create engaging gameplay: 5: Student

Тест перед лекцією

Готові зробити вашу космічну гру справжньою грою? Давайте додамо систему очок і управління життями — основні механіки, які перетворили ранні аркадні ігри, такі як Space Invaders, із простих демонстрацій у захоплююче розваги. Саме тут ваша гра стає дійсно цікавою.

mindmap
  root((Game Feedback Systems))
    Visual Communication
      Text Rendering
      Icon Display
      Color Psychology
      Layout Design
    Scoring Mechanics
      Point Values
      Reward Timing
      Progress Tracking
      Achievement Systems
    Life Management
      Risk vs Reward
      Player Agency
      Difficulty Balance
      Recovery Mechanics
    User Experience
      Immediate Feedback
      Clear Information
      Emotional Response
      Engagement Loops
    Implementation
      Canvas API
      State Management
      Event Systems
      Performance

Відображення тексту на екрані — голос вашої гри

Щоб показати ваші очки, нам потрібно навчитися відображати текст на полотні. Метод fillText() — ваш основний інструмент для цього. Це той самий метод, який використовували в класичних аркадних іграх для показу очок і статусу.

flowchart LR
    A["📝 Text Content"] --> B["🎨 Styling"]
    B --> C["📍 Positioning"]
    C --> D["🖼️ Canvas Render"]
    
    E["Font Family"] --> B
    F["Font Size"] --> B
    G["Color"] --> B
    H["Alignment"] --> B
    
    I["X Coordinate"] --> C
    J["Y Coordinate"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

Ви маєте повний контроль над виглядом тексту:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Дізнайтеся більше про додавання тексту на полотно — можливо, ви здивуєтеся, наскільки творчо можна підійти до шрифтів і стилів!

Життя — більше, ніж просто число

У дизайні ігор "життя" представляє запас помилок гравця. Ця концепція бере початок із пінболу, де ви отримували кілька куль для гри. У ранніх відеоіграх, таких як Asteroids, життя давали гравцям можливість ризикувати і вчитися на помилках.

flowchart TD
    A["🎮 Player Action"] --> B{"Risk Assessment"}
    
    B --> C["High Risk, High Reward"]
    B --> D["Safe Strategy"]
    
    C --> E{"Outcome"}
    D --> F["Steady Progress"]
    
    E -->|Success| G["🏆 Big Points"]
    E -->|Failure| H["💔 Lose Life"]
    
    H --> I{"Lives Remaining?"}
    I -->|Yes| J["🔄 Try Again"]
    I -->|No| K["💀 Game Over"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

Візуальне представлення має велике значення — показ кораблів замість просто "Життя: 3" створює миттєве візуальне сприйняття, подібно до того, як ранні аркадні автомати використовували іконографію для спілкування поза мовними бар'єрами.

Створення системи винагород вашої гри

Тепер ми реалізуємо основні системи зворотного зв’язку, які утримують гравців:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Shoots Enemy
    GameEngine->>ScoreSystem: Award Points
    ScoreSystem->>ScoreSystem: +100 points
    ScoreSystem->>Display: Update Score
    
    Player->>GameEngine: Collides with Enemy
    GameEngine->>LifeSystem: Lose Life
    LifeSystem->>LifeSystem: -1 life
    LifeSystem->>Display: Update Lives
    
    alt Lives > 0
        LifeSystem->>Player: Continue Playing
    else Lives = 0
        LifeSystem->>GameEngine: Game Over
    end

Система очок: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше підраховувати подумки). Очки відображаються в нижньому лівому куті.
Лічильник життя: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів .

Починаємо будувати!

Спочатку налаштуйте робоче середовище. Перейдіть до файлів у папці your-work. Ви повинні побачити ці файли:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Щоб протестувати вашу гру, запустіть сервер розробки з папки your_work:

cd your-work
npm start

Це запустить локальний сервер за адресою http://localhost:5000. Відкрийте цю адресу у вашому браузері, щоб побачити вашу гру. Перевірте управління за допомогою стрілок і спробуйте стріляти у ворогів, щоб переконатися, що все працює.

flowchart TD
    A["1. Asset Loading"] --> B["2. Game Variables"]
    B --> C["3. Collision Detection"]
    C --> D["4. Hero Enhancement"]
    D --> E["5. Display Functions"]
    E --> F["6. Event Handlers"]
    
    G["Life Icon Image"] --> A
    H["Score & Lives Tracking"] --> B
    I["Hero-Enemy Intersections"] --> C
    J["Points & Life Methods"] --> D
    K["Text & Icon Rendering"] --> E
    L["Reward & Penalty Logic"] --> F
    
    F --> M["🎮 Complete Game"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe

Час кодувати!

Отримайте необхідні візуальні ресурси. Скопіюйте ресурс life.png із папки solution/assets/ у вашу папку your-work. Потім додайте lifeImg до функції window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```
Не забудьте додати lifeImg до списку ваших ресурсів:
```
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
Налаштуйте змінні гри. Додайте код для відстеження загальної кількості очок (починаючи з 0) і залишку життів (починаючи з 3). Ми відобразимо ці дані на екрані, щоб гравці завжди знали, де вони знаходяться.

Реалізуйте виявлення зіткнень. Розширте функцію updateGameObjects(), щоб виявляти, коли вороги стикаються з вашим героєм:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Додайте відстеження життів і очок до вашого героя.

Ініціалізуйте лічильники. Під this.cooldown = 0 у класі Hero налаштуйте життя та очки:
```
this.life = 3;
this.points = 0;
```

Покажіть ці значення гравцю. Створіть функції для відображення цих значень на екрані:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Підключіть усе до циклу гри. Додайте ці функції до вашої функції window.onload одразу після updateGameObjects():
```
drawPoints();
drawLife();
```

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

Розуміння дизайну гри: Перед реалізацією наслідків переконайтеся, що ви розумієте:

✅ Як візуальний зворотний зв’язок передає стан гри гравцям
✅ Чому послідовне розташування елементів інтерфейсу покращує зручність використання
✅ Психологію значень очок і управління життями
✅ Як рендеринг тексту на полотні відрізняється від HTML-тексту

Швидкий самотест: Чому аркадні ігри зазвичай використовують круглі числа для значень очок? Відповідь: Круглі числа легше підраховувати подумки і створюють задовільні психологічні винагороди

Принципи користувацького досвіду: Ви зараз застосовуєте:

Візуальна ієрархія: Важлива інформація розташована помітно
Миттєвий зворотний зв’язок: Оновлення в реальному часі відповідно до дій гравця
Когнітивне навантаження: Просте і чітке представлення інформації
Емоційний дизайн: Іконки та кольори, які створюють зв’язок із гравцем

Реалізуйте наслідки та винагороди гри. Тепер ми додамо системи зворотного зв’язку, які роблять дії гравця значущими:
1. Зіткнення коштують життя. Кожного разу, коли ваш герой стикається з ворогом, ви повинні втратити життя.
  
  Додайте цей метод до класу Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Стрілянина у ворогів приносить очки. Кожне успішне попадання приносить 100 очок, забезпечуючи миттєвий позитивний зворотний зв’язок за точну стрільбу.
  
  Розширте клас Hero цим методом збільшення:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Тепер підключіть ці функції до подій зіткнення:
```
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});
```

✅ Цікаво, які ще ігри створені за допомогою JavaScript і Canvas? Досліджуйте — ви можете здивуватися, що можливо!

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

Тепер ваша гра має основні механіки, які зробили ранні аркадні ігри такими захоплюючими — чіткі цілі, миттєвий зворотний зв’язок і значущі наслідки для дій гравця.

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

Повна система дизайну гри: Переконайтеся, що ви освоїли системи зворотного зв’язку для гравців:

✅ Як механіка очок створює мотивацію та залучення гравців?
✅ Чому візуальна послідовність важлива для дизайну інтерфейсу користувача?
✅ Як система життів балансує виклик із утриманням гравця?
✅ Яку роль відіграє миттєвий зворотний зв’язок у створенні задовільного ігрового процесу?

Інтеграція системи: Ваша система зворотного зв’язку демонструє:

Дизайн користувацького досвіду: Чітке візуальне спілкування та ієрархія інформації
Архітектура, орієнтована на події: Оновлення у відповідь на дії гравця
Управління станом: Ефективне відстеження та відображення динамічних даних гри
Майстерність роботи з полотном: Рендеринг тексту та позиціонування спрайтів
Психологія гри: Розуміння мотивації та залучення гравців

Професійні шаблони: Ви реалізували:

Архітектура MVC: Розділення логіки гри, даних і представлення
Шаблон спостерігача: Оновлення стану гри, орієнтоване на події
Дизайн компонентів: Повторно використовувані функції для рендерингу та логіки
Оптимізація продуктивності: Ефективний рендеринг у циклах гри

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

Експериментуйте з різними розмірами шрифтів і кольорами для відображення очок
Спробуйте змінити значення очок і подивіться, як це впливає на відчуття гри
Додайте console.log для відстеження змін очок і життів
Перевірте крайні випадки, такі як закінчення життів або досягнення високих очок

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

Завершіть тест після уроку та зрозумійте психологію дизайну гри
Додайте звукові ефекти для отримання очок і втрати життів
Реалізуйте систему високих очок за допомогою localStorage
Створіть різні значення очок для різних типів ворогів
Додайте візуальні ефекти, такі як тряска екрану при втраті життя

📅 Ваш тижневий шлях до дизайну гри

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

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

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

🎯 Ваш графік майстерності дизайну гри

timeline
    title Game Design & Player Feedback Learning Progression
    
    section Foundation (10 minutes)
        Visual Communication: Text rendering
                           : Icon design
                           : Layout principles
                           : Color psychology
        
    section Player Psychology (20 minutes)
        Motivation Systems: Point values
                          : Risk vs reward
                          : Progress feedback
                          : Achievement design
        
    section Technical Implementation (30 minutes)
        Canvas Mastery: Text positioning
                      : Sprite rendering
                      : State management
                      : Performance optimization
        
    section Game Balance (40 minutes)
        Difficulty Design: Life management
                         : Scoring curves
                         : Player retention
                         : Accessibility
        
    section User Experience (50 minutes)
        Interface Design: Information hierarchy
                        : Responsive feedback
                        : Emotional design
                        : Usability testing
        
    section Advanced Systems (1 week)
        Game Mechanics: Progression systems
                      : Analytics integration
                      : Monetization design
                      : Community features
        
    section Industry Skills (1 month)
        Professional Development: Team collaboration
                                : Design documentation
                                : Player research
                                : Platform optimization

🛠️ Резюме вашого інструментарію дизайну гри

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

Психологія гравця: Розуміння мотивації, ризику/винагороди та циклів залучення
Візуальне спілкування: Ефективний дизайн інтерфейсу користувача за допомогою тексту, іконок та макету
Системи зворотного зв’язку: Реакція в реальному часі на дії гравця та події гри
Управління станом: Ефективне відстеження та відображення динамічних даних гри
Рендеринг тексту на полотні: Професійне відображення тексту зі стилізацією та позиціонуванням
Інтеграція подій: Зв’язок дій користувача зі значущими наслідками гри
Баланс гри: Дизайн кривих складності та систем прогресії гравця

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

Дизайн інтерфейсу користувача: Створення захоплюючих та інтуїтивних інтерфейсів
Розробка продуктів: Розуміння мотивації користувачів та циклів зворотного зв’язку
Освітні технології: Гейміфікація та системи залучення до навчання
Візуалізація даних: Зроблення складної інформації доступною та захоплюючою
Розробка мобільних додатків: Механізми утримання та дизайн користувацького досвіду
Маркетингові технології: Розуміння поведінки користувачів та оптимізація конверсії

Отримані професійні навички: Тепер ви можете:

Проектувати користувацький досвід, що мотивує та залучає користувачів
Реалізовувати системи зворотного зв’язку, що ефективно спрямовують поведінку користувачів
Балансувати виклик та доступність в інтерактивних системах
Створювати візуальне спілкування, що працює для різних груп користувачів
Аналізувати поведінку користувачів та вдосконалювати дизайн

Освоєні концепції розробки ігор:

Мотивація гравця: Розуміння того, що стимулює залучення та утримання
Візуальний дизайн: Створення чітких, привабливих та функціональних інтерфейсів
Інтеграція систем: Зв’язок кількох систем гри для цілісного досвіду
Оптимізація продуктивності: Ефективний рендеринг та управління станом
Доступність: Дизайн для різних рівнів навичок та потреб гравців

Наступний рівень: Ви готові досліджувати розширені шаблони дизайну ігор, реалізовувати аналітичні системи або вивчати монетизацію і утримання гравців!

🌟 Досягнення розблоковано: Ви створили повну систему зворотного зв’язку для гравців із професійними принципами дизайну гри!

Виклик GitHub Copilot Agent 🚀

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

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

Запит: Створіть систему високих очок, яка зберігає найкращий результат гравця у localStorage. Додайте бонусні очки за послідовні знищення ворогів (система комбо) та реалізуйте різні значення очок для різних типів ворогів. Додайте візуальний індикатор, коли гравець досягає нового високого результату, і відображайте поточний високий результат на екрані гри.

🚀 Виклик

Тепер у вас є функціональна гра з оч

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

28 KiB Raw Blame History Unescape Escape

Створення космічної гри, частина 5: Очки та життя

Тест перед лекцією

Відображення тексту на екрані — голос вашої гри

Життя — більше, ніж просто число

Створення системи винагород вашої гри

Починаємо будувати!

Час кодувати!

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

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

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

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

📅 Ваш тижневий шлях до дизайну гри

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

🎯 Ваш графік майстерності дизайну гри

🛠️ Резюме вашого інструментарію дизайну гри

Виклик GitHub Copilot Agent 🚀

🚀 Виклик

28 KiB

Raw Blame History Unescape Escape