Create the Snake Game Using JavaScript | Code Explained

Create the Snake Game Using JavaScript

Create the Snake Game Using JavaScript

In general, to create a JavaScript game, you'll need two things, the first is the HTML5 canvas, and the second is JavaScript.

You first go and create the canvas element, inside your HTML file :

then before the closing body tag "</body>", you add your JavaScript code.

Now we need to write our code, inside snake.js file, the first thing that we will do, is to select our canvas, and getContext('2d') of our canvas :

getContext('2d') method, has properties and methods that allow us to draw and DO different things on the canvas.

I will use box = 32 pixels, box here is like a unit, why? because our snake is a square, it's width and height both equal to 32px by default.

Also, we will have to move our snake in any direction, by one box at a time.

And the food position is given using our box unit.

PS : if your don't understand what I am talking about, watch the video below.  WATCH TUTORIAL

Now let's create some variables and constants :
To control our snake we will need to add an eventListener  to our document. WATCH TUTORIAL

direction here, is a function, whenever the player, press a key on the keyboard, it will fire up.

Remember, every key on the keyboard has a code :

the Left key code is : 37.
the Up key code is : 38.
the Right key code is : 39.
the Down key code is : 40.

Above before we move the snake to the right per example, we need to make sure, that our snake isn't going to the left, also before moving the snake to the bottom, we must first check if the snake isn't going to the top.

Now let's draw our snake and the food to the canvas.

We loop over the snake array, and draw every square. using the fillRect() method. and the same for the food.

Now let's talk about the logic behind moving the snake.

To move the snake, is simple, we get the head's position, let snakeX = snake[0].x; let snakeY = snake[0].y; , we remove the tail, we change snakeX and snakeY based on the direction, (left, right ... ), then we create a new head, in the new position.

before doing this, we need to check, if the snake didn't eat the food, cause if so, we don't need to remove the tail, we just add a new head.

The javascript code we look like this :

Now we need to check if there is no collision, the cases where there is a collision are : if the snake hits one of the walls, or if it hits itself. to check if the snake hits itself or not, we need to check if all the squares from the snake array (except the head), doesn't have the same coordinates as the head. We need now to add this code, inside our draw() function : one last thing to add inside our draw() function, is the code to draw the player's score. You can watch our tutorial about creating the snake game using JavaScript The tutorial has two parts:
1st part : we understand everything about the game, we discuss things before we code.
2nd part : Type in the Code.

Download the starter template from gitHub, so you can follow the tutorial step by step :

The Game files link : Code Explained Repo

Other Tutorials for games created using JavaScript :

Create the Tetris Game Using Javascript

Create the Flappy Bird Game Using Javascript



Code Explained: Create the Snake Game Using JavaScript
Create the Snake Game Using JavaScript
We will create the Snake game using JavaScript only, means no framework is been used during the tutorial, the tutorial has two parts: 1st part : we understand everything about the game, we discuss things before we code. 2nd part : Type in the Code.
Code Explained
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy