Two Objects Not Registering That They Are Touching Each Other

[Sagrawal8]

I'm creating an app that checks if two objects are touching by looking at their x and y coordinates and seeing if they are within a certain range using if else statements. The code I have ensures that they will be inside the specified range unless the screen is clicked in time. However, the code below does not seem to register if the objects are with the specified range when they are not clicked in time.

In the index.js file:

import * as document from "document";

let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");

if (image1.x < 60 && image1.x > 20 && image2.y > 200) {
  console.log("touching"); 
  } else {
  console.log("not touching");
  }

In the index.gui file:

<image id="image2" x="20" y="200" width="25%" height="25%" href="image2.png" pointer-events="visible" >
  <animate attributeName="y" begin="mousedown" from="65%" to="45%" dur="1"/>
  <animate attributeName="y" begin="mousedown+1" from="45%" to="65%" dur="1"/>
</image>  
<image id="image1" x="200" y="200" width="25%" height="25%" href="image1.png" pointer-events="visible" >
   <animate attributeName="x" begin="load" from="95%" to="5%" dur="2" repeatCount = "indefinite"/>
</image>  

[SunsetRunner]

I'm not interested in discussing the quality of your code and its meaning for posperity. Even less in discussing nettiquette. 

It was a pleasure to help you to find the solution yourself! 🙂