DEV Community

Cover image for Making Snake Game With Javascript
Erhan Kılıç
Erhan Kılıç

Posted on

Making Snake Game With Javascript

This post was first published on Making Snake Game With Javascript

Ever since childhood I have always wondered how to make games and I wanted to make my own game one day. After spending so much time in the software industry, I asked myself why I should not do it anymore. Thus, I will improve my Javascript skill and I will also look at the software development process in a way that I have never looked at before.

Before I started coding the game, I began to think about how the algorithm of the snake's movement would be. Some of the first options that came to mind were; scan the entire playground in every move, to keep the coordinates of each cell of the snake on a array and update the old and new cells while moving. At the end, I understood that it was best to erase the last cell of the snake and attach a cell to the head.

First I created a snake object and I wrote the code that would create the playground. After creating the playground, I found a nice font for the game and added it. I wrote the algorithm that would make the snake move after I wrote a code that composes the snake and puts it into the playground.

When I wrote the snake's movement for the first time, it continued to move outside the playing field and could go back inside. For example, while the snake was moving upwards, if I pressed down, it was moving within itself.

First of all, if the snake came to the edge of the playing field, I wrote the codes that would allow it to continue from the other end. So, for example, if the snake reached the left edge, it would have entered the right edge.

After that, I wrote the codes that control the direction key that moves according to the direction the snake moves. So, for example, if I press down on the button while the snake is moving up, it doesn't do anything. After this I added the ability to start and stop the game.

At this point, I stopped taking care of for about a month or two. A lot of different thoughts and things got in.

Today the game came to mind again and I started again. Finally, I finished the game by adding the bait, the game score and the ability to manage game settings.

I enjoyed making this game very much and I am very excited to see the result. Only problem is if we press the arrow keys too fast, the snake starts to act ridiculous. I think this is caused by the frame rate of the game, but I have not figured it out yet.

My next goal is to write a tetris or a simpler than tetris.

You can play the game on here.

You can check the codes on here.

Top comments (3)

shan5742 profile image

Hey man this is awesome.somebody in a discord group I'm in recently built a snake game with a little twist which was cool.

I'd love to make a pacman game in js! Hopefully one say

karthiknedunchezhiyan profile image
Karthik Nedunchezhiyan

KarthikNedunchezhiyan/MultiLevel-Snake-Game you can use this link for reference, i have made snake game using js