Rock Paper countdown

Hi everyone! :slight_smile:

I’m making my own Rock Paper Scissors game, (clone from Jennifer Dewalt’s site) and I’m stuck with the countdown. I got the animations to work, restarting the animation (which took me a day or two) and now I have to change the text in the middle with a countdown from 3 to 0 and then show the result of the draw.

I got the click event going on nice, but it seems that the countdown starts AFTER the CSS animation is completed. Is there a way for the countdown to start while the animation is running?

I leave you the codepen link: https://codepen.io/ezequiel_/pen/qBWeZva

What if you made the animation simply do the down-up thing ONCE? Then, create a function that simply runs that animation and decrements the counter, updating the display - and call that each interval.

1 Like

You could use setTimeout() to prevent the animation from executing immediately. And then adjust the animation duration and the % locations to match the countdown.

1 Like

Hey! @snowmonkey @eoja thanks for your insight.
I’m getting closer…
take a look at the updated project. At least now the hands are moving together with the countdown.
https://codepen.io/ezequiel_/pen/qBWeZva

2 Likes

Looks great! Keep up the good work. :grin:

1 Like

Looks like you’ve made a lot of progress :+1:

1 Like

https://codepen.io/ezequiel_/pen/qBWeZva

it’s done!

thanks for your help!

My tip for anyone who is starting out, is to write everything that the program should do, step by step, in common english. Then make functions that take care of each small part.

1 Like