Brief description of the project
I did this project in 2020. This is an educational project. I did it to improve my knowledge of canvas technology and to practice object-oriented programming (OOP).
I read the book "JavaScript for Children". At the end of the book, it was proposed to write the familiar snake game to everyone. Step by step I was told what to do and I got to work.
Deployment: https://andrea-konova.github.io/snakeJS/
Task: what needs to be done
The logic of the game was as follows: first, it was necessary to set up the playing field, set the game score to zero, draw a snake and an apple. Then, after the same period of time, clear the playing field and move the snake in the current direction. After that, check whether the snake collided with the frame of the playing field or with itself, whether the snake ate an apple. And depending on the condition, either finish the game or increase the length of the snake and place a new apple on the playing field. Also, when the player presses a key, it was necessary to check what kind of key it was. And if it's an arrow key, then update the direction of the snake.
Process and details
The basis of the game is the Block constructor, which creates objects that are separate cells of the invisible grid of the playing field. Each cell object has col and row properties that define the position of the cell. The Block constructor has several methods: drawSquare - draws a square, drawCircle - draws a circle, and the equal method checks if the square and the circle are in the same position.
The hardest part was writing the code for the snake itself. Since the snake had to have different methods: drawing, moving, checking for a collision with an obstacle and changing the direction of movement.
Next, the Apple constructor was created, with methods for drawing and choosing a random position for the apple.
After the game started working, I began to make my edits to the project.
Initially, the snake was monotonous blue. I added a condition where the head of the snake turns dark blue, and the rest of the segments alternate between turquoise and feather.
Initially, the snake was monotonous blue. I added a condition where the head of the snake turns dark blue, and the rest of the segments alternate between turquoise and feather.
Later I replaced these colors with others, but the method remained the same.
After that, there was a refinement of the speed of the game. To do this, the game is launched not with the help of an interval, but with the help of a timeout and a variable responsible for the speed of the snake.
For each apple eaten, the game speed decreases by 5 milliseconds and stops for 15 milliseconds when it becomes almost impossible to play.
I styled the game a bit more by adding a start button to start the game and restart. Also used an interesting font called "Press Start 2P" - a bitmap font based on font designs from 1980s arcade games.
In the final version of the game, I added the ability to save the maximum score to local storage. To do this, the maximum account value is selected and written to localStorage, and then displayed on the screen as the maximum account.
