Технікал Геймз

Збірка маленьких браузерних ігор. Дві живуть в одному index.html без жодних залежностей, третя — окремою сторінкою з 3D.

Грати: https://ramen-ichiraku.github.io/t3kk-games/

Стартова сторінка — каталог із картками. Кожна картка має живу мініатюру, що малюється на <canvas>, і назву гри поверх неї. Вбудовані ігри запускаються в тій самій вкладці й повертаються в каталог кнопкою «← Ігри»; на них можна дати пряме посилання через хеш (…/#karas, …/#karas2). «Кільце Карася» відкривається окремою сторінкою karas3.html.

Ігри

Гра в Карася 1: Втеча

Раннер у три ряди. Карась на ногах збирає монети, ухиляється від перешкод і тікає від чорного буса.

Дія	Клавіатура	Телефон
Змінити ряд	← → або A D	свайп вліво/вправо
Стрибок	↑, W або пробіл	свайп вгору або тап
Підкат	↓ або S	свайп вниз
Пауза	Esc або P	кнопка «Пауза»

Перешкоди: бак — оббігти сусіднім рядом (точний стрибок теж рятує), калюжа — стрибок, шлагбаум — підкат.

Смужка «Бус» зверху показує дистанцію до переслідувача. Зіткнення підпускає його ближче й збиває швидкість, монети та чистий біг відривають. Розминутися з перешкодою впритул — невеликий бонус, кожні 500 м — відчутний.

Гра в Карася 2: Несамовита лють

Вид зверху. Орда зомбі й прибульців суне з усіх боків, карась відбивається.

Дія	Клавіатура	Телефон
Рух	WASD або стрілки	джойстик: торкнись будь-де й тягни
Приціл	миша	автоматично по найближчому
Удар	автоматичний	автоматичний
Вибір апгрейда	1 2 3	тап по картці
Пауза	Esc або P	кнопка «Пауза»

Зброя на вибір перед забігом. Плями б'ють на відстань: безпечніше, але треба влучати. Масштабуються через кількість плям за постріл, купність і пробивання наскрізь. Розочка — розбита пляшка, косить по дузі впритул: більше шкоди за секунду й одразу по кількох, але дістає лише трохи далі, ніж дістають тебе.

Вороги. Зомбі повільні й живучі, шкандибають ривками. Прибульці слабкі, але з кожною хвилею швидшають і з дев'ятої вже бігають швидше за карася — від них не втекти, тільки відстріляти. Еліта з четвертої хвилі: велика, товста, б'є найболючіше.

Усі б'ють однаково — тазом. Увійшовши в контакт, ворог відводить таз назад і доводить замах; удар зараховується на піку виносу. Вийти із зони до завершення замаху — значить не отримати шкоди.

Розвиток. Хвиля міняється кожні 22 секунди: ворогів за раз більше, інтервал між появами коротший, а живучість орди росте квадратично — тому будь-яка прокачка рано чи пізно не витримує. Кожні 15 убитих гра стає на паузу й пропонує три апгрейди на вибір. З десятої частини трупів випадає аптечка на 18 життя.

Кільце Карася

Соулслайк від третьої особи в 3D, окремий файл karas3.html. Герой прокидається в темній Каплиці Пробудження, відчиняє двері й виходить у Міждуп'я — вигорілу землю, над якою висить велетенський золотий карась.

Дорога веде повз кістяк велетенської риби, зруйноване селище з табором, дольмен із руною, сухе русло з єдиним мостом і повалену вежу — до ущелини, за якою туманна завіса й зала боса. Ворогів дев'ятеро, вони стоять трьома осередками, мають короткий радіус уваги й повертаються на місце, якщо відбігти.

Розкладка як в Elden Ring на клавіатурі:

Дія	Клавіша
Рух	WASD
Камера	миша (сторінка бере курсор у захоплення)
Перекат / біг	Пробіл: коротко — перекат, утримувати — біг
Стрибок	F
Удар	ЛКМ, до трьох ударів поспіль
Важкий удар	Shift + ЛКМ, з ударною хвилею
Блок	ПКМ
Захоплення цілі	колесо миші або Tab
Ковток розсолу	Q
Дія: двері, вогнище, ікра, руна	E

На телефоні ліва половина екрана — джойстик руху, права — камера, короткий тап — удар.

Зброя. Жидінький Меч зібраний із семи ланок, кожна провисає й хитається окремо — тому клинок поводиться як хлібний м'якуш і відстає від замаху.

Вороги. Полеглі коропи (шкандибають ривками), Мулярі (кидають грудки мулу здалеку) та Пузирі (повільні, б'ють важко). Бос — Лящ, Перший з Мулу: дві фази, на половині життя прискорюється й додає віяло золотої ікри.

Соулслайкові правила. Витривалість витрачається на удари, перекати й біг. Перекат дає 0.36 секунди невразливості. Смерть залишає всю ікру на місці загибелі: повернешся — забереш, помреш по дорозі — вона згине. Вогнище лікує, наповнює флягу, піднімає всіх убитих і дозволяє витратити ікру на Живучість, Витривалість або Силу.

Залежність. Це єдина гра збірки, якій потрібен інтернет: рушій Three.js вантажиться з cdnjs. Без мережі сторінка чесно про це скаже замість білого екрана.

Баланс

Зводився ботом у headless-прогоні, не на око:

Хто грає	Скільки живе	Доходить до
Стоїть на місці	55–80 с	хвиля 3–4
Бот, плями: тікає й бере бойові апгрейди	100–150 с	хвиля 6–7
Бот, розочка: лізе в гущу, шарахається лише впритул	90–110 с	хвиля 5

Діапазони, а не точні числа: вороги, апгрейди й дропи випадкові, тож кожен прогін відрізняється.

Нерухомість карається за хвилину, обидві зброї тримаються майже однаково довго, і жодна не тягне нескінченно.

Квадратична живучість тут не прикраса. Апгрейди множаться по незалежних осях (швидкість × шкода × кількість × пробивання), і за лінійного росту ворогів прокачаний гравець ставав невразливим — у прогоні обидві зброї переживали 400 секунд, не помітивши орди.

Як додати гру

Гра — це фабрика, яка монтується в переданий контейнер і вміє прибрати за собою:

function createMyGame(root){
  root.innerHTML = MY_TPL;      // власна розмітка: полотно, HUD, екрани
  var AB = new AbortController();
  // слухачі реєструються з { signal: AB.signal }
  // цикл кадрів тримає свій rafId
  function stop(){
    cancelAnimationFrame(rafId);
    AB.abort();                 // знімає всі слухачі одним рухом
    if (AC) AC.close();         // звільняє аудіоконтекст
    root.innerHTML = '';
  }
  return { stop: stop };
}

Гра може й не монтуватися всередину, а жити окремою сторінкою — тоді замість create вкажи href, і картка стане посиланням. Саме так підключене «Кільце Карася».

Далі — один запис у масиві GAMES:

{
  id: 'mygame',                 // він же токен для посилання виду #mygame
  title: 'Назва',
  lede: 'Одне речення про те, що це таке.',
  chips: ['Жанр', 'Керування'],
  bestKey: 'mygame.best',       // ключ рекорду в localStorage, показується на картці
  create: createMyGame,
  thumb: thumbMyGame            // thumb(ctx, w, h, t) — малює мініатюру, t у секундах
}

Оболонка сама побудує картку, запустить мініатюру, змонтує гру, обробить хеш і вихід у каталог.

Контракт короткий, але його варто дотримати повністю. Якщо гра не зніме слухачі або не зупинить свій requestAnimationFrame, вона продовжить крутитися у фоні після виходу в каталог — і другий запуск піде поверх першого.

Ідентифікатори в розмітці гри мають бути власні (у другої гри всі з префіксом k2).

Додавай гру вище блоку «старт» у кінці скрипта. Шаблони розмітки оголошені через var, і до виконання свого блоку кожен із них ще undefined. Поки запуск стояв посеред файлу, відкриття сторінки одразу на другій грі (перезавантаження з #karas2) вписувало в контейнер рядок «undefined» замість розмітки, після чого канвас не знаходився і скрипт падав.

Клавіші

Читай e.code, а не e.key. На українській розкладці фізичні W/A/S/D дають ц, ф, і, в — гра з перевіркою по e.key мовчки лишається без WASD, і працюють тільки стрілки. Обидві ігри мають keyTok(e), який бере e.code, а за його відсутності розбирає e.key разом із кириличними символами.

Як влаштовано

Один самодостатній index.html: оболонка, стилі й усі ігри в одному файлі. Графіка малюється процедурно на <canvas> — карась, дорога, бус, зомбі та прибульці намальовані кодом, жодних спрайтів.

Звук і музика повністю синтезовані через Web Audio API, без аудіофайлів. У першій грі — чіптюн у ля-мінорі, темп якого росте разом із небезпекою; у другій — злий фрігійський риф, що прискорюється з хвилями. Кожна гра тримає власний аудіоконтекст і закриває його на виході.

Рекорди й налаштування звуку зберігаються в localStorage і нікуди не надсилаються. Ззовні тягнуться лише шрифти з Google Fonts; без інтернету все працює, просто системним шрифтом.

Запуск локально

Перші дві гри відкриваються подвійним кліком по index.html — сервер не потрібен.

«Кільце Карася» потребує сервера. Воно вантажить моделі з assets/, а через file:// браузер файли .glb не віддає: гра мовчки відкотиться на саморобні примітиви й виглядатиме гірше, ніж є.

Стенд із перезбіркою

node tools/dev.js

• http://127.0.0.1:8123/karas3.html?go — одразу в грі, без картки запуску
• http://127.0.0.1:8123/ — каталог

Стежить за src/ та assets/: щойно щось змінюється, перезбирає karas3.html і сам перезавантажує вкладку. Якщо збірка впаде, текст помилки з'явиться смугою внизу сторінки, а не лише в терміналі.

З ?go стенд запам'ятовує, де ти стоїш, і повертає тебе туди після перезавантаження — щоб не бігти щоразу від каплиці. Гру він при цьому не запускає сам: після штучного кліку браузер перестає видавати mousedown, і миша разом з ударами перестає працювати. Тож «Прокинутися» щоразу тиснеш сам — це й єдиний спосіб віддати грі мишу.

Порт міняється через --port 9000. Нічого встановлювати не треба — лише вбудовані модулі node. Код перезавантаження вшивається на льоту й у karas3.html не потрапляє.

Збірка вручну

node build.js            зібрати karas3.html із src/
node build.js --check    звірити зібране з наявним файлом