Project 4: responsive RPS website using Vanilla JS & DOM manipulation.

Solution retrospective
Hello everyone! my 4th challenge is solved.
I made this Rock Paper Scissors (RPS) game using only Vanilla Javascript. I have made multiple rock paper scissors games on different coding languages in the past so I was pretty confident on this one. The only complicated part is the switching from the game screen where I have 3 circles for the choices and the results screen where I have 2 circles whose elements will depend on the choices of the user and the computer. I utilized switching display: flex into none and vice versa a lot.
The logic is fairly simple so most of the difficulties I faced for this one are knowledge checks which are:
- Figuring out how to not instantly show the computer's choice. I found that the setTimeout() function was very useful here and I utilized it to delay displaying the computer's answer as well as delay the showing of the play again button and the added box shadows to the circle
- Creating new circles on the results screen. I didn't know how to make completely new divs out of scratch and then style them in javascript. There is possibly a way to do so, but I thought to myself that that solution is tedious and instead I opted to just move all the child elements from the circles on the game screen to the circles at the results screen. This is the bulk of the difficulty of this project and I solved it by, well, searching google. I created a function that moves all children elements to a different parent.
- If there was a tie, I cannot move the children elements of the rock circle twice as the children would no longer exist the second time. I managed to figure this out by utilizing cloneNode(true)
I'm open for any feedback especially on how I structure my code. OR if my game logic can be more efficient. I used a simple if-else statement to determine who wins, but maybe it can be done with fewer lines.
Thank you very much! (No seriously thank you I take a lot of time typing these and I sometimes think no one is reading them. So I'm doing this for those that do!)
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on John Leomarc Alonzo’s solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord