Snake Game with JavaScript. Part 2

This is part of the course “Snake Game with JavaScript”.

Image for post
Image for post
GitHub Repository and Deployed Game

In this series, we are building a Snake Game with JavaScript without any libraries. We are utilizing functional and immutable programming, learn canvas rendering, applications of vectors, and basics of game development. You can find the source code in this GitHub repository, and check out the game here.

In this part, we will implement immutable classes for vectors and segments, that will be used heavily for tasks like detecting collisions or specifying coordinates and directions. Let’s jump in!

Vector

You can find the use of vectors in almost every imaginable type of game, and it is very important to know how they can be applied and what are the most popular operations are. In our game, we won’t have a dedicated class for points, because vector will be sufficient both to specify the directions and coordinates. If you are not quite comfortable with vectors, I highly encourage you to check out my article where I show the basics with JavaScript examples.

Image for post
Image for post
using vectors to represent coordinates and directions

From the picture above, we can see that each coordinate where snake shakes represented by the vector. We also use a vector to show the direction of the snakes head. And here two important notices here. First, is that we always will represent directions as a vector with a length equal to one. By using this convention, we can move the snake head by adding its direction scaled by the distance. The second moment is that we will assume that Y is pointing down, it is easier to think this way because on the screen start of coordinates in the top left corner.

main.js

We call class immutable because all of its methods return new value without mutating its state(x and y). All methods except the last two are described in the article mentioned earlier.

We need the last method to check if two vectors equal by using the function from the previous part. If snake moves to the right and player press left button, we will detect if directions are the complete opposite, and will ignore the change of the movement.

Image for post
Image for post
a.isOposite(b)

Segment

Now let’s implement the Segment class that will be used to detect snake self-intersection and to check if some cell on the field is free to place food. The constructor of the Segment class receives two vectors as coordinates of its start and end.

main.js

To get the direction of the segment, we can subtract start from the end. We will represent snake as an array of vectors, and to get the direction of the snake, we can create a segment by passing to the constructor forehead as the end and head as the start. Then we can call getVector().normalize() and receive the direction.

Image for post
Image for post
segment.getVector()

One of the usages of isPointInside() is to check if snake collided with food. To do this, we will take the snake segment and check if the center of the food is inside of it.

Image for post
Image for post
segment.isPointInside(point)

Game is over when snake hits the border of the game or part of its tail. To check this second case, we will get the projection of the point onto the line of a segment and checking if the projected point is inside of snake segment.

Image for post
Image for post
segment.getProjectedPoint(point)

The last thing left is to implement a function that will receive snake represented as an array of vector and will return an array of snake segments.

main.js

In this part, we’ve implemented geometry classes that will be used for all kinds of operations later. The commit with these changes you can find here. In the next part, we will start implementing functions for state management. Stay tuned!

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

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