14 KiB

Raw Blame History Unescape Escape

Създаване на Космическа Игра Част 5: Точки и Животи

Предварителен тест

Готови ли сте да направите вашата космическа игра да се усеща като истинска игра? Нека добавим точки и управление на животи - основните механики, които превърнаха ранните аркадни игри като Space Invaders от прости демонстрации в пристрастяващо забавление. Тук вашата игра става наистина игрална.

Рисуване на текст на екрана - Гласът на вашата игра

За да покажем вашите точки, трябва да научим как да изобразяваме текст върху канваса. Методът fillText() е основният ви инструмент за това - същата техника, използвана в класическите аркадни игри за показване на точки и информация за статуса.

Имате пълен контрол върху външния вид на текста:

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

✅ Разгледайте по-подробно добавянето на текст към канвас - може да се изненадате колко креативни можете да бъдете с шрифтове и стилове!

Животи - Повече от просто число

В дизайна на игри, "живот" представлява маржът за грешка на играча. Тази концепция датира от пинбол машините, където получавахте няколко топки за игра. В ранните видеоигри като Asteroids, животите даваха на играчите разрешение да поемат рискове и да се учат от грешките си.

Визуалното представяне е от голямо значение - показването на икони на кораби вместо просто "Животи: 3" създава незабавно визуално разпознаване, подобно на начина, по който ранните аркадни машини използваха иконография, за да комуникират отвъд езиковите бариери.

Създаване на система за награди в играта

Сега ще внедрим основните системи за обратна връзка, които държат играчите ангажирани:

Система за точки: Всеки унищожен вражески кораб носи 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. Отворете този адрес в браузъра си, за да видите играта. Тествайте управлението с клавишите със стрелки и опитайте да стреляте по враговете, за да проверите дали всичко работи.

Време за кодиране!

Вземете визуалните ресурси, които ще ви трябват. Копирайте ресурса 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();
```

Внедрете последствия и награди в играта. Сега ще добавим системите за обратна връзка, които правят действията на играча значими:
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? Разгледайте - може да се изненадате какво е възможно!

След като внедрите тези функции, тествайте играта си, за да видите пълната система за обратна връзка в действие. Трябва да видите икони на животи в долния десен ъгъл, вашите точки в долния ляв ъгъл и да наблюдавате как сблъсъците намаляват животите, докато успешните изстрели увеличават точките.

Вашата игра вече има основните механики, които направиха ранните аркадни игри толкова завладяващи - ясни цели, незабавна обратна връзка и значими последствия за действията на играча.

Предизвикателство на GitHub Copilot Agent 🚀

Използвайте режима Agent, за да завършите следното предизвикателство:

Описание: Подобрете системата за точки в космическата игра, като внедрите функция за най-добър резултат с постоянна памет и механика за бонус точки.

Задача: Създайте система за най-добър резултат, която запазва най-добрия резултат на играча в localStorage. Добавете бонус точки за последователни унищожения на врагове (система за комбо) и внедрете различни стойности на точки за различни типове врагове. Включете визуален индикатор, когато играчът постигне нов най-добър резултат, и покажете текущия най-добър резултат на екрана на играта.

🚀 Предизвикателство

Вече имате функционална игра с точки и животи. Помислете какви допълнителни функции биха могли да подобрят изживяването на играча.

Финален тест

Преглед и самостоятелно обучение

Искате ли да изследвате повече? Проучете различни подходи към системите за точки и животи в игрите. Съществуват интересни игрови двигатели като PlayFab, които се занимават с точки, класации и прогресия на играчите. Как интегрирането на нещо подобно би могло да издигне вашата игра на следващото ниво?

Задача

Създайте игра с точки

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

14 KiB Raw Blame History Unescape Escape