Skip to content
Ayotl
Español

← All courses

How a game is made: Daily Challenge's Snake

Snake is one of Daily Challenge's 36 games, and one of the easiest to read: about 180 lines of JavaScript with no engine or libraries. Here we go through all of it, piece by piece, with the real code. It helps to have done the first data structures units (arrays, queues, BFS), because Snake uses all of them.

0/16 lessons0 xp0 day streak

Unit 1The project

  1. 1
    What we're taking apartDaily Challenge, its Snake and why it's written in plain JavaScript, with no engine or libraries.Start →
  2. How the code is split upThe folders, the contract every game follows and why the logic never touches the screen.

Unit 2Graphics

  1. A 160 × 192 screenThe Atari's virtual screen, how it's scaled up without blurring and where each Snake cell lands.
  2. Letters, sprites and paletteA 3 × 5 font made of ones and zeros, the 1-bit bonus bug and the Atari's 128 colors.

Unit 3The loop and the controls

  1. 30 ticks a second, alwaysrequestAnimationFrame, the accumulator and why the game moves in fixed steps whether the screen runs at 60 or 120.
  2. One bitmask per tickFour directions and one button in a number from 0 to 31: keyboard, D-pad and swipes speak the same language.

Unit 4Snake's logic

  1. The body is a queueThe snake as an array of cells: a head goes in at the front, the tail comes off the back, and it never U-turns.
  2. Collisions, food and pointsWhen a cell is free, why the tail doesn't get in the way, how it grows, what each fruit is worth, hunger and the bonus bug.
  3. Text maps and an unbroken arenaFrom a text drawing to a grid, each day's extra walls, and the search that keeps the arena from splitting in two.

Unit 5Seeded randomness

  1. The same luck for everyoneWhy Math.random won't do for a daily challenge: mulberry32, the date as a seed and the same game on the phone and on the server.

Unit 6Sound

  1. A sound chip with Web AudioWithout a single audio file: square and triangle oscillators, an envelope, white noise and the game's events.
  2. Music from a recipeText recipes, MIDI notes and hertz, a melody written by the day's seed and a sequencer that never falls behind.

Unit 7The server and the daily challenge

  1. The server doesn't trust your scoreThe phone sends each tick's buttons, not a number; the server replays the game with the same code and works out the score itself.
  2. The ghost: watching someone play without videoIf the game is deterministic, watching someone else's game is receiving their buttons and simulating them. Half a second of delay and almost no bytes.

Unit 8Online multiplayer

  1. Snake versus: one simulation, several playersSnakeVs takes one input per player each tick, moves every snake at once and hands out points by finishing place.
  2. Lockstep: everyone sees the same gameA host collects the buttons and every 200 ms sends a turn; everyone simulates only with those turns, in order. Lost packets, players who leave and the price of delay.