This repository contains my first JavaScript game: a classic Snake Game built using the HTML Canvas element.
I’m creating this project as part of my Techtonica software engineering journey.
I first looked at JavaScript for Kids to understand the basics, but I soon realized the book used jQuery and didn’t include some features I wanted, like letting the snake pass through walls. From there, I pieced the game together using YouTube tutorials, a lot of reading, other books, documentation, and support from my mentor.
- Practice JavaScript through hands-on development
- Learn how to draw and animate using Canvas
- Work with movement, key events, and game loops
- Understand how to structure a small interactive project
- Iterate and improve the game as I continue learning
Play the game here: “Coming soon”.
The Snake Game lives inside snake.html. This page loads the canvas and the script snake.js.
Option 1: Open the game directly
Clone the repository
Open the file snake.html in your browser
Click Start Game
Use the arrow keys to move the snake
Option 2: Run using VS Code + Live Server
Install the Live Server extension
Right-click snake.html
Select Open with Live Server
The game will reload automatically whenever you change snake.js
Real-time movement using arrow keys
Random food spawning
Snake grows after eating food
Speed increases every 5 foods
Score displayed on the canvas
Timer created using Date
Start and Restart buttons
Easter Egg messages rotating every time score is a multiple of 5
Last 3 scores shown on Game Over using push() and shift()
Game board drawn entirely with Canvas
Clean and readable code structure