How to create the Snake game for Angular.
Welcome again to the website 1938.com.es. In today's article we will explain how to create a game with Angular, more exactly the SNAKE game that we know very well and that surely many of us have played with our Nokia 3310. You will find the result of this tutorial at the following url https://1938.com.es/snake-angular and you can find the repository at https://github.com/al118345/snakeGame1938Web. In addition, I leave you the following explanatory video:
If you do not remember how it was played, it is very simple. In this game we must guide a snake along a box in which we must turn left, right, up and down with the objective of eating different foods. Every time the snake collected one of the small square pieces a higher score was obtained but, at the same time, the snake became longer and longer, taking up more of the screen and, therefore, making it more difficult to avoid biting ourselves or avoiding the borders.
Angular with CSS
For this project I have chosen to use a new project in Angular with CSS to define the different styles. Of course,
ng new snakeGame1938web --routing=true --style=css
Project base
Once created, we are going to define the basic structure of the game. It will consist of creating a simple board and also showing a score panel. With this objective we will delete the content of the app.component.html file and we are going to replace it with:
In addition, we add the corresponding styles necessary for the structure to take the correct form.
Now we will have to position the snake and its food. To do this we are going to need to define the logic of the game.
In addition, we have added the following files:
- game-engine/food.ts: This file contains all the logic related to drawing the food, its value and its random location.
- game-engine/snake.ts: Document in charge of representing the snake on the board and increasing its size every time it eats a new piece of food.
- game-engine/gameboard-grid.util.ts: Part of the code in charge of obtaining random coordinates of the board and of validating whether or not some coordinates are inside it.
- game-engine/input.ts: Function in charge of managing the interaction with the board.
With all of this we have already managed to draw the snake and the reward.
Game logic.
Now it is time to implement the code for keyboard management, snake movement and reward management. We will start with keyboard management.
There are two mechanisms, on the one hand, when we are on a computer, we will use keyboard management with the functions of the file game-engine/input.ts: which are:
For mobile phones, what we do is add a part of the code corresponding to some buttons that simulate a pad. To do this, we will add the following code to app.component.html:
Now it will be necessary to add the logic of the buttons for phones, that is, some actions that simulate the movement of pressing up, down, right and left. In addition, we will take the opportunity to add all the functions that are in charge of updating the board and repositioning the snake.
We add the following code to app.component.ts:
We add the following css code to obtain the view of a mobile phone:
Operation of the game.
To finish, we are going to add the operation of the game, that is, there will be some rules which will be:- The snake cannot eat itself.
- It cannot leave the board.
- Each reward obtained when eating an object increases the size and speed of the snake.
First we update the code in such a way that we update the view at the same time that we are advancing with the snake across the screen. Then, as main functions that we will add to app.component.ts we have:
- checkDeath: function to check if the snake has not crashed into the end of the board or has bitten itself.
- update: updates the drawing.