Is it wrong to objectify people?

Right now, our player’s x and y coordinates are stored in two separate variables; player1x and player1y. It would be much better, however, if we could put all the variables relating to the player into a single container. This is possible in JavaScript, and such containers are called “objects.”

Think of an object as a variable which, instead of holding a single value, contains a number of variables and functions. Variables contained inside an object are called “properties,” while functions contained inside objects are called “methods.” You already know this – you used the “rect” method of the “c” object to draw the player in the last lesson.

Why bother with objects?

Putting things in objects keeps them logically ordered, saves you time, and gives you flexibility. Imagine you have 100 bad guys on the screen. You’d need to create so many variables – badGuy1x, badGuy1y, badGuy2x, badGuy2y…. badGuy100x, badGuy100y. And that’s just coordinates! You’d also need health, type, weapons, ammo, speed, etc. It would take forever. And what if you didn’t know how many baddies there would be? How would you know how many variables to define?

Objects get you around these problems. If we had a bad guy object, which had all these properties built in, we could just copy this object whenever we needed to put a new baddie on the screen.

So let’s make our player character into an object, and put the x and y properties inside it. replace the “var player1x” and “var player1y” lines with:

function Player () {
  this.x = 395;
  this.y = 295;
  this.w = 10;
  this.h = 10;
}
var Player1 = new Player();

The “this” bit indicates we’re using a function to create an object, by defining its properties. When we use a function to define an object like this, the function is called a “constructor.”

In the “var” line underneath, we “construct” a new variable called “Player1” which will be a “new” Player() object. In doing so, Player1 inherits all the values that the main Player constructor has.

If we want to refer to these properties in our program, we just use Player1.x, Player1.y and so on. Note that I’ve added height and width properties to our player also, so we need to update our rect line to reflect this:

c.rect(Player1.x, Player1.y, Player1.w, Player1.h);

Quick side note about objects in JS generally…

“In JavaScript, everything is an object.”

You’ll hear this from time to time as you learn about JS. Maybe you already have.

It’s not technically true, but in JS almost everything is an object. Need to know how wide the user’s browser is, or how far down they’ve scrolled? Check the window object. Have you ever used something like document.getElementById("my-element"); to do something to a particular element on your site? You’re using the document object.

Even the basic data types like strings and numbers (aka “primitives”) have properties that can be accessed in object-like ways. If x is a string, you can use x.length to find out how many characters it has. That even works with "Hello".length. However, primitives are not really objects. Why? Because you can’t add your own properties and methods to them, or modify the ones they already have. So we call these primitives “immutable” – they have properties you can access, but you can’t change these properties.

And back to our game…

So, this update hasn’t affected our game in any way. Everything still functions in the same way. However, our changes have streamlined our code for the things to come. Next, we’ll get interactive, and enable the user to move the player around the screen!