Building a 2D racing Game using Angular

A few weeks ago I published an article on Building a Real-time Tic-Tac-Toe game using angular, creating that game with Angular has been a delight. So It got me thinking that how about writing a Canvas game using Angular and therefore I created a small Racing game in Angular. As the Page title propounds, we will implement 2D racing Game using Angular in this article. Personally, for me it was fun to implement this game, I hope you will also find it interesting.

Before implementing anything, I assume that you have a prior knowledge of Javascript, Angular and Angular CLI. If are new to Angular browse all the Angular courses, we have some of the coolest articles in Angular. Okay now let’s get to work, first, we will start with the Angular Project setup.

Thanks to Sujit Yadav for providing beautiful vehicle sprite image. If you are Game developer make sure you check out his blog.





1. Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

2. Directory structure and Project overview

Let’s create Project directories and files required to run the application. The below-shown image is replicating the directory structure and files created in this application.

Inside the /app folder, we have three folders named as /config/interfaces, and /services rest the files generated by the Angular CLI.

=>Inside  /config  folder, we will create a  /config.js file which will hold all the static values.

=>Folder /interfaces need no introduction.

=> Inside the folder /services, we will create two files app.service.ts and game.service.ts. Each of the files will do individual work in building the racing game using angular is listed below,

  • app.service.ts: Here we will initialize the game and we will control the user input.
  • game.service.ts: This file will take care of all canvas related operation and renders the Game on the webpage.

Building a 2D racing Game using folder architecture

3. Building Racing Game using Angular

Till now we have created all the files and did the project setup, now let’s get to the development. Here we will divide the development of this game into different parts, which are listed below. Each part will cover the unique concepts in building Racing Game using Angular.

  1. Game assets and Game background.
  2. Loading assets and Creating Game background.
  3. Creating obstacles and Moving them onto the Racetrack.
  4. Creating the player and Rendering it to the Canvas.
  5. Handling the User input.
  6. Detecting the Crash with obstacles.

4. Game assets and Game background

Now it’s very important that before the user starts playing your game, the game should load it’s assets such images audio and font so on.

=> In our game, we will need a simple sprite which will have all the Game objects a shown below.

=> As you can see in the below image we have different cars and trucks, which we will render on our screen.

=> To render these vehicles we will use the drawImage() function of canvas programming. If you are not familiar with please make sure you check it.

Building a 2D racing Game using Angular sprites

=> Also, in order to render these vehicles by using the drawImage() function, we must the know the sX and sY of each vehicle along with the height and width of it.

=> So I have already created a configuration file, where we will store all our predefined values. This file lives in the /config folder, create a config.ts and write down the below code,


5. Loading assets and Creating Game background

Now to load it we will write some code, to start with open the app.component.html and write down below code,


As you can see in above we have written the two Blocks of markup. The first block is Loader div basically this markup will render the overlay loading screen till the Image is getting loaded. Then in the second block, we have canvas tag itself.

=> By convention, We will write all our Javascript/Typescript Logic inside services, but to trigger that we have to tell them, that you are ready to ready to download game assets.

=> So in order to this, we will use our component class as always, and we will call our services.

=> Open the app.compoent.ts and write down the below code,



  1. In the above code, we have used Event emitter to get updates from the AppService class.
  2. The first thing we are doing is, calling the createPlayGround() method. This method will basically download all the Game assets and emit the event that “I have downloaded all the required assets.
  3. Then in the next Line, we have the Subscriber to that event which will hide the Loader screen and starts the game by calling Game service.

Inside the AppService class, will do all the loading stuff, So open the app.service.ts and write down the below code.

=> Now if you see, inside the AppService class, we are a calling another method to the GameService class.

=> This because I wanted to keep the Game Assets loading and Other game related method/function in one class.

=> We will write more code into this file when we will add controls to play the game.



  1. In the above code, we have used Event emitter to send updates.
  2. Inside the createPlayGround() method, we are calling the loadAssets() method where we will load our Image.
  3. The loadAssets() method expect one parameter i.e. instance of Canvas Element.
  4. Once the Promise completes, the createPlayGround() method calls the emit() method.

