The image in the div #TheMovingDiv starts at a certain location, set by CSS and matched by the global variables originalx and originaly. TheMovingDiv moves using WASD keys.
The image in TheMovingDiv is set to be very small (only 10x10 pixels) in this example.
TheMovingDiv can't go:
- further left than an x of 0
- or further right than an x of 1010
- or higher than a y of 0
- or lower than a y of 720
...because 4 if statements prevent it.
TheMovingDiv position is counted from its top left corner.
If TheMovingDiv reaches the destination (a square location defined in JS using 2 nested if statements, shared here by a white square div for the sake of visualizing it) it triggers an alert of "You made it to the spot!"
Added a global variable alertdone to track whether the div has entered the area or not. When the page starts, alertdone is set to "no." Once it enters the area the first time, alertdone is set to "yes".
I've added another if statement inside the x and y nested if statements checking whether the div has reached the spot, and this new if statement checks for whether alertdone is "no" or not.
IF alertdone is "yes" the if statement does nothing, but if alertdone is "no", that means this is the first time the div has entered the area, so the "You made it to the spot" alert comes up, and then alertdone is set to "yes", in order to prevent the "You made it to the spot" alert coming up any more while the div is in the area.