Як додати HTML5-ігри на сайт компанії

Є три способи додати гру на сайт компанії: вбудувати чужу гру, яку хостить хтось інший, через iframe; завантажити файли гри на власний веб-простір і показати їх на сторінці; або ліцензувати гру як пакет і опублікувати її як свою. Перший спосіб найшвидше спробувати. Другий дає найбільше контролю. Третій варто обрати, коли гра має довго нести ваш бренд.

Цей гід для бізнесів, агенцій і власників сайтів на WordPress, Wix, власному сайті, в інтранеті чи порталі. Він порівнює варіанти, дає чекліст перед запуском і перелічує, що входить до пакета Polar Games. Це загальна інформація, а не юридична порада.

Три способи розмістити гру на вашому сайті

1. Вбудувати через iframe. Гра, що хоститься деінде, з'являється у фреймі на вашій сторінці. Ви пишете один тег, але гра, її оновлення та доступність залишаються за тим, хто її хостить.
2. Хостити файли самостійно. Ви завантажуєте папку гри на власний веб-простір і відкриваєте її за власною адресою, окремо або в iframe на одній із ваших сторінок. Для наших пакетів достатньо хоста, що віддає статичні файли: для гри не потрібні PHP, база даних чи обліковий запис.
3. Ліцензувати гру як пакет. Студія передає готову до хостингу папку, редагований код і посібник за ліцензією на один кінцевий продукт. Ви розміщуєте її і можете змінювати код, графіку й аудіо всередині цього продукту.

Переглянути HTML5-шаблони ігор

Iframe чи власний хостинг: порівняння

• Швидкість: фрейм завантажує гру з сервера хоста, тож ваша сторінка залежить від цього сервера. Файли на власному хості завантажуються з адреси, яку ви контролюєте.
• Контроль: на власному хості ви вирішуєте адресу, сторінку навколо гри, кешування й оновлення. За чужим вбудуванням вирішує хост, і він може змінити або прибрати гру.
• Cookie і згода: гра зі сторонньої адреси змушує ваших відвідувачів звертатися до цієї адреси, а та сторона може ставити власні cookie або вимірювати відвідування. Власні файли надходять з вашого домену. Реклама й аналітика, де б вони не працювали, можуть вимагати згоди, тож перевірте правила, що стосуються вас, з кваліфікованим консультантом.
• Пошук: не розраховуйте, що гра всередині iframe дасть тексту вашій сторінці. Напишіть власний заголовок, короткий опис, інструкцію і посилання навколо гри.

Тег iframe, атрибут за атрибутом

Типове вбудування для гри, яку ви хостите самостійно. Примітки до атрибутів взяті з довідки MDN щодо iframe.

<iframe src="https://your-site.example/games/my-game/" title="My Game" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>

• title: MDN каже, що користувачі екранних читачів можуть використовувати його, щоб позначити вміст фрейму, і він має коротко описувати цей вміст.
• allow="fullscreen": MDN визначає застарілий атрибут allowfullscreen як allow="fullscreen *". Без цього дозволу фрейм з іншої адреси не може перейти в повноекранний режим.
• sandbox: для гри, яку ви хостите, його не вказуйте. MDN категорично не радить поєднувати allow-scripts з allow-same-origin у фреймі того самого походження, бо тоді фрейм може зняти власний sandbox.
• Порожній фрейм або відмова підключення: сервер, що хостить гру, може надсилати X-Frame-Options (DENY блокує будь-яке вбудування, SAMEORIGIN дозволяє лише те саме походження) або правило frame-ancestors у заголовку Content-Security-Policy, яке MDN рекомендує замість нього. Змініть заголовок для папки гри або віддавайте сторінку й гру з однієї адреси.

Прочитати практичний гід з хостингу та вбудовування

Чекліст перед публікацією

