Ръководство

Сорс код на тенис на маса: файловете, физиката и кампанията на Sunset Rally

3D пинг понг игра за браузъра, отворена файл по файл: къде живеят физиката, точкуването, кампанията и местата и какво да промените първо.

Основен арт от Sunset Rally: червена ракета и топка над зелена маса за тенис на маса в градинска тераса на залез, под цъфнали череши и фенери.

Ако ви трябва сорс код на тенис на маса, който можете да хоствате и променяте, Sunset Rally е готова 3D игра за пинг понг в браузъра с кампания от девет мача, трима компютърни съперници, работилница и пълния проект на TypeScript, на 39 USD по каталожна цена. Папката на играта вече е компилирана и не е минифицирана, така че можете първо да я качите, а после да я прочетете.

Спортните игри са по-трудни за адаптиране, отколкото изглеждат, защото забавлението е във физиката и управлението, а не в менютата. Това ръководство показва къде живее всяко от тях в проекта Sunset Rally, какво може безопасно да се промени и какво това издание не включва.

Как се играе пинг понгът

Мачовете са до седем точки срещу компютърен съперник. Играчите движат показалеца или влачат, за да управляват ракетата, а ударите са автоматични. Бутането нагоре добавя сила, движението встрани поставя топката, дърпането надолу изпълнява drop shot (кратък удар), а топка, която се вдига високо, е за smash (смачкване).

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

Има трима компютърни съперници със собствени стилове: търпеливата Capi, игривата Nori и прецизната Miso, всяка на Easy, Normal или Hard (лесно, нормално или трудно). Режимът Training (тренировка) ви дава партньор, който връща всяка топка. След мач реплей показва решаващата точка отново.

Изиграйте демото на Sunset Rally

Какво съдържа пакетът сорс код на тенис на маса

  • Готова за хостване папка game/, вече компилирана и не минифицирана.
  • Сорс кодът на TypeScript за разработчици с настройката на Vite и активите на играта, в source/.
  • Илюстрирани ръководства на английски и португалски с истински снимки от екрана.
  • Шрифтове и аудиофайлове, включени в играта.
  • Бележки за лицензите на трети страни и списък с промените.

Технологиите са TypeScript, Three.js r184, Vite и WebGL2. Файловете включват HTML, CSS, JavaScript, TypeScript и JSON. Интерфейсът е на 14 езика: английски, португалски, испански, френски, немски, италиански, нидерландски, полски, турски, руски, индонезийски, японски, корейски и китайски (опростен). Ръководствата са само на английски и португалски.

Съдържанието около мачовете също е част от пакета: Sunset Circuit (кръг „Залез“) от девет мача в три етапа, три места – градината Sunset, градината Sakura и крайморското кафе Seaside – в сутрин, следобед, нощ или дъжд, и работилница, където монетите от победите купуват цветове на ракетите, гуми, форми, дръжки, дървесина, лента за ръбове, стикери и стилове за топката и масата.

Къде са нещата в кода

Ръководството свързва всяка част от играта с файл. Това е списъкът, който държите отворен, докато работите:

  • Campaign.ts: деветте мача от кампанията и целите им за звезди.
  • Places.ts: как изглежда всяко място.
  • physics.ts: физиката на топката и ракетата.
  • match.ts: точкуване и правила на мача.
  • i18n.ts: текстът на интерфейса на английски и португалски; останалите езици са в папката locales.
  • styles.css: стиловете на менютата и екраните.

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

Какво да промените първо в шаблон за тенис на маса

Предлагаме този ред – от нисък към висок риск.

  1. Текст на интерфейса и името на играта, в i18n.ts и папката locales.
  2. Цветовете и екраните, в styles.css.
  3. Стиловете от работилницата за ракети, топки и маси, за да носи екипировката вашата марка.
  4. Визиите на местата, в Places.ts.
  5. Мачовете от кампанията и целите за звезди, в Campaign.ts.
  6. Физика и точкуване, в physics.ts и match.ts, само ако ви трябва различно усещане.

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

Бялата етикетировка е разрешена: вашето име и логото, или на вашия клиент, могат да заменят нашите.

Компилиране, хостване и вграждане

За игра не е нужно нищо да се компилира. Качете съдържанието на game/ на всеки HTTP(S) хостинг, който сервира статични файлове, запазете относителните пътища и отворете адреса. Не са нужни PHP, база данни или акаунт.

За промяна на сорс кода са нужни Node.js (препоръчваме 24 LTS) и npm. Редактирайте TypeScript, компилирайте с Vite и заменете хостнатата папка game/ с новия резултат.

