How do I ensure a bouncing object lands on a scrolling object on the ground (after “X” bounces) where "X" is known in advance?

Hi Corona Devs,

I have an interesting problem as part of a side scrolling game I’m developing.  I’ve tried to explain myself as concise and clear as possible.

Attached to this topic is the source code (Demo.zip which includes main.lua) that you can load up to see what I’m describing below.  Additionally, this is a link showing the demo in action on the simulator:

https://www.dropbox.com/s/zfg3crvoohrrhij/bouncingDemo.mov?dl=0

The attached code is for demonstration purposes only so it’s pretty rough and dirty.  

The following 5 points outline what I’m trying to achieve ( point 5 being the tricky part )

1. An ORANGE square moves onto the screen from the left (off screen) at different heights.

2. Depending on the height of the orange square, I set the background speed.  The higher the orange square on the screen, the faster the background image scrolls. This effect will give the orange square various projection speeds/looks.

3. After a very short period of time, the orange square starts to bounce (at a fixed x co-ordinate on the screen).  As the orange square continues to bounce and reduce in height accordingly, the scrolling background image will slow in relation and eventually stop (when the orange square can not bounce any more). 

4. While the orange square is bouncing however, I plan to introduce “good” GREEN squares.  The GREEN squares scroll in from the right off the screen along the ground.

I’m introducing the GREEN squares to aid in the projection of the ORANGE square, so that if the ORANGE square hits a GREEN square the effect will be additional projection (bouncing).

5. The orange square should bounce on a green square after “X” bounces (where “X” is defined in advance).  For example, after the orange square bounces 2 times, it MUST land on a green square on the 3rd bounce and increase in height again and resume bouncing.

The issue I’m facing is that the orange square doesn’t always land on a green square. That is, sometimes the orange square bounces before the green square or a little bit after.  Sometimes it lands on the green square as expected.  I add the green squares (off screen) after a certain number of frames and move them by changing it’s “X” co-ordinate every frame.

I know the reason why the orange square isn’t always landing on the green square.  It’s because the scrolling green square is being moved every frame while the orange square is performing it’s bounce using transitions and easing functions (to make it look realistic).  Frame-rates are not a one to one match to the transition times.

Are there other ways I can guarantee the orange square landing on a green square?  I could make the orange square bounce updating it’s “Y” co-ordinates every frame but the ‘bounce’ won’t look realistic I feel.  I could have the background and green squares move using transitions instead of every frame by moving their x co-ordinates but not sure this would work.

Again, if you have time, please load up the example demo file (Demo.zip) showing what I’ve described above.

Thanks for your time and reading this far.