Create the Snake Game Using JavaScript

DOWNLOAD: SNAKE GAME WITH JAVASCRIPT - SOURCE CODE


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