When the moving block makes contact with that block, it gets added to your block, and it will follow along right behind it.At any one time, there will also be another block somewhere inside the grid stationary by itself.

If it hits any of the edges, it's game over for you.When the game starts it moves in a single random direction, and it is your job to keep it within the grid boundaries by moving it up, down, left or right.

You start with a single block in the center of a grid.But the low-level logic is somewhat involved. Since all key input would be detected through the UserInterface class, I had to bind all the handler methods so they could be used through the Game class.The game sounds pretty simple overall from a high-level overview.

UserInterface, which would handle all i/o, which means the key input, the screen, and rendering anything to the screenīlessed uses 'boxes' to represent elements, so I had a gameBox to represent the entire game play area, scoreBox to represent a single line where the score would be set and updated, and gameOverBox to display a game over modal.Īll the pixels that would be drawn to the screen beyond that - in this case, the dot and each segment of snake - go through the draw() method, which is a 1px x 1px box.

Game, which would track the state of the snake, dot, and score.

I made extensive use of the ES6 JavaScript class keyword, and divided the game into two classes:

If the snake runs into the wall or itself, the game resets.

If the snake eats the dot, it grows and the score goes up by one.

There's a snake that can go up, down, left, or right.

I made the game as I remember it from the old Nokia bricks:

Java script snake