Now the last piece of the puzzle is GameService class, where we will finally load the Image. Open the game.service.ts and write down the below code,



  1. In the above code, we have three important things to pay attention.
  2. First Inside the loadAssets() method, we are setting up the height and width of Canvas Element.
  3. Then we are returning the Promise, which basically Loads the Game Sprite.
  4. And on the next line we have startGameLoop() method , which will start the Game Loop.

5. Creating obstacles and Moving them onto the Racetrack

Now let’s start implementing the fun part. So in bird’s eye view, we will create obstacles and we will move them vertically on the Racetrack. Whenever a player collides with any vehicle(obstacle) the game will be over, that’s all.

=> We have already prepared an array of vehicles. We will fetch the random vehicles from that array and we will render them.

=> We will write the code to create and move obstacles inside the game.service.ts. Open the game.service.ts and add the below code.



In the above code, the first thing to notice is that we have written few method calls inside the startGameLoop() method. Each method will do it’s unique work so let’s understand each of them one by one.

  1. suffleProperties() method, will do just one job here and i.e. to increment the request animation frame.
  2. The cleanGround() method will basically erase everything from the canvas.
  3. createObstacles() method will call the getSingleObstacle() method according to the animation frame.
  4. getSingleObstacle(), we will push the vehicles inside the obstacle array. Each vehicle will be fetched from the config array randomly having random X and Y coordinate along with the height and width.
  5. These vehicle objects have the update property which is nothing but a function that will then render the vehicle on the canvas.
  6. moveObstacles() method, we will increment the position of the vehicle by adding some value to Y coordinate of the vehicle.

6. Creating the player and Rendering it to the Canvas

Now at this point, if you run the code, you will see vehicles flying all around the canvas. If not troubleshoot your code by comparing it with the source code, then your code should work.

=> As you already aware of that, We have already defined the player’s vehicle object inside the config.ts file.

=>To render player on the screen we have just use drawImage() function and that’s all.

=> So let’s start, Open the game.service.ts add the below line, the PlayerPosition is basically an interface for the payer object.


=> Now add the below object inside GameService class as a property. We will render the player by using this object. Whenever user will interact with we will change the properties of the player object.

=> While rendering the player we use will this player property and it’s X and Y coordinate.


=> Now it’s actually time to render the player on the canvas, by using drawImage() function, add the below method in your GameService class.

=> The below method will be called from the startGameLoop() method which will basically render the player’s vehicle on the canvas.


7. Handling the User input

Handling use input might feel little complicated to you, but it doesn’t have to be. Here we will keep our component clean and we will write all the things in the services class.

=> Here we will user HostListener Decorator, This decorator will tell us whenever the user presses a key. Open the app.component.ts and add the below code,


=> As you can see above we are using the AppService class by calling movePlayer() method. So we will add the movePlayer() method in our AppService class.

=> In this Method, we will basically assign boolean values to the properties defined inside GameServiec class.


=> As I said, a piece of cake isn’t it. Inside the GameService class, we will use these properties to move the positions of the players. The idea here is to use these variables inside the if else loop and based on that we would move the player’s vehicle.

=> In the code, you can see we have done calculations and then we have used CONFIG.playerCarSpeed property to move the vehicle in respected direction.

=> Open the game.service.ts and modify the createPlayer() method as shown below,


8. Detecting the Crash with obstacles

Now the last piece of the puzzle is crash detection, and it’s the final part of the application. Here we will check that the position of player’s vehicle collide with any obstacle or not, if it does we will stop the game and notify the user.

=> To determine the collision we will check  X and Y coordinate of the player’s vehicle along with the height and width. Open the game.service.ts file and add the below code,

game.service.ts :


  1. In the above code, we first pull out the vehicle’s and each obstacle’s X and Y position including height and width.
  2. After calculating the points we basically add compare them with the obstacle’s position.
  3. And for the sake of clarity and understanding, we will store these position into a different variable and then we will use them for comparison.

Do let me know if you have any query in this section.


That was the end of this article, in this article we learned how to interact with Canvas using Angular. Let’s take a cursory glance what we accomplished in this article, First We understood how to interact with Canvas using Angular. Second, we created a game using Angular along with the collision detection. The last thing is that we used the HostListener Decorator to move the player’s vehicle.

So for now that’s it, I’ll see you in my next article if you like this article do consider sharing with others. Also, you find any issue you can report it on GitHub.