Rock, Paper, Scissors

An interactive Rock, Paper, Scissors game with buttery smooth animations and responsive design.

Key Learnings

1. Responsive Design and Advanced CSS Keyframe Animations

Throughout the development of the Rock, Paper, Scissors game, I worked on creating a responsive design for users. CSS keyframe animations, inspired by Josh Comeau's blog post, were central to this effort. This involved creating smooth and visually appealing animations such as floatUp, shake, and grow-and-shrink to enhance the user experience and make the game more engaging.

2. Event Handling and DOM Manipulation

Building on the first lesson fromWesBos's JavaScript30 program, I worked on incorporating event handling to add a UI in the Rock, Paper, Scissors game. This involved working with the DOM to update the user interface dynamically based on user interactions, manipulating HTML elements, and adding and removing classes.

3. Tooltips (brought up from Future Improvements April 11th, 2023)

I integrated TippyJS, a customizable tooltip library, to add enjoyable player education on top of the game buttons. It won't help playing the bot, but users of my RPS tool will soon be seen on ESPN Top 10 replays. I leveraged the quick-and-easy CDN links and got comfortable reading technical documentation for API calls. I won't tell you about the hours of reading I spent trying to make the tooltips from scratch with vanilla Javascript and CSS... Tooltip content source

How to Play

• Click on the rock, paper, or scissors icon to make your choice.
• The computer will randomly select a choice.
• The game will display the result (win, lose, or draw) and update the score accordingly.
• First to 5 points wins!

Potential Future Improvements

• Add a game settings menu to allow users to change game options, such as the number of rounds to play.
• Implement additional game variations, such as Rock Paper Scissors Lizard Spock.