Cycling Element
Select an element from an array with the catch being: it must keep changing to the next one!
A trending design pattern you may have noticed even on my homepage, is to have some of the copy in a "Hero" section keep changing. You may see mine live in all its crisp, bandwidth-friendly and full-copy glory, but here’s a compressed gif example:
How would we recreate this? Are we limited to text, or can we cycle through anything? Numbers, components, even functions?
We will explore with this challenge, by making a game!
Following the link will get you more context, interactive React elements and ways to start tackling the challenge on your own. But if you’re only interested in the spec, I’ve got you covered right below.
Spec
Let’s make a game!
You are meant to progress through the list items step by step. Completing all of MVP leaves you with something usable you can deploy and show.
Making it through all stretch goals leaves you with something fun to message your friends to try out!
MVP
1. Create a prominent header which cycles between the following text:
“The best game for developers”
“The best game for nerds”
“The best game for training your twitch reflex”
“The best game for hand-eye coordination”
“The best game for you”
2. Create a button with copy alternating between “hit to win” / “hit to lose”
3. Clicking the button while it includes “win” adds 1 to your score
4. Display said score prominently above the button, below the header
5. Clicking the button while it includes “lose” subtracts 5 from your score
Stretch Goals
1. Have the changed part of the copy in the header “animate in”
2. Game alternates between three “buttons” that have no copy: They just look different. For example: “green circle”, “grey circle”, “red circle”, but feel free to be creative, maybe use sprites!
3. Endless mode:
hitting the “green circle” adds one point
hitting a “grey circle” removes two points
hitting a “red circle” results in “Game Over”
The “Game Over” screen shows the high-score even more prominently
“Game Over” screen has a button to restart the game
Not clicking “green circle” before it changes removes one point
4. High-score mode:
“Game Over” screen as above, after we’ve gone through 30 buttons
Users can choose between “short” / “medium” / “long” sessions
5. “Random” modes:
instead of predictably alternating between the buttons, vary the order in which they appear
Keep the ratios the same: if a “long” High-Score session is going to show 300 buttons it has to be 100 “green”, 100 “grey”, 100 “red” buttons
That’s about it! I’ll point to the dedicated page again, which also links to a solution-in-progress and the Twitch stream where you may watch me tackle this challenge live!
Thanks for reading, have a beautiful day,
Johnny