Little help with javascript / html programming

Hi!

I'm pretty new in javascript and also in HTML, so for my college assigment i have to do some agent modell simulation in Javascript language.

I manage to create object, add picture to the canvas and also create that those objects are moving. I also managed that object are turning into black if 'black object' in in touch with them.

But I want to be this as some sort of simulation of the real child game:
https://abcwellbeing.wordpress.com/2...the-black-man/

We choose a hunter x96 the Black man. He stands on one of the lines and the other pupils stand on the other line which is on the other side of the playground. All the players, including the Black man, can run only towards the other side of the playground. Theyx92re not allowed to return to the start line. If they do, they have to join the Black man and become his assistants.

Could anyone please help me to create that object would be moving just from one side to another and when they come to the other side stopped there?

Files (picture and html file) are on this link:

https://drive.google.com/drive/folde...qz?usp=sharing