Writing Rock, Paper, Scissors in Plain JavaScript to Expose my Daughter to Development
I recently endeavored on an educational software development experiment with my then 4 year old daughter Evelyn.
I started this effort with a few goals in mind:
- Write a simple game that ran fully in the web browser using JavaScript without any frameworks or dependencies
- Teach my young daughter Evelyn a bit about software development and empower her with the ability to provide creative input for a real program!
- Make the game so simple it could be played in a blog post
In my company's daily work we run into quite a bit of hard to maintain JavaScript with lots of dependencies. With this project, I specifically wanted to avoid any frameworks that added undue complexity. What could I do with just the most minimum CSS and JavaScript.
Evelyn acted as my stakeholder/customer. I would write some code and then we would look at the result together. Then she would provide feedback. Evelyn quickly pointed out that the game needed pictures. 'Where are the pictures, Daddy?' she asked. I realized she was right! We needed visuals. To keep things simple, we explored the Character Map together, discovering a whole world of emojis. We carefully selected the perfect rock, paper, and scissors emojis, adding a fun and playful touch to the game.
The source for the game is available publicly on GitHub at @rietta/rock-paper-scissors-tournament. And you may play in below on this very page!
Rock, Paper, Scissors Heat!
To begin, press the purple "New Game" button in the Player's Choice box.
Then make you selections and press the Shoot! button. Good luck!
Player
✂️scissors
Computer
📃paper
Match | Player | Computer |
---|---|---|
1 | 1 | 0 |
2 | 0 | 0 |
3 | 1 | 0 |
Tot | 2 | 0 |
This game is brought to you with pure JavaScript and CSS without any frameworks. Enjoy!