З чого складається гра: три шари

1. Навіщо знати будову, якщо просите не вручну

Тьома сходив за кавою й повернувся до Льохи з готовністю слухати про красу — і відразу наштовхнувся на зустрічне запитання.

— Слухай, а ось ти кажеш: «Зроби красиво». Красиво — це де взагалі? У якому місці гри?

Тьома відкриває рота, а відповіді немає. Ну… усюди? Щоб уся була красива. Льоха чіпляється саме за це розмите «усюди»:

— Ось поки ти не знаєш, з чого гра зібрана, просити можеш лише навмання. «Зроби красиво», «полагодь», «якось не так». А коли розумієш будову, просиш точно: ось це поводження не чіпай, а ось вигляд поміняй. Тому зараз — коротка карта. З яких шарів зібрана будь-яка вебсторінка і будь-яка гра в браузері.

Тьома напружується — звучить як початок лекції з програмування, а він сюди не за цим.

— Тільки давай без програмування. Я код учити не підписувався. Мені й курсів вистачило...

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

2. Дім із трьох шарів: HTML, CSS, JS

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

— Будь-яка вебсторінка або гра зібрана з трьох шарів. Перший — HTML. Це каркас. Стіни й кімнати: усе, що взагалі є на сторінці. Кнопка, заголовок, поле введення, зображення — HTML каже, що присутнє. Як креслення дому: тут стіна, тут двері, тут вікно. Сам по собі каркас голий і страшнуватий — просто скелет.

— А як думаєш, — підкидає Льоха перевірочне запитання, — ось у твоїй змійці що було б HTML?

— Ну… саме поле? Клітинки, рахунок, кнопка «старт». Те, що взагалі є на екрані.

— Вважай, вгадав. Це каркас — усе, що присутнє на сторінці. Другий шар — CSS. Це оздоблення й інтерʼєр. Як усе виглядає: кольори, шрифти, відступи, тіні, плавність, анімація — усе те саме «дороге» відчуття. Один і той самий каркас можна оздобити дешево, а можна розкішно — і вся різниця саме в CSS. Коли кажеш «красивий сайт», «стильно», «плавно» — ти про CSS.

— О, так ось де живе моя краса.

— Саме тут. І третій — JS, JavaScript. Це електрика й техніка в домі. Поведінка: що відбувається, коли тиснеш кнопку, як повзе змійка, як рахується рахунок. Логіка, мізки. Але також і анімація, вибухи, рух. Каркас стоїть, оздоблення зроблене — а щоб світло вмикалося і техніка працювала, потрібна проводка. Це JS.

Він підсумовує всю карту одним рядком:

— Запамʼятай просто: HTML — що є, CSS — як виглядає, JS — що робить. Три шари, три ролі.

3. «Працює» — це не «виглядає дорого»

— А тепер — найкорисніше за сьогодні, — Льоха трохи тисне. — «Гра працює» і «гра виглядає круто» — це різні шари.

Тьома хмуриться: хіба не одне й те саме?

— Дивись. Працює — це JS. Змійка повзе, яблуко зʼїдається, рахунок зростає. Логіка крутиться. А виглядає дорого — це CSS. Плавність, кольори, ефекти. Краса. І ось навіщо тобі це знати практично: коли захочеш зробити гру красивішою, тобі не треба лізти в логіку. Логіка працює — залиш її в спокої. Уся краса додається в шар CSS. Можна зробити розкішний ремонт, не чіпаючи проводку, — і гра працюватиме так само, просто виглядатиме в рази дорожче.

У Тьоми щось клацає, і він сам підсумовує:

— Стоп. Тобто я можу не переписувати саму змійку, а лише переодягнути її? Механіка та сама, а вигляд — інший?

— Саме так. Переодягнути, не ламаючи. Ось і вся думка.

— Почекай, почекай. Але ж ти казав, що анімація — це JS?

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

— Гаразд, вважатимемо, що ти мене переконав, — погоджується Тьома. — Що далі?

