Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ac-unefm/snake-game/llms.txt

Use this file to discover all available pages before exploring further.

All game parameters are defined as named constants at the very top of the <script> block in index.html, and all visual design tokens are CSS custom properties declared in the :root block inside the <style> tag. Customizing the game means editing these values directly in index.html — open the file in any text editor, make your change, save, and refresh the browser. No build step, no package manager, and no toolchain is required.

​
Speed & difficulty constants

The four speed constants control how fast the game starts, how fast it can get, and how quickly difficulty ramps up as the player scores.
index.html — speed constants
const BASE_TICK  = 130;  // ms — starting speed (lower = faster)
const MIN_TICK   = 45;   // ms — maximum speed cap
const STEP_SCORE = 5;    // points scored per level-up
const STEP_MS    = 12;   // ms faster per level
The game loop uses these to compute the current tick interval with getTick(score): 
tick = max(MIN_TICK, BASE_TICK − (level − 1) × STEP_MS)
The interval in milliseconds between each snake movement at the beginning of a game (score = 0, level = 1).
  • Default: 130 ms ≈ ~7.7 moves per second.
  • Slower / beginner-friendly: increase to 200 — the snake starts noticeably slower, giving new players more reaction time.
  • Faster start: decrease to 80 — the game opens at a challenging pace right from the first move.
The shortest interval (in ms) the game loop will ever use, no matter how high the score climbs. This prevents the game from becoming physically unplayable at very high levels.
  • Default: 45 ms ≈ ~22 moves per second.
  • More extreme cap: decrease to 30 — experienced players will face a genuinely demanding speed ceiling.
  • Gentler cap: increase to 60 — limits how fast the game can get, keeping it accessible at high scores.
How many points the player must score before the snake speeds up by one level.
  • Default: 5 — the game speeds up every 5 food items eaten.
  • Slower progression: increase to 10 — the game stays at each speed longer before levelling up.
  • Faster progression: decrease to 3 — the difficulty ramps up very aggressively from the start.
How many milliseconds are shaved off the tick interval each time the player levels up.
  • Default: 12 ms per level.
  • More dramatic speed increase: raise to 20 — each level-up is a noticeably bigger jump in pace.
  • Smoother progression: lower to 6 — levels feel more gradual; the game eases into higher speeds.

​
Grid size

GRID_SIZE controls the pixel size of each cell on the 400×400 canvas. The number of columns and rows is derived at runtime by dividing the canvas dimensions by GRID_SIZE.
index.html — grid constants
const GRID_SIZE = 20;    // px per cell
// Canvas is fixed at 400×400 in HTML:
// <canvas id="canvas" width="400" height="400"></canvas>
// COLS = canvas.width  / GRID_SIZE  → 20 columns
// ROWS = canvas.height / GRID_SIZE  → 20 rows
To change grid resolution: edit only GRID_SIZE.
GRID_SIZE valueGrid layoutCharacter
1040 × 40 cellsDense, harder — more room to navigate
2020 × 20 cellsDefault balance
4010 × 10 cellsLarge cells, simple — good for beginners
To change the canvas size: update both the width and height HTML attributes on the <canvas> element and, if desired, adjust the max-width CSS property on #game-region: 
<!-- Example: 600×600 canvas -->
<canvas id="canvas" width="600" height="600" ...></canvas>

#game-region { max-width: 600px; }
Always keep canvas.width and canvas.height evenly divisible by GRID_SIZE. For example, a 400px canvas with GRID_SIZE = 30 produces fractional cell boundaries (13.33 cells), which causes misaligned grid lines and clipped snake segments. Valid combinations include 400/20, 400/40, 600/20, 600/30, etc.

​
Session length

SESSION_ATTEMPTS controls how many consecutive attempts make up one session. After all attempts are exhausted, the session results panel is displayed with per-attempt statistics and aggregated session metrics.
index.html — session constant
const SESSION_ATTEMPTS = 5;
Adjust to taste:
  • 3 — a quick session; useful for short play breaks.
  • 5 — the default; balanced pacing with a meaningful stats summary.
  • 10 — a marathon format; session stats become more statistically meaningful with larger samples.
