Мій ідеальний Тетріс

Репозиторій проекту на GitHub



Що це таке

Тетріс — легендарна гра, яка мені дуже подобається. Я справді люблю цю гру і насолоджуюсь, коли граю. Вона відмінно знімає стрес. Для веселого проєкту на вихідні я вирішив створити гру як браузерний додаток, призначений і для настільних, і для мобільних пристроїв, використовуючи принципи vibe coding. Мобільна частина цієї версії була натхненна Play-Tetris, яка має дуже зручну мобільну схему з жестовим керуванням на основі свайпів. Перегляньте та зіграйте в мою реалізацію Тетрісу тут, це, на мою думку, най «ідеальніша» версія Тетрісу.



ігровий процес моєї версії тетрісу, зіграйте самі тут

Поза кодом

Я не ставив за мету зробити клон Тетрісу як проєкт для портфоліо або щоб чогось навчитися. Я зробив його, бо мені щиро це було потрібно. Коли я під стресом — чи то важкий тиждень на роботі, чи просто накопичення справ у житті — Тетріс є однією з небагатьох здорових речей, які реально допомагають мені перезавантажитися. Коли я нервую, я схильний багато їсти, що з часом додає зайвих кілограмів, тож мати щось, що працює без побічних ефектів, для мене велика річ. Усього 10–30 хвилин опускання блоків, і мій мозок ніби трохи очищується. Для мене це не просто випадкове розслаблення, це спосіб мати щось просте й сфокусоване, куди можна влити стрес. Є навіть цікаві дослідження, які показують, що Тетріс може впливати на те, як мозок справляється з нав’язливими спогадами і стресом, наприклад у експериментах з травматичними фільмами, у людей, яких лікували після реальних аварій, та як додаток до терапії з вимірюваними змінами в мозку. Я не намагаюся перетворити цю гру на медичний засіб, але приємно бачити, що існує наука, яка підтверджує те, що я вже відчуваю: Тетріс справді може допомогти людям справлятися зі стресом.

Тож я пішов шукати пристойну версію Тетрісу для гри, і проблема була в тому, що нічого не зовсім підходило для того, як я хотів грати. Мобільні додатки в App Store переповнені рекламою та мікротранзакціями. Веб-версії гальмували або погано відчувалися на телефоні. Класична версія на NES чудова, але потребує емулятора й додаткового обладнання. Я навіть купив Miyoo Mini, думаючи, що це вирішить проблему, і в результаті я лише носив з собою другий пристрій лише для того, щоб грати в Тетріс. В якийсь момент я зрозумів, що витрачаю більше часу на пошуки правильної версії, ніж зайняло б просто її створити.

З сучасними браузерами, інструментами LLM, такими як Claude Code, та підходами типу vibe coding, нарешті відчулося, що настав правильний час створити Тетріс, який я хочу сам. Швидкий, мінімальний, без реклами, без акаунтів, без магазинів додатків. Просто браузерна гра, яка працює на моєму телефоні й ноутбуку і яка повністю під моїм контролем. Приблизно за день у мене була робоча версія, а після тижня періодичної роботи, щоб зробити її надійнішою та підправити відчуття як на десктопі, так і на мобільних, я був задоволений.

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

Функції

  • Класичне поле Тетрісу 10x20
  • Повне керування з клавіатури на десктопі та сенсовими жестами на мобільних
  • Стандартний рандомайзер фігур “seven-bag”
  • Утримання фігури та попередній перегляд наступних фігур
  • Проекція тіньової фігури, що показує, де фігура приземлиться
  • Крива швидкості за рівнями з динамічною затримкою фіксації (lock delay)
  • Відстеження очок, рядків, рівня та рекорду збережене в локальному сховищі
  • Набір очок за м’яке та швидке опускання
  • Меню в грі з відновленням, перезапуском, виходом, вимкненням музики/ефектів та посиланням на вихідний код
  • Анімація спалаху при очищенні рядка з ефектом звуку
  • Підтримка безпечної зони iOS (Dynamic Island, виріз, індикатор додому)
  • Підтримка офлайн через Service Worker (працює без інтернету після першого відвідування)
  • Можна встановити як PWA (додати на головний екран iOS/Android для досвіду, схожого на додаток)

Керування

Десктоп (клавіатура)

Дія Клавіші
Рух ← → або A D
М’яке опускання ↓ або S
Швидке опускання Space
Обертання за годинниковою стрілкою ↑ W X
Обертання проти годинникової стрілки Z
Утримати фігуру C або LShift
Меню Esc або M
Джерельний код G (title screen)

Мобільний (сенсорні жести)

