JavaScript Snake Game Tutorial

play javascript snake gameIn this tutorial, you will learn how to make classic javascript snake game using HTML, CSS and vanilla JavaScript.

Everyone remembers that retro game. It’s quite easy and cool.

And first of all, I want to show you the result. I uploaded it to my site.

In this tutorial, I will not show you all pieces of javascript snake code. Only the most important parts.

You can find the full source code on the GitHub.

How Complicated to Write JavaScript Snake Game?

Do you think it’s complicated? Nope. Absolutely! I spent just 4 hours to do that.

I’m not professional javascript developer. I searched in google many times…

Read my guide, clone javascript snake source code and you will write it for 1 hour.

Let’s begin…

Preparation

We need 3 files:

  • index.html
  • snake.css
  • snake.js

snake.css and snake.js keep empty for a moment.

index.html includes references to these files and div container for our board.

Create a Board

I want to specify the number of columns and rows for my board, so I created a Board with a render method.

The logic is simple.

We are iterating though rowsCount and colsCount and creating HTML table and add it to the DOM inside of the container.

Let’s take a look that we’re generating unique ids for each cell. We need to convenient and fast way to access it.

And we need to add some styles:

Add Snake and Fruit to the Board

At the start point, snake and fruit is an only one cell with a different style.

So the only 3 things we have to do here:

Select snake start point, select an empty cell for a fruit and add styles for it.

I’ve created a Snake. I want to store an information about all cells, head, and tail and move it on the board.

And some styles.

Make Snake Moving

The trick is simple – you should change cells styling in the interval.

Each cell has a direction. So we know what is the next cell.

So what’s necessary:

  • We have to take each snake cell and move it (remove a CSS class from current cell and add it to the next one) according to its direction.
  • We should determine if the next cell is a fruit and if yes (snake should grow up).
  • We should determine that snake is out of the board (the game is over).
  • We should determine if snakehead has a collision with one of other snake elements (the game is over).

Now it’s working at least on the desktop.

Mobile Devices Support

Diego Pascual Formoso was so kind and added mobile device support.

He said:

Only took me five minutes, but hopefully it works like a charm

So the first step is to add hammer library to the bottom of index.html:

and add a listener for swipe event and handle it in the same way as keydown event:

That’s it!

Conclusion

My JavaScript Snake is working on Chrome browser. I’m a lazy man and I didn’t perform testing under other browsers.

The main goal was to show you main steps how to do write your own snake.

If you find bugs, want to improve, refactor somehow my code – PRs are always welcome.

If you don’t understand something – ask me.

Preview

GitHub

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Scroll Up