Snake Game with JavaScript

Rabi Roshan
Sep 3, 2020 · 3 min read
Snake game Preview
Snake game Preview

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:

HTML code

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’.

  1. 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!

WriteaByte

Make-A-Ton’s Tech Blog!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store