Дія Жест
Рух Свайп ліворуч / праворуч
М’яке опускання Утримувати і тягнути вниз
Швидке опускання Швидке смахування вниз
Обертання за годинниковою стрілкою Торкнутися
Утримати фігуру Швидке смахування вгору

Крива складності

Криву швидкості та затримку фіксації в цій версії налаштовано на основі досліджень того, як класичні та сучасні ігри Тетріс обробляють прогресію складності. В оригінальному Tetris для NES, гравітація досягає однієї клітинки за кадр на рівні 29, що стало відомим “kill screen”, коли гру стає фактично неможливо грати для більшості людей. Це не було задуманим кінцем, радше побічним ефектом апаратного забезпечення та того, як DAS (Delayed Auto Shift) було занадто повільним, щоб встигати за швидкістю падіння. Вілліс Гібсон довів це у 2024 році, коли він пройшов далі і зламав гру на рівні 157.



ігровий процес класичного Tetris 1989 року для NES (оригінальне джерело)

Сучасні ігри, такі як TGM (Tetris: The Grand Master), вирішили це інакше. Замість того, щоби просто прискорювати падіння фігур до моменту, коли гра ламається, TGM обмежує гравітацію до 20G (миттєве падіння) і потім звужує інші часові вікна, такі як затримка фіксації та DAS, щоб підвищити складність. Стандарт Tetris Guideline використовує 500 мс затримки фіксації з до 15 скидів рухів, чого дотримується й ця версія. Дослідження режиму Death у TGM2 та TGM3 Shirase показали, що практична межа для змагальної гри становить близько 250 мс затримки фіксації з швидким DAS, тоді як усе, що нижче за 133 мс, належить до профільної (спеціалістської) області.

Виходячи з усього цього, крива швидкості тут обмежує гравітацію до 33 мс на рядок (схоже на рівні 19–28 для NES), замість переходу до миттєвого падіння, а DAS масштабується від 170 мс до 100 мс на вищих рівнях, щоб ви могли переміщатися по полю під час затримки фіксації. Мета полягала в тому, щоб високі рівні відчувалися надзвичайно швидкими, але все ще справедливими, ближчими до того, як Tetris 99 та TGM обробляють кінцівку гри, а не підхід оригінального NES, який дозволяє сирій швидкості перегнати ваші вхідні дії.

Під капотом

  • Адаптивний дизайн, оптимізований для десктопа та мобільного (портрет)
  • Попередньо відрендерені спрайти блоків та фон сітки для продуктивності
  • Використовує систему повороту Super Rotation System (SRS) зі стінковими хитаннями (wall kicks) для обертання фігур
  • Виявлення сенсорних жестів на основі швидкості для надійного розрізнення фліка та перетягування
  • Таймінгова система на основі рівнів для швидкості гравітації та затримки фіксації
  • Рекорди та налаштування аудіо зберігаються через localStorage
  • Джерело фонової музики NmCCQxVBfyM
  • Джерело звукового ефекту очищення рядка UMViM2tHrOk
  • Проєкт повністю з відкритим кодом під ліцензією MIT
  • Побудовано з використанням таких AI-інструментів:
    • Claude Code CLI - програмування/розробка
    • Gemini CLI - програмування/розробка
    • Cha CLI - програмування та написання текстів
    • xAI Grok - логотипи та іконки
    • Perplexity - пошук багів
    • Google Search - пошук SVG та інших ресурсів
    • YouTube + yt-dlp - отримання аудіокліпів
    • FFmpeg - редагування аудіо файлів

Остаточні думки

Це був один із тих проєктів, коли мотивація була не технічною, а особистою. Я просто хотів версію Tetris, яка працювала б так, як я хочу, без реклами, без додаткового обладнання і без покладання на чиїсь додатки, які можуть зникнути або змінитися в будь-який момент. Той факт, що мені вдалося перейти від ідеї до відшліфованої гри приблизно за тиждень періодичної роботи, використовуючи сучасні інструменти ШІ та vibe-кодування, багато говорить про те, наскільки далеко ми просунулися в розробці програмного забезпечення.

Я використовую цю версію майже щодня з того часу, як її створив, і вона досі робить саме те, що мені потрібно. Вона допомагає мені відійти від усього, що мене напружує, зосередитися на чомусь простому на кілька хвилин і повернутися з яснішою головою. Якщо ви спробуєте її й вона зробить те саме для вас, це найкращий результат, на який я міг розраховувати. А якщо ви хочете створити форк, підправити криву швидкості, змінити керування або побудувати на її основі щось ще — робіть це. Якщо ви знайдете помилку або маєте пропозицію, не соромтеся відкрити проблему в репозиторії на GitHub. Саме в цьому й полягає сенс зробити його з відкритим вихідним кодом.