Вихідний код гри в настільний теніс: файли, фізика і Sunset Rally
3D-пінг-понг для браузера, розібраний файл за файлом: де живуть фізика, підрахунок очок, кампанія і локації, та що змінювати першим.
Якщо вам потрібен вихідний код гри в настільний теніс, який можна розмістити і змінити, Sunset Rally — це готова 3D-гра в пінг-понг для браузера з кампанією з дев'яти матчів, трьома суперниками з CPU, майстернею і повним проєктом на TypeScript, за $39 за ціною зі списку. Папка гри вже зібрана і не мініфікована, тож спочатку можна її завантажити, а читати пізніше.
Спортивні ігри важче адаптувати, ніж здається, бо цікавість сидить у фізиці та керуванні, а не в меню. Цей гайд показує, де кожне з цього живе в проєкті Sunset Rally, що можна безпечно змінювати і чого ця версія не містить.
Як грається гра в настільний теніс
Матчі ідуть до семи очок проти суперника з CPU. Гравці рухають вказівник або перетягують, щоб керувати ракеткою, а удари відбуваються автоматично. Рух вгору додає силу, рух убік ставить м'ячик, рух униз дає подачу-укіс (drop shot), а м'ячик, що піднявся вгору, варто розчавити ударом.
Необов'язкова допомога assist (асистент), яку гравці можуть вмикати і вимикати під час матчу, допомагає ракетці знайти висоту м'ячика. Для публічного сайту це важливо: гравець, який уперше грає з телефона, все одно може відбити м'ячик.
Є три суперники з CPU зі своїми стилями: терплячий Capi, грайливий Nori і точний Miso, кожен на Easy (легкий), Normal (звичайний) або Hard (складний). Режим тренування (Training mode) дає партнера, який відбиває кожен м'ячик. Після матчу replay (повтор) показує вирішальний розіграш ще раз.
Що містить пакет вихідного коду гри в настільний теніс
- Папка game/, готова до розміщення, вже зібрана і не мініфікована.
- Вихідний код розробника на TypeScript з налаштуванням Vite і ресурсами гри, у source/.
- Ілюстровані посібники англійською та португальською зі справжніми скриншотами.
- Шрифти й аудіофайли, які входять до гри.
- Повідомлення про ліцензії сторонніх компонентів і журнал змін.
Стек: TypeScript, Three.js r184, Vite і WebGL2. Файли включають HTML, CSS, JavaScript, TypeScript і JSON. Інтерфейс доступний 14 мовами: англійською, португальською, іспанською, французькою, німецькою, італійською, нідерландською, польською, турецькою, російською, індонезійською, японською, корейською та спрощеною китайською. Посібники лише англійською та португальською.
Контент навколо матчів теж входить до пакета: Sunset Circuit (коло Sunset) з дев'яти матчів у трьох етапах, три локації (сад Sunset, сад Sakura і Seaside café (кафе на березі)) у ранковому, денному, нічному або дощовому варіанті, а також майстерня, де монети з перемог купують кольори ракеток, гуму, форми, ручки, деревину, стрічку для країв, наклейки і стилі м'ячів та столів.
Де що лежить у коді
Посібник прив'язує кожну частину гри до файлу. Ось список, який варто тримати відкритим під час роботи:
- Campaign.ts: дев'ять матчів кампанії і їхні цілі за зірки.
- Places.ts: як виглядає кожна локація.
- physics.ts: фізика м'ячика і ракетки.
- match.ts: підрахунок очок і правила матчу.
- i18n.ts: текст інтерфейсу англійською та португальською; інші мови — у папці locales.
- styles.css: оформлення меню і екранів.
Кожен матч кампанії дає до трьох зірок: перемогти, влучити в три кути і зіграти розіграш на десять ударів. Це 27 зірок, а пройдена локація дає приз майстерні. Оскільки умови зірок лежать в одному файлі кампанії, можна зробити кампанію легшою або складнішою, не шукаючи по коду.
Що змінити першим у шаблоні пінг-понгу
Пропонуємо такий порядок: від низького ризику до високого.
- Текст інтерфейсу і назву гри в i18n.ts та папці locales.
- Кольори й екрани в styles.css.
- Стилі майстерні для ракеток, м'ячів і столів, щоб спорядження несло ваш бренд.
- Вигляд локацій у Places.ts.
- Матчі кампанії і цілі за зірки в Campaign.ts.
- Фізика і очки в physics.ts та match.ts, лише якщо потрібне інше відчуття.
Посібник додає три правила, яких варто дотримуватися. Тримайте стабільними ідентифікатори розблокувань, ідентифікатори предметів і ключі збереження, інакше гравці втратять те, що заробили. Робіть резервну копію перед початком. Змінюйте одну функцію за раз, щоб знати, яка правка що спричинила.
White label дозволено: ваша назва і логотип, або логотип вашого клієнта, можуть замінити наші.
Перезбірка, хостинг і вбудовування
Щоб грати, нічого збирати не треба. Завантажте вміст game/ на будь-який HTTP(S)-хост, що віддає статичні файли, збережіть відносні шляхи і відкрийте адресу. PHP, база даних чи акаунт не потрібні.
Щоб змінювати вихідний код, потрібні Node.js (рекомендовано 24 LTS) і npm. Редагуйте TypeScript, перезбирайте через Vite і замініть розміщену папку game/ новим результатом.
Браузеру потрібні JavaScript, ES-модулі та WebGL2. Підтримуються і сенсорне, і мишаче керування, а керування адаптується до розміру екрана. Продуктивність залежить від браузера і пристрою, тож перевірте на телефонах, якими користуються ваші гравці.
- Завантажте game/ в тестову папку на вашому хості.
- Зіграйте один матч у браузері на комп'ютері і один на телефоні.
- Внесіть зміни тексту і стилів у source/ і перезберіть.
- Замініть усю тестову папку і зіграйте знову.
- Перенесіть на фінальну адресу.
Чого не містить ця версія
Ця версія грається проти CPU: кампанія, вільний матч і тренування. Онлайн-мультиплеєра, онлайн-кімнат, онлайн-рейтингів і хмарних акаунтів у пакеті немає, і режиму для двох гравців теж немає. Рекламних SDK чи акаунтів немає, а нативні застосунки і хостинг не входять до пакета.
Прогрес зберігається в браузері гравця: зірки кампанії, результати, статистика, повтори і предмети майстерні. Сервер чи акаунт не використовуються, тож після запуску нічого підтримувати не треба.
Якщо вам потрібен онлайн-режим, SDK порталу, версія для магазину застосунків або встановлення на вашому сервері, це окрема послуга, яку ми оцінюємо за проєктом.
Запитайте оцінку індивідуальної роботи
Ліцензія, підтримка і ціна одним абзацом
Одна покупка дає безстрокову невиключну ліцензію на один кінцевий продукт, ваш або одного клієнта, який гравці можуть використовувати безкоштовно або з монетизацією через рекламу. Ви можете змінювати код, графіку та аудіо всередині цього продукту, але не можете перепродавати чи ділитися шаблоном, його вихідним кодом або ресурсами окремо. Підтримка триває 6 місяців, або 12 з розширенням при оформленні, і охоплює встановлення та використання файлів і виправлення відтворюваних дефектів; індивідуальні зміни, хостинг і інтеграція SDK або порталу оцінюються окремо. Ціна за списком — $39; до 30 листопада 2026 року акція Black Friday дає знижку 15% на кожен шаблон, тож Sunset Rally коштує $33,15, а з 1 грудня ціни повертаються до списку.
Поширені запитання
Чи потрібно щось збирати, щоб користуватися цією грою в настільний теніс?
Ні. Папка game/ вже зібрана. Завантажте її вміст на статичний вебхост і відкрийте адресу. Node.js і npm потрібні лише тоді, коли ви змінюєте TypeScript і перезбираєте.
Чи є режим для двох гравців або онлайн?
Ні. Ця версія грається проти CPU в кампанії, вільних матчах і тренуванні.
Чи можна змінити кампанію і цілі за зірки?
Так. Матчі та умови зірок лежать у Campaign.ts. Після змін перезберіть проєкт через Node.js.
Чи можна змінити поведінку м'ячика?
Так. Фізика лежить у physics.ts, правила очок — у match.ts. Змінюйте одне за раз і перевіряйте з кожним суперником.
Чи працює на телефонах?
Так, із сенсорним керуванням, яке адаптується до екрана. Потрібен WebGL2, а продуктивність залежить від пристрою, тож перевірте телефони, на які орієнтуєтеся.
Де зберігається прогрес?
У браузері гравця. Сервер чи акаунт не використовуються.
Інші спортивні шаблони для порівняння
Якщо ви створюєте спортивний розділ для сайту, поруч із Sunset Rally добре стоять ще два шаблони. Velvet Pool — більярдна гра 8-ball з суперником CPU і локальним режимом для двох гравців, написана на чистому JavaScript з WebGL2, $39 за ціною зі списку. Puttide — 3D-мініголф на 30 лунок на Three.js і Rapier, $39 за ціною зі списку. Обидві мають 14 мов інтерфейсу.
Sunset Rally підходить порталам і сайтам, які хочуть спортивну гру з короткими матчами, студіям, що здають брендовану гру одному клієнту, і розробникам, які хочуть вивчати або розширювати читабельний проєкт на TypeScript і Three.js. Якщо потрібні двоє гравців на одному пристрої, Velvet Pool має цей режим, а Sunset Rally — ні.
Дивіться Velvet Pool, гру 8-ball
Купівля двох або більше шаблонів в одному замовленні знижує вартість кожної ліцензії: 5% знижки за два, 10% за три, 15% за чотири і 20% за п'ять і більше.