Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games
Code

Вивчаємо CreateJS на прикладі створення гри Пінг-Понг

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

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


Попередній перегляд кінцевого результату

Давайте подивимося на кінцевий результат, до якого  будемо наближатися.

The PONG game

Клацніть для початку гри

Ця робота заснована на посібнику Carlos Yanez «Create a Pong Game in HTML5 With EaselJS», що в свою чергу засновано на його «Getting Started With EaselJS». Всі графічні дані та звукові ефекти взяті з вищезазначеного посібника.


Крок 1: Створіть index.html

Далі наводиться його вміст:

Як ви бачите, він доволі короткий і головним чином  містить рядки для скачування бібліотек CreateJS.

З моменту виходу CreateJS нам більше немає необхідності завантажувати файли та розміщувати їх на власному сервері; тепер файли розміщуються на CDN (* content delivery network – мережа доставки (розповсюдження) контенту. Тут і далі примітка перекладача), завдяки якій ми можемо завантажувати ці файли віддалено на максимальній швидкості.

Давайте проглянемо код:

У цьому рядку ми прибираємо підсвічування, що може виникнути при спробі пограти у гру на телефоні. (Завдяки цьому не буде підсвічуватися об'єкт canvas, що відбувається на телефонах при русі пальців).

Далі йдуть бібліотеки для завантаження бібліотек CreateJS:

Завдяки цьому коду відбувається завантаження файлів JS з CDN для CreateJS і у нас є можливість використовувати будь-які функції CreateJS у нашому коді.

Далі ми завантажуємо плаґін Flash (* мультимедійна програмна платформа компанії Adobe Systems для створення веб-додатків, рекламних банерів, анімацій, ігор, десктопних застосувань і також для виконання на веб-сторінках відео- та аудіозаписів. У липні 2017 року Adobe визнала технологію Flash застарілою, її життєвий   цикл буде завершено наприкінці 2020 року, коли Adobe припинить підтримку та розповсюдження Flash) SoundJS, що забезпечує підтримку звуку для браузерів, що не підтримують HTML5 Audio. Вона реалізується за допомогою використання SWF (* Small Web Format) (об'єкта Flash) для завантаження звуків.

У цьому випадку ми не будемо використовувати CDN; замість цього ми завантажимо бібліотеку SoundJS з  http://createjs.com/#!/SoundJS/download та розмістимо файли soundjs.flashplugin-0.2.0.min.js та FlashAudioPlugin.swf до локальної бібліотеки під назвою assets.

Останнім з файлів JS ми завантажимо файл Main.js, в якому буде розташовано весь код для нашої гри:

І, нарешті, давайте помістимо об'єкт Canvas на нашу сцену.

Тепер ми можемо почати працювати над кодом для гри.


Крок 2: Змінні

Код нашої гри буде знаходитися у файлі під назвою Main.js, так що зараз створіть та збережіть його.

Для початку давайте визначимо змінні для всіх графічних об'єктів у грі:

Я додав коментар до кожної змінної, щоб ви знали, що буде поміщатися до неї.

Далі переходимо до рахування очок:

Нам будуть необхідні змінні для зберігання значень швидкості м'яча:

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

Якщо ви – розробник на Flash, то знаєте, що метод onEnterFrame Flash дуже корисний при розробці ігор,  оскільки є події, які повинні відбуватися у кожному фреймі. (Якщо ви не знайомі з цією ідеєю, то ознайомтеся зі статтею про Game Loop)

Ми маємо еквівалент для onEnterFrame в CreateJS – об'єкт ticker, завдяки якому можна виконувати код кожну долю секунди. Давайте створимо змінну, у якій буде посилання на нього:

Далі йдуть змінні для попереднього завантажувача, що буде використовувати методи нової бібліотеки PreloadJS.

  • в preloader буде міститися об'єкт PreloadJS.
  • в manifest (* список вантажів та пасажирів літака або поїзда) буде знаходитися список файлів, що нам необхідно завантажити.
  • в totalLoaded буде міститися кількість вже завантажених файлів.

Остання, але не менш важлива, ніж решта, змінна в нашому списку – TitleView, в якій будуть знаходитися зображення для їх сумісного відображення (подібно DisplayObjectContainer во Flash).

Давайте перейдемо до функції Main ...


Крок 3: Функція Main()

Ця функція виконується першою після завантаження всіх файлів JS, що вказані в index.html. Де вона викликається?

Що ж, пам'ятаєте рядок в index.html?

У цьому фрагменті коду повідомляється, що одразу після завантаження HTML (і бібліотек JS) повинна бути виконана функція Main.

Давайте проглянемо її:

Давайте проаналізуємо кожну частину:

Тут ми присвоюємо до змінної canvas об'ект Canvas PongStage із файлу index.html і потім з його допомогою створюємо об'єкт класу Stage . (Завдяки ій ми зможемо розміщувати об'єкти на canvas)

Завдяки mouseEventsEnabled  ми можемо скористатися подіями, що виникають при діях з мишкою, для реагування на рухи та кліки мишки.

Тут ми налаштовуємо розміщення плаґіна для звуку Flash для тих браузерів, що не підтримують HTML5 Audio.

У змінній manifest  ми розміщуємо масив файлів, які хочемо завантажити (і задаємо для кожного унікальний ID). Кожний звук представлено у двох форматах – MP3 та OGG – оскільки браузери підтримують різні формати.

Тут ми налаштовуємо об'єкт preloader за допомогою PreloadJS. PreloadJS – новий додаток до бібліотеки CreateJS, і доволі корисний.

Ми створюємо новий об'єкт PreloadJS і поміщаємо його до змінної preloader, потім задаємо метод для оброблення кожної події (onProgress, onComplete, onFileLoad). Нарешті, ми використовуємо preloader для завантаження раніше створеного списку файлів.

Тут ми додаємо об'єкт Ticker на сцену та задаємо частоту зміни кадрів рівною 30 FPS (* frame per second – кадрів за секунду); ми будемо її використовувати пізніше у грі для реалізації функціональності enterFrame.


Крок 4: Створення функції для реалізації попереднього завантаження

 Давайте проглянемо функцію:

  • handleProgress - у цій функції ви зможете прослідкувати за процентом ходу завантаження за допомогою цього параметра: event.loaded. Ви могли би використовувати його для створення індикатора виконання ходу завдання.
  • handleComplete - ця функція викликається одразу після завантаження всіх файлів (на випадок, якщо ви помістили до неї щось).
  • handleFileLoad  – оскільки ми завантажуємо два види файлів – зображення та звук – у нас є ця функція для оброблення їх окремо один від одного. Якщо це – зображення, то ми створюємо растрове зображення та поміщаємо його до змінної (з тою ж назвою, що й в ID завантаженого зображення), а потім викликаємо функцію handleLoadComplete (яку напишемо далі); якщо ж це – звук, то ми одразу викликаємо handleLoadComplete.

Тепер давайте обговоримо тільки-но згадану handleLoadComplete:

У ній доволі все зрозуміло: ми збільшуємо значення змінної totalLoaded (в якій міститься кількість ресурсів, завантажених на даний момент) і потім перевіряємо, чи співпадає кількість елементів у manifest з кількістю завантажених ресурсів, і якщо так, то переходимо до екрану Main Menu (* Головне меню).


Крок 5: Створення Main Menu

The Main Menu

Тут нема нічого особливого. Ми розміщуємо зображення для фону, кнопок Start та  Credits (* список розробників) на сцені і задаємо обробники події onPress для кнопок Start та Credits.

Нижче наведено функції для показу та видалення екрану Credits та tweenTitleView, із запуску якої починається гра:


Крок 6: Код гри

The PONG game

Ми підійшли до головної частини цього посібника – до коду самої гри.

Для початку нам необхідно додати всі необхідні ресурси на сцену, що ми й робимо у функції addGameView:

Знову у функції доволі все зрозуміло: відбувається розміщення об'єктів на екрані та додавання mouseEvent (* обробника подій, що виникають при виконанні дій із мишкою) до фонового зображення, завдяки чому при кліку його користувачем починається гра (буде викликано функцію startGame).

Давайте проглянемо функцію startGame:

Тут, як ви бачите, окрім додавання обробника для події onMouseMove, завдяки якому відбувається рух нашої ракетки, ми додаємо обробник для події tick, завдяки чому буде викликано функцію update для кожного фрейма.

Давайте розглянемо функції movePaddle та reset:

У movePaddle ми власне розміщуємо ракетку користувача до координати y миші.

У reset ми здійснюємо дещо подібне, що робили в addGameView, проте тут ми не додаємо ніяких графічних елементів, оскільки вони вже знаходяться на екрані.

За допомогою функції alert ми показуємо повідомлення про програш або перемогу.


Крок 7: Ігровий цикл

Тепер переходимо до останньої частини нашого посібника, де розглянемо функцію update (яка виконується для кожного фрейма гри – подібно onEnterFrame Flash).

Виглядає застрашливо, чи не так? Не турбуйтеся, ми розглянемо кожну частину та обговоримо її.

У кожному фреймі м'яч буде рухатися згідно з його значенням швидкості по x та y.

Тут у нас представлено базовий AI (* artificial intelligence – штучний інтелект) комп'ютера, завдяки якому ракетка комп'ютера просто слідкує за м'ячем без будь-якої спеціальної логіки. Ми просто порівнюємо положення центру ракетки (чому ми і додаємо 32 пікселі до значення Y cpu) з положенням м'яча (з невеликим відступом) та рухаємо ракетку в необхідному напрямку: вниз або вгору.

Якщо м'яч зіштовхується з верхньою або нижньою границею, то м'яч змінює свій напрямок і ми програємо звук Wall Hit (* звук зіткнення з границею).

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

Тут ми маємо справу із зіткненням м'яча з ракетками; кожного разу після зіткнення м'яча з однією з ракеток м'яч змінює свій напрямок та програється відповідний звук.

Якщо ракетка гравця виходить за межі, то ми повертаємо її назад.

У даному фрагменті коду ми перевіряємо, чи досягла кількість очок когось із гравців 10, і якщо це так, то показуємо користувачеві повідомлення про перемогу або програш (відповідно до його результатів).


Завершення

От і все, ви створили повноцінну гру Пінг-Понг за допомогою CreateJS. Дякую за проявлену зацікавленість!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.