Браузърът трябва да поддържа JavaScript, ES модули и WebGL2. Поддържат се и сензорно управление, и мишка, а управлението се адаптира към размера на екрана. Производителността зависи от браузъра и устройството, затова тествайте на телефоните, които ползват вашите играчи.

  1. Качете game/ в тестова папка на хостинга си.
  2. Изиграйте един мач в браузър на компютър и един на телефон.
  3. Направете промените в текста и стиловете в source/ и компилирайте отново.
  4. Заменете цялата тестова папка и изиграйте отново.
  5. Преместете я на крайния адрес.

Какво това издание не включва

Това издание се играе срещу компютъра: кампания, свободен мач и тренировка. Онлайн мултиплейър, онлайн стаи, онлайн класации и облачни акаунти не са част от пакета, а режим за двама играчи няма. Няма рекламни SDK или акаунти, а нативни приложения и хостинг не са включени.

Напредъкът остава в браузъра на играча: звездите от кампанията, резултатите, статистиките, реплеите и предметите от работилницата. Не се използва сървър или акаунт, затова след старта няма какво да се поддържа.

Ако ви трябва онлайн режим, SDK на портал, версия за магазин за приложения или инсталиране на вашия сървър, това е отделна услуга, оценявана за всеки проект.

Поискайте оферта за работа по поръчка

Лиценз, поддръжка и цена в един абзац

Една покупка дава вечен, неексклузивен лиценз за един краен продукт – ваш или на един ваш клиент, който играчите могат да ползват безплатно или с монетизация чрез реклама. Можете да променяте кода, арта и звука в този продукт, но не можете да препродавате или споделяте шаблона, сорс кода или активите му самостоятелно. Поддръжката е 6 месеца или 12 с разширението при плащане и покрива инсталирането и използването на файловете и отстраняването на възпроизводими дефекти; персонализирането, хостингът и интеграцията със SDK или портал се оценяват отделно. Каталожната цена е 39 USD; до 30 ноември 2026 г. промоция за Black Friday намалява всеки шаблон с 15%, така че Sunset Rally струва 33,15 USD, а от 1 декември цените се връщат към каталожните.

Прочетете пълните условия

Често задавани въпроси

Трябва ли да компилирам нещо, за да ползвам тази игра за тенис на маса?

Не. Папката game/ вече е компилирана. Качете съдържанието ѝ на статичен уеб хостинг и отворете адреса. Node.js и npm са нужни само ако променяте TypeScript и компилирате отново.

Има ли режим за двама играчи или онлайн?

Не. Това издание се играе срещу компютъра в кампанията, свободните мачове и тренировката.

Мога ли да променя кампанията и целите за звезди?

Да. Мачовете и условията за звездите са в Campaign.ts. След това компилирайте отново с Node.js.

Мога ли да променя поведението на топката?

Да. Физиката е в physics.ts, а правилата за точкуване – в match.ts. Променяйте по едно нещо наведнъж и тествайте срещу всеки съперник.

Работи ли на телефони?

Да, със сензорно управление, което се адаптира към екрана. Изисква се WebGL2, а производителността зависи от устройството, затова тествайте телефоните, за които се прицелвате.

Къде се записва напредъкът?

В браузъра на играча. Не се използва сървър или акаунт.

Други спортни шаблони за сравнение

Ако изграждате спортен ъгъл за сайт, два други шаблона пасват добре до Sunset Rally. Velvet Pool е билярд 8-ball с компютърен противник и локален режим за двама, написан на обикновен JavaScript с WebGL2, на 39 USD по каталожна цена. Puttide е 3D мини голф с 30 дупки, изграден върху Three.js и Rapier, на 39 USD по каталожна цена. И двата имат 14 езика на интерфейса.

Sunset Rally подхожда на портали и сайтове, които искат спортна игра с кратки мачове, на студия, които доставят брандирана игра на един клиент, и на разработчици, които искат четим проект на TypeScript и Three.js, от който да учат или който да разширят. Ако ви трябват двама играчи на едно устройство, Velvet Pool има този режим, а Sunset Rally – не.

Вижте Velvet Pool, билярда 8-ball

Вижте Puttide, 3D мини голфа

Купуването на два или повече шаблона в една поръчка намалява цената на всеки лиценз: 5% отстъпка за два, 10% за три, 15% за четири и 20% за пет или повече.

Вземете сорс кода на тенис на маса Sunset Rally