Objects - Object building practice

Could someone assess this code please? And tell me how it could be improved.

When I got to the section “Adding collision detection” in the
“Object building practice” of the module “objects”, see link below.

Right before the explanation of “Adding collision detection” it says: “This method is a little complex,
so don’t worry if you don’t understand exactly how it works for now.”
This paragraph got me curious, so I wanted to fully understand it, which I did,
by the way it took me about a day to understand it.

Then, I decided to write a version of the bouncing balls with only one ball (a star) and the EvilCircle (a black hole) which is pulling the star to eventually eat it. As the star approches the black hole, the horizontal distance (dx), the vertical distance (dy) and the distance from the star to the black hole gets updated along with a triangle formed by dx and dy to calculate the third side (hypotenuse) based on the pythagorean theorem.

Also, I added two buttons:
The “Start” button, which basically does a page refresh
And the “Pause/Continue” toggle button to stop the animation and
give the user an opportunity to manually calculate the distance of
the star from the black hole using the current (dx, dy) dimensions and the pythagorean theorem.

The reason in doing it is to practice what I have learned so far, and to help others to understand faster… I hope, how collision detection is calculated, by seeing it graphically.

I truly hope that it can benefit other beginners and avoid spending a long day like me to figure it out,
also hope that I’m explaining myself.

For some reason, the code runs ok in the browser but in codepen the buttons
don’t work and it runs so weird.

I’d like help to make it run in Codepen as it does in the browser.

Codepen link: https://codepen.io/estalta/pen/OJzvdLK

Thanks in advance,

Hello @estalta

you doing great well done and thanks for trying to help people i just did simple trick i clicked on the little arrow on the right side on the js panel in code pen then choose analayis js and it found 2 error

  1. this ctx.closePath; should be ctx.closePath();

  2. this location.reload; should be location.reload();
    and it will not work why cause of the result panel is and iframe and the iframe can not ask to reload the page that it contained with
    read this
    https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

i did not read the code to check if there something else or not

so maybe you used other method that has some restriction same as location.reload

hope that help and have a nice day :slight_smile:

1 Like

@justsomeone, thank you so much for the time to assess my code, I didn’t know I could use a tool at codepen to find errors, thanks for the tip :slight_smile:
Have a great weekend!
esteban

2 Likes

you very welcome and it better to use an ide or text editor like one of those in this link

to help you find error more easily and make your coding faster

and thanks a lot and you too :slight_smile:

1 Like

Yes, I use vs code, but codepen not much. I wanted to fine tune it in codepen so others could take a pick at it in action.
Anyway, thank you very much!

2 Likes