What a game is made of: three layers

1. Why know the structure if you're asking not to do it by hand

Tommy went for coffee and came back to Alex ready to hear about beauty — and immediately ran into a question in return.

— Hey, so you keep saying "make it beautiful." Beautiful where, exactly? What part of the game are we talking about?

Tommy opens his mouth — and has no answer. Well... everywhere? So the whole thing would be beautiful. Alex zeroes in on that vague "everywhere":

— Until you know what the game is made of, you can only ask by guessing. "Make it beautiful," "fix it," "kind of not right." But once you understand the structure, you can ask precisely: don't touch this behavior, but change the look here. So now — a short map. What layers any web page and any browser game are made of.

Tommy tenses up — it sounds like the start of a programming lecture, and that's not why he's here.

— Just don't make it programming. I didn't sign up to learn code. I've had enough of those courses...

— And you don't have to. No syntax. Three labels and an understanding of who is responsible for what. The goal is not for you to build it by hand, but to set the task for the agent precisely — know which layer does what, and ask the right way. That's it.

2. A house of three layers: HTML, CSS, JS

Alex looks for a simpler analogy, and after running through a few options, settles on the most obvious one — a house.

— Any web page or game is built from three layers. The first is HTML. That's the frame. The walls and rooms: what is there on the page at all. A button, a heading, an input field, an image — HTML says what exists. Like a house blueprint: wall here, door here, window here. By itself, the frame is bare and kind of ugly — just a skeleton.

— And what do you think, — Alex throws in a check question, — in your Snake game, what would HTML be?

— Well... the field itself? The cells, the score, the "start" button. What is on the screen at all.

— You got it. That's the frame — everything that exists on the page. The second layer is CSS. That's the finish and the interior. How everything looks: colors, fonts, spacing, shadows, smoothness, animation — the whole "expensive" feeling. The very same frame can be finished cheaply, or it can be luxurious — and all the difference lives in CSS. When you say "beautiful site," "stylish," "smooth" — you're talking about CSS.

— Oh, so that's where my beauty lives.

— Exactly here. And the third is JS, JavaScript. That's the electricity and hardware in the house. Behavior: what happens when you press a button, how the snake moves, how the score is calculated. The logic, the brains. But also animation, explosions, movement. The frame stands, the finish is done — but for the light to turn on and the hardware to work, you need wiring. That's JS.

He sums up the whole map in one line:

— Just remember: HTML — what exists, CSS — what it looks like, JS — what it does. Three layers, three roles.

3. "Works" doesn't mean "looks expensive"

— And now — the most useful thing for today, — Alex puts a bit of pressure on. — "The game works" and "the game looks cool" are different layers.

Tommy frowns: aren't they the same thing?

— Look. Works means JS. The snake moves, the apple gets eaten, the score goes up. The logic runs. And looks expensive means CSS. Smoothness, colors, effects. Beauty. And here's why you need to know this in practice: when you want to make the game prettier, you don't need to dive into the logic. The logic works — leave it alone. All the beauty gets added in the CSS layer. You can give it a luxurious renovation without touching the wiring — and the game will work exactly the same, just look much more expensive.

Something clicks for Tommy, and he sums it up himself:

— Wait. So I don't have to rewrite the snake itself, I can just redress it? Same mechanics, different look?

— Exactly. Redress it without breaking it. That's the whole idea.

— Hold on, hold on. But you said animation is JS?

— Not all animation is the same. If elements move, that's most often JS. But if elements change brightness, pulse, or shimmer in different colors, that's CSS. More than that, modern CSS is so powerful that you can even make very cool visual effects with it. And only if CSS is already squeezed to the max does it make sense to use JS.

— Fine, let's say you've convinced me, — Tommy agrees. — What's next?

4. One button in three layers

So everything lines up, Alex points at the simplest example on the screen — an ordinary "Play" button. No need to read the code, he says, just look at the roles:

<button id="play">Play</button>          <!-- HTML: what's there — a button with a label -->

#play { background: #6c5ce7; border-radius: 12px; }   /* CSS: how it looks — color, rounded corners */

document.getElementById("play").onclick = startGame;  // JS: what it does — starts the game on click

— Three lines — three layers, — Alex explains. — HTML created the button. CSS made it purple and rounded the corners. JS attached an action to it — the game starts on click. Change the color in CSS — the button will look different, but it will still work the same. Delete the JS line — the button stays beautiful, but dead, it won't respond to a click. Each layer is responsible for its own thing.

Tommy peers closer and recognizes familiar elements in the code. And he figures out how it applies to the snake game himself:

— So in my Snake game, how it moves and eats the apple is JS, the logic. And what color it is and how smoothly it moves is CSS, the look. And if I only want it prettier, I don't need to touch the JS logic at all.

— There you go, it clicked. Don't touch the working part, repaint the visible part.

5. "So do I have to learn all this now?"

Tommy catches an unpleasant thought and says it out loud right away:

— Wait. So now I have to sit down and learn all this CSS to make things look nice? I already have enough to do.

Alex starts typing a reply, but Tommy is no longer looking at the chat. In front of his eyes, a grim road unfolds: textbooks, hours, syntax, boring rules — the whole "first learn everything by hand" path he had specifically run from to AI. And from that annoyance, almost on autopilot, he taps his phone under the table and sends Tom2036: "hey, I'm trying to make things look good here, and they're telling me it's impossible without CSS. does that mean I really have to memorize all front-end stuff? that's not why I'm here"

Tommy snorts — that hit a nerve. And to calm down, he starts thinking it through to himself: no, he doesn't want CSS, he couldn't care less about it. He wants it to turn out beautiful. And whoever writes the markup inside, well, anyone will do. As long as it's not him. And while he's mentally building that excuse, it suddenly turns into the answer on its own. He doesn't want CSS — he wants the result. So the question is not "how do I learn CSS," but "who will do the CSS for me." Tom2036 didn't give him an answer — he forced Tommy to think about what he was actually asking for.

Tommy lifts his eyes from the phone back to Alex — and lands right in the middle of what Alex is saying.

— And remember this above all, — Alex seems to brighten up. — No. You do not need to write the markup by hand, you need to order it. If you understand the structure, that means you can set the task precisely. And the AI agent will write the markup. Your strength is not in knowing syntax, but in knowing: this is the visual layer, and this is the logic layer — and asking the right way.

The idea really delights Tommy — because just a minute ago, he had stumbled onto it in the chat himself.

— So the right question is not "how do I learn CSS," but "who will do the CSS for me." Right?

— Oh, that's the right question, — Alex nods. — And you already have that "who."

— But Sam already wrote the Snake for me. He doesn't understand design at all and can't make it look good. I don't understand it either — how am I supposed to give him a detailed spec?

— And what if we upgrade Sam? — Alex tosses out. — Teach him to make cool animation..

Tommy silently gets up and goes for more coffee. The day promises to be interesting.