Adding features to our bouncing balls demo

MDN Learn
1

See the Pen Practica Construcción de objetos by lTakisl (@ltakisl) on CodePen.

I know the code is fine but it wouldn’t give me the result, but I have a couple of questions:
Why do I have to add

/:point_right:/EvilCircle.prototype = Object.create (Shape.prototype);
EvilCircle.prototype.constructor = EvilCircle; / * :point_left: * /

below the constructor of the EvilCircle (),

and the same for the constructor of the Ball ()?

Because I do it, what am I doing or enabling with it? I’m really lost with those two lines under the two constructors.

2.- If I press the keys a s w d the evil circle does not move, why?

3.- 3-the collision Detect () down, although when I saw the finished code I understand it, it did not occur to me, I had to copy it, which I was very discouraged, I felt like I did not really know what I was doing.
The same for point three of the score counter.

Not because it was difficult, but the fact of working with canvas confuses me a lot. Since I have not the slightest idea of ​​this.

In short because I feel that I said little in everything I wrote if I had to write that code completely alone without help to make those animations with objects on canvas I would not know how to do it. And now I don’t know what to do, how to continue, whether to continue with the next program or what to read or reread or study before continuing and how.

2

Hello @Takis

EvilCircle.prototype = Object.create (Shape.prototype);
that to make sure that evilcircle is a subclass/subtype of the Shape

check this for more info about create Object.create() - JavaScript | MDN

EvilCircle.prototype.constructor = EvilCircle; this will set the constructor of the EvilCircle to be evilCircle

i did not read the full code but the things you need to do for any app

  1. write small part of the app then test it writing the whole thing then wonder why it does not work as it should be would not help

  2. since you already write it then comment some of it then check each part

you would need to study Object prototypes - Learn web development | MDN

and it will make you remmber some stuff

do not worry that you sometime need to reread lesson it happen as long as you know where to find the issue then you fine
no one memorize everything as there huge api and attribute and value there only knowing how to search and find it would help

3

a query that came to mind if you wrote the code in ES.
How are prototypes added to the constructor?
in the same way ?

and the following question, using ES it is necessary to use
EvilCircle.prototype = Object.create (Shape.prototype);
EvilCircle.prototype.constructor = EvilCircle;
?
PS: I already read and I understood well what these two lines are for.
the first one creates the prototype shape as a prototype of evilcircle so that it inherits all the shape’s methods and the other line is so that it returns the evilcircle constructor function and not the shape constructor function.

But in ES I am not very clear or I did not see where he was talking about the prototypes.
And one last question.
What is the best way to use objects, the normal one? or that of ES?

4

i do not understand what you mean here

using es you can use
let variable = new EvilCIrcle(provide the pramters to the constructors);
is you used the es when you defined EvilCircle you would not need this EvilCircle.prototype.constructor = EvilCircle; despite it would still valid if you use it

for me if you going to write es then stick with it for the whole file/project and if you use the prototype then stick with it mixing both of them will confuse you and confuse the person who read it

check this one https://www.toptal.com/javascript/es6-class-chaos-keeps-js-developer-up

try to solve it with only prototype way then solve it again with es way to get practice about each one as in real life you would see the code based on both way

5

of course for example: in prototype mode when I have to add a method outside the constructor to the constructor function x () I do it like this:
x.prototype.nameFunction = function () {something};
If I instead of writing my code in prototype mode, I would write it in ES mode, what, what or how would the equivalent of that be in ES?

6

you can do it in 3 ways

  1. same as in prototype way
  2. modifiy the class x and add the functions you like
  3. extend the class x and add this method to it

not sure if there other way

1 Like