A classic Snake Game built using HTML, CSS, and JavaScript. The player controls a snake that grows by eating food, while avoiding hitting the walls. This project focuses on grid-based movement, collision detection, scoring, and clean UI.
- Welcome modal with Start Game button
- After game over, a Restart Game button appears
- Earn 10 points for every food eaten
- High Score is saved using localStorage
- Score updates instantly while playing
- Tracks total gameplay time
- Starts when the game begins
- Pauses on game-over
- Snake moves every 300ms
- Direction controlled by arrow keys
- Snake grows on eating food
- Food appears at random grid locations
- Automatically re-renders after being eaten
- Game ends when the snake hits a wall
- Game-over modal is shown immediately
- HTML5
- CSS3
- JavaScript (Vanilla JS)
- localStorage API (for high score)
- Click Start Game
- Use Arrow Keys:
- ⬆ Up
- ⬇ Down
- ⬅ Left
- ➡ Right
- Eat food to grow the snake
- Avoid hitting the walls
- Try to beat your own high score!