Arcade Village Blog

Javascript is a prototype oriented language. What does that mean ?
I will rely on notions of object language to explain it. I remind you that you promised me to have the required prerequisites, so if I catch you making your eyes wide open, it is not worth reading on.

In an object-oriented language, the definition of objects, which we call a class, is first defined, then we create instances of these objects, that is to say variables on the model of this class.

In a prototype oriented language, we create a variable to which are attached properties (themselves variables) and methods (functions). This variable can be used as a prototype to create other variables with the same properties and methods. But unlike object language, this variable can be changed during the program. These modifications can be adding or modifying properties and methods.

In my programming, I will apply the methods of object oriented languages:
- The prototypes will be defined in a reserved javascript file bearing the name of the object.
- I will not allow myself to modify the prototype during the program. I will use the equivalent of derived classes. We will see this in the program examples.
Javascript is not a typed language. What to do ?
Second big problem with javascript: you can declare variables anywhere and assign them any value. This possibility is useful when you want to write scripts, which were the raison d'être of the language, but an inexhaustible source of errors and waste of time.
In my programming:
- I will define all the variables at the start of the function.
- I will attribute to the definition of the variables a value which will make it possible to know its type.

Example

function test()

{

  var i = 0; // int

  var s = '' ;  // String



  i = 1 ;

  s = 'salut'

}

Last point: Any line will be terminated with a semicolon.

"Okay, we're starting to get bored of your political program, if you switch to programming?" "
In two pages, I already know what's on your mind. We will therefore see our first object: CCGraphics.

CCGraphics

Since you are hungry, I show you the code directly. I comment on it after.

function CCGraphics(ictx)

{

 this.ctx = ictx;

} 



// Certains langage, comme javascript utilisent un begin path / end path



CCGraphics.prototype.beginPaint = function()

{

};



CCGraphics.prototype.endPaint = function()

{

};



CCGraphics.prototype.setColor = function(color)

{

 this.ctx.fillStyle = color;

 this.ctx.strokeStyle = color;

};



CCGraphics.prototype.clearRect = function(x,y,width,height)

{

 this.ctx.clearRect(x,y,width,height);

}



CCGraphics.prototype.drawRect = function(x,y,width,height)

{

 this.ctx.rect(x,y,width,height);

 this.ctx.stroke();

};



CCGraphics.prototype.drawCircle = function(x,y,rayon)

{

 this.ctx.arc(x,y,rayon,0,Math.PI*2,false);

};



CCGraphics.prototype.fillCircle = function(x,y,rayon)

{

 this.ctx.beginPath();

 this.ctx.arc(x,y,rayon,0,Math.PI*2,false);

 this.ctx.fill();

};



CCGraphics.prototype.fillRect = function(x,y,width,height)

{

 this.ctx.fillRect(x,y,width,height);

};



CCGraphics.prototype.clearRect = function(x,y,width,height)

{

 this.ctx.clearRect(x,y,width,height);

};





CCGraphics.prototype.drawLine = function(x1,y1,x2,y2)

{

 this.ctx.beginPath();

 this.ctx.moveTo(x1,y1);

 this.ctx.lineTo(x2,y2);

 this.ctx.stroke();

};





CCGraphics.prototype.drawImage = function(img, x, y )

{

 this.ctx.drawImage(img, x, y);

};



CCGraphics.prototype.drawImage = function(img, x, y, width, height )

{

 this.ctx.drawImage(image, x, y,width,height)

};



CCGraphics.prototype.drawImage = function(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)

{

 this.ctx.drawImage(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);

};





CCGraphics.prototype.setFont = function( font_family, font_size )

{

 this.ctx.font = font_family+' '+font_size+'px'

};



CCGraphics.prototype.drawString = function(str, x, y )

{

 this.ctx.strokeText(str, x, y);

};

Welcome to javascript!
From the first function, you understand that this language is disgusting. But I'll explain it to you.

function CCGraphics(ictx)

{

 this.ctx = ictx;

}

So it is a function. But it is also for javascript the way to define an object called CCGraphics. For us, this will be the constructor of the class. I let the javascript specialists explain the exact operation to you. I am not wasting your time and I am telling you:
" In Rome, do as the Romans !".
This is a quote from Ambrosius of Milan dating from the 4th century. She has proven herself.

So now we have an object called CCGraphics. We now need to create its methods. For that we will associate them with its prototype.

By the way, how do you create a variable with the same schema as CCGraphics? Like this:

var g = new CCGraphics(ctx) ;

Now, g has all the properties and methods of CCGraphics. Doesn't that remind you of object programming?
Just a little clarification. You are probably wondering what is this ctx parameter?
In most systems, there are graphical contexts. Basically, a graphics context is where you can draw and the primitives that will allow you to do so. It therefore seems appropriate to use this context for the portability of our class (come on, we are using class) CCGraphics.

The CCGraphics class currently only contains the functions I needed to make my Sokoban and a survival game I'm working on. It will be enriched for according to my needs.

I'll just explain a little function to you.

CCGraphics.prototype.fillRect = function(x,y,width,height)

{

 this.ctx.fillRect(x,y,width,height);

};

These lines define the fillRect method of the CCGraphics class. This method allows you to fill a rectangle. As you can see, it calls a javascript function with the same name. It's chance. In another language it could call another function. But we wouldn't have to modify our game code. Just the CCGraphics class code. You may also notice the presence of this.ctx. This is the famous graphical context that we copied into a variable when creating our class.

The CCGraphics class is in a file called cc_graphics.js. To be purist, I should have called this file CCGraphics.js.

Javascript knows the word class and proposes to create classes in the manner of object languages. But this notation is just a dress up of the mechanism we just saw and I thought it was important to use it first.

You probably noticed that I mentioned my Sokoban. At the end of this course, you will be able to do it again, pump it up on your site, and by dint of advertising it on social media, become a millionaire.