1. HTTPS скрізь. Сторінка https не може завантажити http-iframe: MDN відносить скрипти й iframe до запитів, які браузери блокують як mixed content (змішаний вміст).
2. Телефони. Відкрийте на справжньому телефоні в обох орієнтаціях, всередині вашої сторінки.
3. Звук. MDN каже, що браузери загалом дозволяють автовідтворення зі звуком лише після взаємодії відвідувача зі сторінкою. Очікуйте тиші до першого дотику і продумайте стартовий екран навколо дотику.
4. Повноекранний режим і мови. Перевірте, що кнопка повного екрана з'являється всередині фрейму, і що мови гри покривають вашу аудиторію.
5. Основи доступності. Дайте фрейму title, запропонуйте посилання, що відкриває гру окремо, перевірте розмір тексту і контраст, і напишіть, які в гри керування. Важливу інформацію тримайте як звичайний текст сторінки, а не всередині гри.
6. Приватність і згода. Перелічіть усе, що працює на сторінці: рекламні скрипти, аналітику, шрифти з інших хостів. Оновіть політику приватності. Якщо ви використовуєте рекламу чи аналітику, запитайте у консультанта, чи потрібна згода за місцевим законом.

Дванадцять речей, які перевірити, перш ніж платити за гру

Що входить до пакета Polar Games

Кожна версія перелічує свій вміст на сторінці в маркеті, і ви можете пограти в живе демо перед покупкою. Загалом ви отримуєте:

• Готову до хостингу папку game/. Вимоги, які зазначають наші версії: сучасний браузер і будь-який HTTP(S)-хост, що віддає статичні файли. Хостинг не потребує бази даних і кроку збирання. Дві версії, Zabum і Ricopop, мають необов'язкову таблицю лідерів, яка потребує PHP 7.4 або новішого.
• Редаговану папку source/ і посібник у documentation/ з розділами про встановлення та налаштування.

П'ять версій, серед них Gridspark і Velvet Pool, написані на простому JavaScript. Інші написані на TypeScript, і деякі використовують бібліотеки на кшталт Three.js або Phaser, але папка game/ вже зібрана. Node.js потрібен лише для редагування і перезбирання коду.

Не входить: хостинг, встановлення на ваш сервер, налаштування під вас, нові функції та інтеграція з SDK або порталами. Умови перелічують це як окремі послуги, які узгоджуються до початку роботи. Підтримка охоплює питання про встановлення й використання наданих файлів і відтворювані дефекти: 6 місяців, або 12 з розширенням.

Дивіться Gridspark, версію-головоломку на простому JavaScript

Дивіться Velvet Pool, 3D-версію пулу

Ліцензія, рахунки і пакети

• Одна ліцензія покриває один кінцевий продукт, для вас або для одного клієнта. Агенція, що будує для кількох клієнтів, потребує ліцензію на продукт кожного клієнта.
• Ліцензія безстрокова і не спливає, коли закінчується підтримка. Відвідувачі можуть грати безкоштовно або через монетизацію рекламою.
• Ми виставляємо бразильську nota fiscal (фіскальний документ Бразилії), якщо ви її просите, або рахунок для клієнтів за кордоном.
• Купуючи кілька позицій разом, ви отримуєте знижку від прайсу: 5% за дві, 10% за три, 15% за чотири, 20% за п'ять і більше.

Ліцензія пункт за пунктом

Коли має сенс гра з вашим брендом

Готового шаблону достатньо, коли ви хочете швидко поставити на сторінку хорошу гру. Індивідуальна версія має сенс, коли гра має нести ваш логотип, кольори, тексти й правила, коли вона має відповідати кампанії або працювати всередині платформи, яку ви вже використовуєте. Ми беремо індивідуальні проєкти та white label (білий лейбл) роботи. Ціни й терміни залежать від завдання, тому ми їх не перелічуємо: надішліть шаблон, який вам подобається, і що хочете змінити, і попросіть пропозицію.

Контакт: willian@polargames.com.br

Рушій, шаблон чи простий JavaScript: що обрати

Поширені запитання

Чи допомагає гра в iframe моєму SEO?

Не розраховуйте на це. Пишіть заголовки, опис і інструкцію навколо гри як звичайний текст сторінки.

Чи містять ігри рекламу або трекінг?

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

Наступний крок

Оберіть гру в маркеті, пограйте в демо і прочитайте її посібник. Потім оберіть спосіб, який пасує вашому сайту, і напишіть нам, якщо хочете бачити на ній свій бренд.

Переглянути HTML5-шаблони ігор

White Label HTML5-ігри: що ви отримуєте і про що запитати

Ліцензія HTML5-ігор чи купівля вихідного коду?

Advergame: отримайте HTML5-гру з вашим брендом для кампанії