How to make items move randomly?

Question

JavaScript

Good afternoon!
There is a code - by double clicking on the picture, it starts moving forward in a straight line and, reaching the end of the screen, it "bounces" from the edge of the screen and moves back along the same straight line.
Tell. please, how to improve the code so that after reaching the end of the screen, the picture moves along a random trajectory, and not along the same one, and "jumps" around the screen endlessly bounce off different edges until you click on the "stop" button (it is already in my code and it works).
My code: https://plnkr.co/edit/QN8U6EBNUbeTvhYAP1J4?p=catalogue

Answer 1

In this case, the trajectory is determined by the values ​​that elem.style.top and elem.style.left increase uniformly every, say, 50ms. The first step you need is to add a parallel change to top to the left linear change, and generate the values ​​by which they should increase randomly. Here is an example: https://jsfiddle.net/1r6s7gq2. Then register the function of generating the trajectory to all the right places. And here it is important that some trajectories should be cut off at different screen borders. For example, when colliding with the bottom border, the element should not be able to set a path that will take it further down. Technically, to do this, you will have to check which border the collision occurred with, and based on this information, write the corresponding gaps in Vx and Vy (example: after a collision with the lower border of Vx, there can only be getRandomBetween(-5, 0), after a collision with the upper - only getRandomBetween(0, 5)). It doesn’t hurt to take into account that if you set intervals with zero, Vx and Vy can simultaneously turn out to be at a speed less than 0.01 and the like, which will be very slow.