Snake Classic Game supports three distinct input methods so it works equally well on any device: keyboard for desktop play, swipe gestures detected directly on the canvas for mobile and tablet, and an on-screen D-pad that appears automatically on touch-size viewports. All three methods feed into the same direction queue, so you can mix them freely within a session.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.
Keyboard controls
Every game action is reachable from the keyboard. The table below lists all bindings:| Action | Key(s) |
|---|---|
| Move snake | Arrow keys ↑ ↓ ← → |
| Start / next attempt | Enter or Space |
| Open help | H or ? |
| Close modal | Escape |
Pressing any key while the game is idle (waiting for input) also starts the current attempt — you don’t need to reach for Enter first. Arrow keys both set the initial direction and start the game in one keystroke.
Touch controls (mobile & tablet)
Swipe gestures
Swipe detection is registered directly on the game canvas usingtouchstart and touchend events. The logic works as follows:
- The game measures the total displacement between where your finger touched down and where it lifted.
- If the displacement is ≥ 20 px in any direction (
SWIPE_MIN_PX = 20), it is classified as a swipe. The dominant axis (horizontal vs. vertical) determines whether the snake turns left/right or up/down. - If the displacement is < 20 px in both axes, the gesture is treated as a tap, which starts the game or advances to the next attempt — equivalent to pressing Enter.
On-screen D-pad
The D-pad is a four-button directional control that appears automatically below the canvas on touch-size viewports:- Portrait mobile (viewport width ≤ 480 px) — D-pad is shown via CSS media query.
- Tablets in portrait (481 px – 768 px wide) — D-pad is also shown.
- Landscape mobile (viewport height < 500 px in landscape orientation) — D-pad appears in a compact form.
applyDirection() with their respective direction vector. Like keyboard arrow keys, a D-pad press that would reverse the current direction is ignored. Tapping a D-pad button also starts the game if it is idle.
Help modal
The ? button in the top-right corner of the page opens the help overlay. You can also trigger it from the keyboard with H or ?. When the help panel opens:- If a game is actively running, the game loop is paused immediately (
runningis set tofalseand the scheduled tick is cancelled). - Focus moves to the Close button inside the panel for accessible keyboard navigation.
- Pressing Escape or clicking the Close button dismisses the panel, returns focus to the canvas, and resumes the game loop if an attempt was in progress.
Responsive layout
The D-pad is hidden on desktop (display: none by default in CSS) and revealed only through media queries targeting touch-size viewports, so it never clutters the desktop UI. The canvas itself is declared with width: 100% and height: auto, meaning it scales to fill its container while maintaining a perfect 1:1 aspect ratio — the internal drawing surface is always 400 × 400 logical pixels (20 columns × 20 rows × 20 px per cell), but the visual size adapts to the screen.