Hand‑coded snake game in React

1 / 3Mid-game at speed 2.

Product: Snake & Mouse
Role: Design and code
Team: Nishad P
Timeline: 2021
Status: Live and still playable
Built with: React
styled-components

My first independent coding project: a standard snake game with proper rules, built in a few days, before AI.

At Deloitte I was learning Salesforce's Lightning and Aura frameworks.

On the side I picked up React, because to me the base JavaScript is what matters, and frameworks are wrappers we learn and move on from. I taught myself React for this game and took it all the way to a live deploy.

Concept and work

The whole game runs on one reducer.

The board is a 40 by 16 grid, the snake moves one cell per tick, and hitting a wall or biting yourself ends the game. The snake grows when it eats the mouse, which reappears somewhere random three seconds later. Speed and points rise together: each level shortens the tick by 100 ms and raises the points per mouse (1, 3, 5, 7, 10).

Before you play:

The game opens on a console. Its right side is ambitious documentation for features I planned but never built. Close it, press play, and steer with the arrow keys.

The console that opens first: the game's rules on the left, the ambitious documentation on the right.

Code

Laying out the board once.

The game never measures the screen during play. Before the first move, it computes every cell's position into a 16 by 40 matrix, so everything after that (moving, eating, colliding) is simple index arithmetic.

const matrix = Array.from({ length: pointY }, (_, y) => {
  return Array.from({ length: pointX }, (_, x) => {
    return { top: y * unitY, left: x * unitX };
  });
});

Movement in three lines.

No segment is recalculated. Each tick, the old head becomes the first body cell and the tail drops off, then the head steps one cell forward. That is the whole movement.

const body = [
  state.matrixPos[current_y][current_x],
  ...state.snake.body.slice(0, -1),
];

No turning back.

One of the proper rules: the snake only turns at a right angle. Pressing the opposite direction does nothing, so you can't reverse into your own body.

if (currentDir === directions.right || currentDir === directions.left) {
  if (dir === directions.up || dir === directions.down) {
    return {
      ...state,
      snake: { ...state.snake, direction: action.payload },
    };
  }
}

Reflection

I built this while I was also learning blockchain and Solidity, and the game was my outlet for making that concept more palatable. The console's snake tokens and redeemable scores were where the two were meant to meet. That idea still runs through my work at LEI, where we build and use games as a delivery mechanism for learning.

I could vibe code the heck out of it today: smoother play, more features, a better UI, since I made it before my UX and UI master's. But the point is that it was hand-coded, and I don't want AI on it yet. With AI it's easy to make something 100 times better in minutes, but that wouldn't account for anything.

My takeaway is that I can still explain this code line by line, because I developed the logic myself.