Simple Snake game in HTML and JavaScript

Snake is so simple everyone can do it. But in case you need inspiration, here is how.

Photo by Waldemar Brandt on Unsplash

Create an index.html file. And put the basic html stuff inside.

Now inside body, add a canvas element.

Javascript

After the canvas add script tag, this is where the JavaScript will be, that will handle the snake logic and rendering to the canvas.

Let’s first define what should happen when window.onload triggers. We want to get context of the canvas, we want an event listener for player key presses and we want that the canvas redraws itself of the new position of the snake and the apple every so often.

I want draw to trigger every 8 times per second. You can make it faster or slower, by changing the X value.

Input

Now we need to define the keyDownEvent function. Key codes represent the arrow keys, starting with the left arrow key and going clockwise.

nextX and nextY represent direction of the snake. Meaning if we go left, we want the Y to be the same, but the X should be 1 minus the current position of the snakes X.

Snake

Lets define the Snake variables so we have a better idea.

The default tail size will be 3. We start the tail size with the default value. Snake trail is the snakes body, it will be an array of X and Y positions. The snakeX and snakeY is the starting position of the snake.

Game world

The game world is where our snake and our apple lives. It’s defined as a 20x20 grid. So 20x20 = 400, which matches the canvas width & height.

Apple

For apple we just need to define an X and Y position.

Updating the game world (draw)

So every X times we call the function draw. It does a few things. First we need to move the snake to the next position.

But we also need to check if the snake is not out of bounds of the game world and reset the position so it looks like it comes out from the other side.

Now we check if in this next position, the snake bites the apple. If it does, we need to increase the tail size of the snake, and calculate a new X and Y position for the apple.

Painting time. First we need to redraw the background.

Now the snake. But while we draw the snake we must also check if the snake bite it’s own tail. Which would mean we need to reset tail back to the starting size.

Painting the apple is simple.

And at the end we check if the snake trail exceeds the tail size. If it does, we shift the last positions out of the trail.

That’s it. Thats a snake game. Code here: https://github.com/zprima/snake-js-game

developer

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