How to track the time of the collision?

There are two animated block. They can be animated as using setInterval()and using requestAnimationFrame().

You want to monitor the traffic and display the message using alert(). Need to withdraw it once.

But if you insert the condition in setInterval() or requestAnimationFrame(), at collision the message will be displayed until one unit is not out of range of the other. The condition is used instead of == inequality is >= or <=.

How to make so that the message is displayed only 1 time?
March 23rd 20 at 19:19
3 answers
March 23rd 20 at 19:21
You want to monitor the change of state of a collision in the previous step.

Remember somewhere the "current" state
var isCollided = false; // initially no collision
At each iteration, whether via setInterval() or requestAnimationFrame() – check whether there is a collision now. And compare with the previous one.
const isNowCollided = checkIfCollided(); // somehow check if there are any overlay
if (isNowCollided && !isCollided) { // first encounter!
 // alert! alert!
} else if (!isNowCollided && isCollided) { // left the zone
 // all interested
} else {
 // without news

isCollided = isNowCollided;
March 23rd 20 at 19:23
Too little input for the relevant response, and suggest there is little that you need to solve the problem.
Here, for example, described the conflict in js
March 23rd 20 at 19:25
Here's a great introductory article with the details:

If it's too difficult and confusing to choose ready 2D engine.

Find more questions by tags JavaScript