09-28-2021 13:52 - edited 09-29-2021 05:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-28-2021 13:52 - edited 09-29-2021 05:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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>
Answered! Go to the Best Answer.

08-09-2022 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
And for checking more often than per second you won't do it in the tick,
but in a separate function.
setinterval(function () {
//your code
}, 500)
Would run all 500ms eG
Just make sure it only runs when needed.

08-09-2022 14:11 - edited 08-09-2022 14:11
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 14:11 - edited 08-09-2022 14:11
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
So @SunsetRunner would I do:
setinterval(function () {
console.log(groupName.groupTransform.translate.x) // x coord
console.log(groupName.groupTransform.translate.y) // y coord
// whatever is needed to be done with these values
}, 500)
And call that whenever the game isn't over?

08-09-2022 14:17 - edited 08-09-2022 14:22
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 14:17 - edited 08-09-2022 14:22
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Oh "groupName" means the id of your group.
In js you need to get the group by document.getElementById() instead of getting the images.
Place your images in the group at 0,0, so when the group moves to 200 the image will also be at 200.
And I don't know the logic if your game, but you definitely should run the setInterval only when the screen is on.
If it were in ontick, it would be stopped automatically, but outside it would run on....

08-09-2022 14:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


08-09-2022 14:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I'd probably use maths to calculate when the objects would touch, and set a timeout for then. It wouldn't be exact, but could be more accurate than periodic polling, and less CPU-intensive. If your animations are linear (ie, no easing), the maths should be fairly simple.
Gondwana Software

08-09-2022 14:25
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 14:25
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
How exactly would I go about doing so, @Gondwana? Also, the animations are supposed to have some easing, but it is not a necessity.

08-09-2022 14:28
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 14:28
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 14:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


08-09-2022 14:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Work out the maths to calculate when the objects would touch.
Code an event listener (touch/mouse) to detect when the animation starts.
In that event listener, code the maths and set a timeout to expire at the calculated time.
Gondwana Software

08-09-2022 14:30 - edited 08-10-2022 06:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 14:30 - edited 08-10-2022 06:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@SunsetRunner Ok, thanks for the clarification.
@SunsetRunner wrote:Oh "groupName" means the id of your group.
In js you need to get the group by document.getElementById() instead of getting the images.
Place your images in the group at 0,0, so when the group moves to 200 the image will also be at 200.

08-09-2022 19:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-09-2022 19:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks to everyone who helped me with this. I finally solved it using a modified version @SunsetRunner's code!

08-09-2022 19:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


08-09-2022 19:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@Sagrawal8 - I seem to recall the first time you use X y in your js it is not available from the gui, but once assigned in the js it is then available.
Author | ch, passion for improvement.

08-09-2022 22:07 - edited 08-09-2022 22:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-09-2022 22:07 - edited 08-09-2022 22:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Then you can only log the assigned value, but not the animated one.
I had tried that first when I played with that 🙂
08-10-2022 06:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 06:48
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 06:48
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@SunsetRunner Exactly, which is why I ended up scrapping the animation and just using move x/y coordinate commands.
@SunsetRunner wrote:Then you can only log the assigned value, but not the animated one.
I had tried that first when I played with that 🙂

08-10-2022 07:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-10-2022 07:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Did you now skip all SVG animation?
You don't use groupTransform after I found this nice workaround???
😭

08-10-2022 07:22 - edited 08-10-2022 07:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 07:22 - edited 08-10-2022 07:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks to the help of @SunsetRunner, this is my final code:
index.js:
import * as document from "document";
const image1 = document.getElementById("image1");
const image2 = document.getElementById("image2");
var image1Instance = document.getElementById("image1Instance");
var image1Group = image1Instance.getElementById("image1Group");
var image2Instance = document.getElementById("image2Instance");
var image2Group = image2Instance.getElementById("image2Group");
var gameOver = 0
image2Instance.animate("enable");
setInterval(function () {
if (gameOver === 0) {
let image1Coords = image1.getBBox();
let image2Coords = image2.getBBox();
if (image2Coords.x < 60 && image1Coords.y > 200) {
gameOver = 1;
}
}
if (gameOver === 1) {
console.log("Game Over!");
}
}, 250);
image1.addEventListener("click", (evt) => {
if (gameOver === 0) {
image1Group.groupTransform.translate.y = -30;
setTimeout(() => {
image1Group.groupTransform.translate.y = 30;
}, 700);
}
});
index.gui:
<defs>
<symbol id="image2HRef">
<g id="image2Group" >
<image id="image2" x="200" y="200" width="25%" height="25%" href="image2.png" pointer-events="visible" />
<animateTransform attributeType="translate" begin="enable" from="250,0" to="0,0" dur="1.5" repeatCount = "indefinite" />
</g>
</symbol>
</defs>
<svg width="100%" height="100%">
<use id="image2Instance" href="#image2HRef" width="100%" height="100%" />
</svg>
<defs>
<symbol id="image1HRef">
<g id="image1Group">
<image id="image1" x="20" y="200" width="25%" height="25%" href="image1.png" pointer-events="visible" />
</g>
</symbol>
</defs>
<svg width="100%" height="100%">
<use id="image1Instance" href="#image1HRef" width="100%" height="100%" />
</svg>
It appears that I have switched images 1 & 2 around from my original post ... Not sure how that happened!

08-10-2022 07:30 - edited 08-10-2022 07:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-10-2022 07:30 - edited 08-10-2022 07:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hmmm... I wonder why you're loading such a bunch of elements.
You could do all this only initialisizing the 2 groups and checking their coordinates (which would represent those of the contained image, if you set this to 0,0).
But you might have a reason to do it this way 🙂

08-10-2022 07:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 07:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Not all of it, @SunsetRunner. See the best answer for the code.
@SunsetRunner wrote:Did you now skip all SVG animation?
You don't use groupTransform after I found this nice workaround???

08-10-2022 07:33 - edited 08-10-2022 07:35
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
08-10-2022 07:33 - edited 08-10-2022 07:35
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Your code is the best answer for solving your issue? 😁

08-10-2022 07:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 07:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
You are probably right, @SunsetRunner, but having all those elements for each group is the way listed in the docs, which is why I said earlier that I used a modified version of your code.
@SunsetRunner wrote:Hmmm... I wonder why you're loading such a bunch of elements.
You could do all this only initialisizing the 2 groups and checking their coordinates (which would represent those of the contained image, if you set this to 0,0).
But you might have a reason to do it this way 🙂

08-10-2022 07:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-10-2022 07:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Yes, only because if someone in the future were to look at this thread, it would be easier to compile everyone's thoughts. If you think that one of your posts sums up everything, I will mark that as the best answer.
@SunsetRunner wrote:Your code is the best answer for solving your issue? 😁

