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 inOrOut to track whether div is inside or outside the area, and to trigger alerts to tell you when you enter or leave the area.