If you change this value, also update the number of session-dot elements in the HTML to match — there is one <span class="session-dot"> per attempt in the #session-bar div: 
<!-- Add or remove dots to match SESSION_ATTEMPTS -->
<span class="session-dot" id="dot-0"></span>
<span class="session-dot" id="dot-1"></span>
<span class="session-dot" id="dot-2"></span>
<span class="session-dot" id="dot-3"></span>
<span class="session-dot" id="dot-4"></span>
And update the dots array initializer in JS (currently Array.from({ length: 5 }, ...)) to use the new count.

​
Color palette

Colors are defined in two places: the CSS :root block (used by all HTML/CSS UI elements — HUD, buttons, overlays, session dots) and the JS COLORS object (used by the canvas 2D renderer for grid lines, food, and snake segments). To change the look of the game completely, update both.
index.html — CSS custom properties
:root {
  --color-bg:          #0d0d0d;  /* page background */
  --color-surface:     #111111;  /* card / panel backgrounds */
  --color-text:        #e0e0e0;  /* primary text */
  --color-muted:       #666666;  /* secondary / label text */
  --color-primary:     #a855f7;  /* accent — snake head, buttons, active dots */
  --color-primary-dim: #7e22ce;  /* dimmed accent — completed session dots */
  --color-food:        #f87171;  /* food item color */
  --color-warn:        #facc15;  /* level indicator, active session dot */
  --color-grid:        #161616;  /* grid line color on canvas */
  --color-border:      #222222;  /* borders and dividers */
  --color-success:     #4ade80;  /* success highlights */
}
index.html — canvas palette
const COLORS = {
  head: '#a855f7',  // snake head fill + glow shadow
  body: '#7e22ce',  // snake body segment fill
  food: '#f87171',  // food circle fill + glow shadow
  grid: '#161616',  // grid line stroke color
};
Keep COLORS.head in sync with --color-primary and COLORS.body in sync with --color-primary-dim. These pairs style the same visual concept — the snake — on two different rendering surfaces (HTML/CSS and the canvas). Keeping them aligned ensures the session dot colors, button hover states, and the snake itself share a consistent accent color.

​
Swipe sensitivity

SWIPE_MIN_PX sets the minimum finger travel distance in pixels before a touch gesture is classified as a directional swipe. If the finger moves less than this threshold in both axes, the touch is treated as a tap (which starts or continues the game) rather than a movement command.
index.html — swipe threshold
const SWIPE_MIN_PX = 20; // minimum px of finger travel to register as a swipe
  • More sensitive (10): very short swipes register as directional input — useful for players with precise control, but may cause accidental direction changes.
  • Default (20): a comfortable middle ground that filters out minor finger tremor.
  • Less sensitive (40): requires a more deliberate swipe — reduces accidental moves, but can feel sluggish on very small screens.

​
Example: making a lighter theme

The default palette uses a near-black background designed for dark environments. Here is a concrete example of switching to a light theme by overriding the CSS custom properties: 
:root {
  --color-bg:      #f5f5f5;
  --color-surface: #ffffff;
  --color-text:    #1a1a1a;
  --color-muted:   #888888;
  --color-border:  #e0e0e0;
  /* Keep primary, food, warn, and success colors or adjust for contrast: */
  --color-primary:     #7c3aed;
  --color-primary-dim: #5b21b6;
  --color-food:        #ef4444;
  --color-warn:        #d97706;
  --color-grid:        #e5e5e5;
  --color-success:     #16a34a;
}
Note that the canvas background color is set independently in the JavaScript draw() function: 
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, canvas.width, canvas.height);
If you want the canvas to match a light background, find this line in the draw() function and change the fill color to match your new --color-surface, for example: 
ctx.fillStyle = '#ffffff';
Also update COLORS.grid to a color that is visible against the new canvas background: 
const COLORS = {
  head: '#7c3aed',
  body: '#5b21b6',
  food: '#ef4444',
  grid: '#e5e5e5',  // light grey grid lines on a white canvas
};

Build docs developers (and LLMs) love

Get started for freeTalk to us