Rock Paper countdown

JavaScript
1

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

3

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
4

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
5

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
6

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

1 Like
7

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

1 Like
8

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