4. Одна кнопка у трьох шарах

Щоб усе зійшлося, Льоха показує на екрані найменший приклад — звичайну кнопку «Грати». Вчитуватися в код не треба, каже, дивись на ролі:

<button id="play">Грати</button>          <!-- HTML: що є — кнопка з написом -->

#play { background: #6c5ce7; border-radius: 12px; }   /* CSS: як виглядає — колір, заокруглені кути */

document.getElementById("play").onclick = startGame;  // JS: що робить — по кліку запускає гру

— Три рядки — три шари, — розбирає Льоха. — HTML створив кнопку. CSS зробив її фіолетовою й заокруглив кути. JS привʼязав до неї дію — по кліку запускається гра. Поміняєш колір у CSS — кнопка стане іншою на вигляд, а працюватиме так само. Стереш рядок JS — кнопка залишиться красивою, але мертвою, на клік не відгукнеться. Кожен шар відповідає за своє.

Тьома вдивляється й упізнає в коді знайомі елементи. І сам здогадується перенести це на змійку:

— Отже, у моїй змійці те, як вона повзе й їсть яблуко, — це JS, логіка. А те, якого вона кольору й як плавно рухається, — це CSS, вигляд. І якщо я хочу її лише красивіше, мені в JS-логіку лізти взагалі не треба.

— Ну все, дійшло. Робоче не чіпаємо, видиме перефарбовуємо.

5. «А мені тепер це все вчити?»

Тьома ловить неприємну думку й одразу її озвучує:

— Почекай. Це що, мені тепер треба сісти й вивчити весь цей CSS, щоб робити красиво? У мене й так справ вистачає.

Льоха починає друкувати відповідь, але Тьома в чат уже не дивиться. Перед очима розгортається похмура дорога: підручники, години, синтаксис, нудні правила — увесь той шлях «спочатку вивчи все руками», від якого він якраз і тікав до ШІ. І від цього роздратування він, майже машинально, під столом тицяє в телефон і строчить Артему2036: «чув, я тут красу роблю, а мені кажуть, що без CSS ніяк. це що, реально весь фронтенд зубрити? я ж не для цього».

Тьома фиркає — зачепило. І, щоб охолонути, починає проговорювати про себе: та не CSS він хоче, у труні він його бачив. Він хоче, щоб виходило красиво. А хто там усередині це верстання пише — та хоч хто. Лише б не він. І поки він подумки будує цю відмазку, вона раптом сама обертається відповіддю. Він же не CSS хоче — він хоче результат. Отже, і питання не «як мені вивчити CSS», а «хто зробить CSS за мене». Артему2036 не дав відповіді — він змусив Тьому подумати, чого той насправді просить.

Тьома піднімає очі від телефона назад до Льохи — і потрапляє рівно в те, що той саме говорить.

— А ось це запамʼятай найміцніше, — Льоха ніби веселішає. — Ні. Тобі не верстання руками писати, тобі його замовляти. Розумієш будову — значить, можеш точно ставити завдання. А верстання напише ШІ-агент. Твоя сила не в тому, щоб знати синтаксис, а в тому, щоб знати: ось це шар вигляду, а це шар логіки — і просити правильно.

Думка Тьомі страшенно подобається — бо він сам, хвилину тому, в чаті на неї й натрапив.

— Тобто правильне запитання не «як мені вивчити CSS», а «хто зробить CSS за мене». Так?

— О, ось це вже правильне запитання, — киває Льоха. — І цей «хто» у тебе вже є.

— Так Сашко мені вже написав Змійку. Він у дизайні нічого не розуміє і зробити красиво не може. Я теж не розумію — як я йому детальне ТЗ поставлю?

— А якщо ми Сашка проапгрейдимо? — закидає Льоха. — Навчимо його робити круту анімацію.

Тьома мовчки підводиться й іде за новою кавою. День обіцяє бути цікавим.