The Mechanics of Snake

The classic Snake game is a perfect introduction to game development because it relies on three fundamental computer science concepts: Grid Coordinates, Queue Data Structures, and the Game Loop.

---

The Grid System

Snake doesn't exist in a smooth, continuous world. It lives on a discrete grid. Every position is defined by an X (horizontal) and Y (vertical) coordinate.

The "world" is simply a 2D array or a mathematical grid where:

1. X increases moving right.
2. Y increases moving down.
3. Objects (Head, Body, Food) occupy exactly one cell at a time.

Coordinate Visualizer

Hover over the grid to see how computer graphics translate screen pixels into grid coordinates.

---

Movement Logic: The FIFO Queue

This is the most misunderstood mechanic. The snake does not move like a train pushing cars. It moves by manipulating a data array.

The snake is stored as an array of coordinate objects: [{x: 5, y: 5}, {x: 4, y: 5}, {x: 3, y: 5}]

To "move" the snake one step:

1. Calculate the new head position based on direction.
2. Unshift (Add) the new head to the front of the array.
3. Pop (Remove) the last segment (tail) from the back of the array.

If the snake eats food, we simply skip step 3 (don't remove the tail), which makes the array grow by one.

Array Manipulation Demo

Step through the code logic manually to see how the data structure changes to create the illusion of movement.

---

Collision Logic: "Am I Dead?"

In every frame of the game loop, after the snake moves, the computer asks two questions. If either is true, the game ends.

1. Wall Collision: Is my Head X < 0 or > Width? (Same for Y).
2. Self Collision: Does my Head coordinate match any Body coordinate?

The "Self Collision" check is an iteration loop. We compare snake[0] (Head) against snake[1], snake[2], snake[3], etc.

Collision Checker

Use the sliders to manipulate the Head coordinates and see how the boolean logic evaluates "Death."

---

The Game Loop

Finally, the engine that drives it all. Snake is not "real-time" like a First Person Shooter. It is tick-based.

Every X milliseconds (the tick rate), the computer performs one cycle:

1. Read latest Input (Direction).
2. Calculate new Head position.
3. Check Collisions.
4. Update the Array (Move).
5. Draw to screen.

Playable Interactive Demo

Here is the full implementation. I've added a Tick Rate slider. Notice how increasing the speed doesn't make the snake move smoother—it just makes the game loop run more frequently.

The 180-Degree Turn Constraint

In the Snake game, preventing a 180-degree turn (e.g., going immediately Left while moving Right) is a critical safety feature. Without it, the player would instantly lose.

This mechanic exists because of the Head-to-Neck Collision.

---

The "Neck" Problem

Consider the array structure of the snake.

• Index 0: The Head (Current position)
• Index 1: The "Neck" (The position the head was in 1 frame ago)

If you are moving Right $(x+1)$, your Neck is to your Left $(x-1)$. If you immediately tell the code to move Left, the new Head position will calculated to be exactly where the Neck currently sits.

The game's collision detection loop runs: Does Head == Any Body Part? Since the new Head equals the Neck's coordinates, the game registers an immediate self-collision.

The Suicide Prevention Check

To prevent this, programmers add a Logic Guard before accepting input. This guard checks if the requested direction is the direct opposite of the current direction.

The Logic Rule:

"If moving on the X-axis, ignore new X-axis inputs. Only accept Y-axis inputs."

Logic Guard Visualizer

Try to force the snake to reverse. Watch how the Logic Guard (the if statement) intercepts the command before it reaches the game engine.

---

The "Neck Snap" Visualization

Why is that code necessary? Let's visualize what happens if we disable that safety check.

If the game allows dx (horizontal velocity) to go from 1 (Right) to -1 (Left) in a single frame:

1. Current Head is at [5, 5].
2. Neck is at [4, 5].
3. Player presses Left.
4. New Head position calculated: 5 + (-1) = 4.
5. New Position [4, 5] matches Neck Position [4, 5].
6. COLLISION.

The Logic of Axes

A cleaner way to think about this in programming is dealing with Axes.

• Axis X: Left (-1) and Right (1)
• Axis Y: Up (-1) and Down (1)

The rule is: "You cannot switch to a direction on the same axis you are currently traveling." You must switch axes first (X to Y, or Y to X) to execute a turn.