Element gets deactivated by another element...?

Using JavaScript with Hype
1

Hello everyone

Im currently starting to work with the javascript. Now Im stuck with a problem and would really appreciate your help.

In the following lines I’m describing my Situation:

On two Timelines there are two different functions working. On the Main-timeline are two different elements which are getting reseted to a specific time after a collision with the yellow element. And on the Timer Timeline is an element running which is also on Time and through a collision working on different scenes. The time gets every five seconds with a javascript controlled. Meanwhile the Timer is counting down the Clock with a blue element.

At the end it should be a game that puts the water level up or down which gets controlled on how many collisions you had during the game.

My question to you is now the following one:

When an element on the Main-Timeline gets touched, it deactivates the element gameWin on the timer timeline.
Is there a solution or a different way to do it?

I hope my question isn’t to complicated :slight_smile:
Thank you in advance for your reply and I’m apologizing for my English.

2

Can you elaborate a little bit? I’m not sure I followed the behavior you want vs. the behavior that exists.

Specifically, can you state the exact steps to go through to achieve a non-working state? And then what you actually want to happen? A screen capture using QuickTime Player’s ‘File > New Screen Recording’ might be useful too.

One item to mention is that elements don’t really exist on timelines – timelines can be thought of as more “streams of animations.”

3

Hi jonathan

Excuse me for this complicated description …
Best I start again from the beginning. The hype document currently has only the most necessary stuff.

The yellow square can currently be moved using the arrows on the keyboard. When there is a collision with the blue square, the time in the Timer goes backwards. However, this is not the case with the red square. How can I do this so that the red square also reacts when the yellow square is bigger?

And last, how can I move the yellow square down with the buttons? So that it can also be used on smartphones?

Game.hype.zip (34.8 KB)

Thank you for your support!

4

Well, the fun answer is “do the same thing that you’re doing for the blue square!” I’m not sure I can write the code for you, but I will point out that there is an error in the console that is logged on every move:

Error in undefined: TypeError: undefined is not an object (evaluating 'window.ArrayOfCoinElementsBounds.length')

This would be a good starting point to look at, because it could just be a bug in the code instead of a logic issue that is the problem. If you break on all exceptions in the javascript debugger (I am using safari’s developer tools), you’ll see that log corresponds to this line of code:

for(var i = 0; i < window.ArrayOfCoinElementsBounds.length; i++)

The global ArrayOfCoinElementsBounds is undefined at the time it is called.

2 Likes
5

I’m a bit confused right now and can not get any further … I have now removed this script:

Script
Script.png1016×514 54.9 KB

Everything works exactly the same, but it still gives me the error. In principle, this script flew into my pocket and I never touched it. It could be that it was copied from another hype document. Anyway, I would not have this in it.

Game_2.hype.zip (34.9 KB)

Thank you for your reply.

6

you removed the function , but not the functioncall.
if you do not need it you’ll have to remove any connection through all js in your file …

7

I have now removed the functioncall. Now there is no error message. Thanks for this input!
Game_3.hype.zip (34.5 KB)

Unfortunately, the red square still does not respond. Is it even solvable, or is not it?

8

I do still have the same problem. As long as the red element is smaller then the yellow the collision is not triggered and for my idea the red must be smaller then the yellow.
Can somebody help me on this.

Game_4.hype.zip (33.8 KB)

Second - the yellow element can be moved with the arrow keys, additionally I also like to give the user the option to move the yellow block with the buttons on the right?
Many thanks for the answer.

9

dear @Tim.R you’re collecting some code you’ve found here and there, mix it up and finally ask “hey, why does this not work for my usecase” … hmm, what can be a good advice¿ i would say: throw this document to the waste paper bin AND then make yourself a plan :slight_smile: what is your final aim, what’ll you need to achieve it. If your needs are clear: try to separate it to chunks you can work on. each solved chunk will take you further …

get your head around it! start learning js-coding. if you get stuck on a piece: ask a concrete question here! me and others will try the best to help further …

3 Likes
10

You are correct about that and yes, I’m new and try to work on Hype. The advice is good and a goal for the future (thank you) but at the moment I’m trying to finish a school project with this. I can’t throw it in the waste paper. So here the concrete question.

Why is the red element not triggering the collision as long as it is smaller then the yellow element, what do I have to change?

Thanks for help.

11

you are using this line of code to detect wether there is a collision between the yellow and a red element:

(hand.top >= el[i].top && hand.right <= el[i].right && hand.bottom <= el[i].bottom && hand.left >= el[i].left)

those conditions do not fit your needs if the yellow rectangle is bigger than the red …

///////////////////////////////////

But within your document-head you’ve got another function which checks wether a given point is within a polygon: checkPointForHit is its name.

In the Hypefunction called Figur you already make use of it when checking if the midpoint of the yellow rectangle is within one of the block-elements.

so why not use it again¿ sounds like a good approach.
But you’ll need some more checks to get accurate results in your use case.

todo for the hitcheck:

  • get the edgepoints and points of the midpoints of each side (eight points, this should be enough …)
  • use the also existing function getBounds to collect the points of the current red-element
  • then check each point if it is within the red-element: again use checkPointForHit to do so

you are quite near to a solution for this chunk :slight_smile: all you need is already within your document.

i did not test, but this should work!

2 Likes