Appendix 4: Object oriented programming.

In programming it is called "object" to a group of properties and methods that define a behaviour. The group of defined features on which an object is created, is called "class".

Programming languages allow the creation of custom classes, in addition to those already defined by the language. To better understand this, we will create an example of a class for rectangle objects.

Javascript, unlike many other languages, doesn't has classes as it. But functions can be defined to act as classes, just like in the next code:

function Rectangle(x,y,width,height){
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
}

Through this function, we can now make rectangle objects, just like in the next example:

var rect1=new Rectangle(50,50,100,60);

This way, we have now made a rectangle object, to which we specify its properties x (50), y (50), width (100) and height (60).

Nevertheless, if by any mistake we make an object without all it's properties, the missing properties would get a null or undefined value, which could make problems later in our code. To prevent such problems, it is recommended to assign a default value in case such value is no specified:

this.x=(x==null)?0:x;

At this line, we assign to this.x one of two values. Through (x==null)? we check if it's value is null or undefined. If this is the case, we assign it the value before the colon (0), else, we assign it the value after the colon (x).

This default assignation is repeated for all the other values. I myself like to do something different with the height; in case it's value is null or undefined, instead of give it the value 0, I give it the same value as the width. This way, if I send only three values to the rectangle instead of 4, this will make a perfect square, whose width and height will be the third and last given value:

this.height=(height==null)?this.width:height;

See that it is assigned this.width and not width directly, because this way, we get the value after checking it the width was null or not. Otherwise, we could assign a null value to the height wrongly, in case the sent width was null too.

Before object oriented programming, each object property had to be store on an independent variable. Even if this doesn't seems like a big deal for one or two objects at the code, when you manage tens or hundreds of these, it becomes a hard task making these codes without the use of objects.

Another important property of the objects, is that these can have their own methods. For example, we will add this method to the Rectangle class, which will allow us to know when such rectangle is in intersection with another:

   this.intersects=function(rect){
        if(rect!=null){
            return(this.x<rect.x+rect.width&&
                this.x+this.width>rect.x&&
                this.y<rect.y+rect.height&&
                this.y+this.height>rect.y);
        }
    }

To call this method, we would do it this way:

   if(rect1.intersects(rect2)){
     
    }

Let's check the "intersects" function step by step. We start receiving a rect variable which would be a rectangle object. At the next line, we will check if the rectangle is not null, because if we don't send anything to the function, this would return an error. If the rectangle does exist, we compare the four points of both rectangles among themselves, to check if their content is intersecting at any moment, and we return the value of this comparing being true or false.

Another useful method for our rectangle, is for it to paint itself in our canvas. Until now, we specify manually the position, width and height of the rectangles when we paint them. Through this function, we must send him only the content where the rectangle will be painted, and this will paint itself where it's values are set, making it with a simpler instruction, and with less chances to fail on the giving the correct values:

    this.fill=function(ctx){
        if(ctx!=null){
            ctx.fillRect(this.x,this.y,this.width,this.height);
        }
    }

Using rectangles and other objects in the code of your games, will make easier many tasks you will need to do. With this, we end the basic explaining on object oriented program. To know more deeply about objects in JavaScript, you can do it on the next link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Final code:

function Rectangle(x,y,width,height){
    this.x=(x==null)?0:x;
    this.y=(y==null)?0:y;
    this.width=(width==null)?0:width;
    this.height=(height==null)?this.width:height;
 
    this.intersects=function(rect){
        if(rect!=null){
            return(this.x<rect.x+rect.width&&
                this.x+this.width>rect.x&&
                this.y<rect.y+rect.height&&
                this.y+this.height>rect.y);
        }
    }
 
    this.fill=function(ctx){
        if(ctx!=null){
            ctx.fillRect(this.x,this.y,this.width,this.height);
        }
    }
}