Snake Game with JavaScript
Remember the snake game that kept us hooked, back in the old days? Here’s a simple JavaScript tutorial to help you build it! Take a sneak peak into the live demo of the game, before you begin!
This article is meant for those who are new to JavaScript. I’ve broken down the process of creating a snake — game into simple concise steps, which you can follow.
The explanation of the code is detailed in the comments in the code.
And wait! Already familiar with HTML and CSS? Skip to step 4 for the JavaScript code!
Step 1: Base file creation
Beginning the process, initially we would need to create the base files for the project. An HTML file as the foundation, a CSS file for the styling, and the JavaScript file with the code for the game!
1. index.html
2. snake_game.css
3. snake_game.js
Step 2: The HTML file
With HTML, alone you can create the simplest of websites. HTML is the markup language for web pages. To get a thorough idea of the different HTML elements, HTML tags and so on, check out: W3Schools for HTML.
Here, the different div elements we have chosen are:
1. “gameContainer”, as the base for the game board.
2. “scoreContainer”, to keep the scores.
3. “onScreenControllers”, with the navigation buttons for the mobile screen.
We’ve also linked our style-sheet — ‘snake_game.css’ and loaded our game logic through ‘snake_game.js’ in the html file.
Check out the comments in the code for a line-by-line explanation.
Code (HTML)
Add the following content to index.html:
Step 3: The CSS file
CSS (Cascading Style Sheets) is used to decorate the otherwise plain HTML file. Without using CSS, the amount of designing we can do to the web page is extremely limited. To get a detailed idea about the different CSS tags, check out W3Schools for CSS.
Using snake_game.css we have styled every small and big element on our html file, from the game board, to the snake, it’s food, and the onscreen control buttons as well!
Check out the comments in the code for a line-by-line explanation.
Code (CSS)
Add the following content to snake_game.css:
(Play around to create different themes 😉)
Step 4: Game logic — Javascript file
This is the most important step, or where the game logic comes to play. Here we write code for the javascript file ‘snake_game.js’.
- Initialize the score variables:
2. Code for the Game Board pixels:
3. Code for the Food:
4.Code for the Snake 🐍:
4.1. Code related to the Direction of the snake:
4.2. Code related to the Movement of the snake:
5. Code to start the game using the above logic:
The complete snake_game.js is here:
With this, you now have a perfect snake game! Try it out, and reach out to me if you have doubts, through my website rabiroshan.com!
Here you’ll find the complete project on my Github repository!
Feel free to use the code!
