Code a Space Invaders-like Game: Part 1 - Making the Player

Okay, so I've got to admit that I've been very busy recently and unfortunately that hadn't left me with enough time to produce content of the quality I would like for this site. However, now I have much more time and I will try to publish 2-3 articles a week on development projects and 2-3 video tutorials as well.

That being said, lets start this follow-along activity, coding a variant of the classic arcade game Space Invaders. This will be done using the p5.js javascript framework, which can be downloaded from: https://p5js.org/download/

Step 1: Creating the Canvas

This is done in the setup() function that opens automatically when you create a new project in p5.js. Using the built in createCanvas() function the width and height of the can defined in pixels. In the draw() function the background color is set to black using the following statement background(0).

Step 2: Creating the Player

Having created the area to place the elements of the game it is now time to draw the player that is controlled by the user's mouse. To do this a constructor function called Player() is created, with variable and functions within it that will be specifically for the player when the function is called.

When creating variables or functions within the constructor function the name of what is to be created must be prefixed with this. So if you wanted to create an x-location variable in the constructor function it would be called: this.x. To create a function within the constructor to, for example, draw the player, you would use the following:

this.movePlayer = function() {

code to move player inserted here

}

For the Player() you need to define as numerical variables an x and y-values for the player and the length and height of the player. As boolean, true/false variables an endgame and winGame variables are also defined here and set to false. These will be referred back to later in the code. Two functions are defined within the constructor: drawPlayer() and movePlayer().

drawPlayer() as the name suggests will draw the player in the canvas when called in the code. As this is an example we will create a white rectangle (fill(255)) to represent our player. Done using the inbuilt rect(x, y, length, height) function. These values to be passed into the rect function will be the variables defined at the start of the function.

movePlayer() will link the central x value of the player to the x-location of the mouse and allow the the player to move across the screen with mouse movements. The movement is conditional on the endgame variable and the winGame variable being false (ie. you haven't completed or lost the game). This is done through if statements. If either of these variables is true then the player will reset to the center of the screen and not move.

Finally in this section a global variable is created and the Player() function called within this in the setup() function. The update functions (draw and move) are called within the draw() function a p.drawPlayer() and p.movePlayer.