Setting Up the Project

Introduction

From this lesson onwards, we are going to build our second game, which is based on arrays and objects. Let's start by going over the things we'll need to build for the Virus fighter game:

1. We need a background image, an enemy image, a player character image, and a gem image.

2. We need to attach an event listener on the canvas so the player character (PC) moves in the horizontal direction when a particular event is triggered.

3. We need to write logic to move the enemy object vertically and bounce it back when it reaches the boundary of the canvas.

4. We also need to write a collision detection algorithm that will help us know when the PC hits an enemy and the game is over.

5. We need to write the logic to update the player's score when the PC hits the enemy (a game lost) or reaches the gem (a game won).

Let's begin with the first step, and create a function to load all the image objects required by our game.

Load the required image objects in the game

To do this, we will create a function and multiple Image objects, and then set the path of the corresponding images. Later on, we will use these Image objects to plot the images on the canvas. We will define all the objects as global so that they can be used anywhere in the code. Let's look at the code: