← Back to Home

Snake — JavaScript Clone

HTML • CSS • JavaScript

Overview

A modern take on the classic Snake game, written in vanilla JavaScript. Grid-based movement, clean collision logic, score/high-score tracking, and unlockable color themes as you climb.

How to Play

• Move with Arrow Keys (or WASD)
• Eat food to grow; avoid walls and your own tail
• Game speeds up slightly as your score increases

Highlights

• Deterministic tick loop for consistent movement & input buffering
• Grid coordinate system → simple, readable collision math
• Pause/reset states; persistent high score via localStorage
• Theme unlocks at score thresholds (color palette shifts)

Live Code

Tech Notes

• Canvas rendering with integer grid; one-cell step per tick
• Fixed timestep loop to avoid speed variance across devices
• Input queue prevents 180° turn bugs within a single tick
• Responsive canvas sizing; keyboard focus hint for accessibility
• all visuals are coded using CSS