Play Snake: Data Packet

A colorful take on the classic Snake, built with plain JavaScript and canvas. Guide the data packet, grow the stream, and avoid crashing. Play solo or duel a friend.

This is a real, playable game, not a screenshot. Eat the glowing bytes to grow longer, but watch your tail and the walls. It is built with no library, just a grid, a list of cells, and a tick based loop, which makes it the clearest possible example of core game logic. After you play, the sections below show how it works.

How to play

Steer the packet around the grid to eat the glowing bytes. Each byte you collect makes the stream one segment longer and adds to your score. The catch is that the longer you get, the harder it is to avoid running into your own tail, and the walls are fatal too. On a phone, swipe in the direction you want to go or use the on-screen arrows. On a keyboard, use WASD or the arrow keys. In the 2 player duel, two streams share one grid, first one to crash loses.

How this game is built

Snake is the classic teaching game because every part maps to a core idea, with very little code.

The grid and the snake as data

The board is a grid of cells, and the snake is just a list of cell coordinates. Drawing is reading that list, the single source of truth idea from game state management.

Moving on a fixed tick

Instead of moving every animation frame, the snake advances on a steady tick. Each step adds a new head cell and removes the tail, which looks like smooth crawling. The game loop drives that beat.

Growing and the byte

When the head lands on the byte, the tail is kept instead of removed, so the snake grows by one, and a new byte appears in a free cell. That one rule is the whole scoring system.

Collisions

Before each move the new head is checked against the walls and against every snake body. A grid makes this exact and cheap, a clean version of collision detection.

Two streams on one grid

The duel runs two snakes from the same loop, each reading its own keys, and a crash into a wall, a tail, or the other stream ends it. Handling two inputs at once is the pattern in handling game input.

Why a steady tick matters

That fixed beat is not just for games. Real systems run on steady ticks too: servers poll on intervals, animations target a frame budget, and realtime apps reconcile state on a schedule. Decoupling the update rate from the draw rate, exactly what this game does, is the same idea behind the loops in realtime systems and realtime rendering loops. Get the tick right and everything downstream feels smooth.

Frequently asked questions

How do I control the snake?

Swipe on the board on a phone, or tap the on-screen arrows. On a keyboard use WASD or the arrow keys. You cannot turn straight back on yourself, which is the classic rule.

What is the 2 player duel?

Two snakes share one grid. Player one uses WASD and player two uses the arrow keys. Crashing into a wall, your own body, or the other snake ends your run, and the last one alive wins.

Why does the snake speed up?

In solo mode the tick gets slightly faster as your score grows, so the challenge ramps up. The two player duel runs at a steady speed so it stays fair.

How does this relate to real programming?

It is a tiny model of a tick based system: a fixed update beat, state held in a simple data structure, and collision checks on a grid. The same decoupling of update and draw appears in real game and realtime engines.