This content originally appeared on DEV Community and was authored by Jennifer Tieu
Today I worked on the JavaScript of my Rock Paper Scissors projects to work with the UI.
I commented out logic of what I'm planning to do, but this is my first time having to work with the DOM events and manipulation so not too sure if I'm doing this correctly.
I already added an event listener to the buttons. I understand that once the user selects the button, it should then display the user's choice and computer's choice. Then it will show who won, update score, update round, and clear the choices again in the UI. This process should repeat until the end of five rounds where a winner will be returned or when the user chooses to reset the game. I'm thinking resetting the game might be an add on for later. I plan to have it as a button on the UI. Lastly, the user will be prompted to play again after the five rounds is completed.
So, many things happen once the user selects the button.
- User choice displays
- Computer choice displays
- Result of round shown
- Score updates
- Round number updates
A function should be passed into the addEventListener() for the button elements that will execute all the steps above. It generate a random selection for the computer and display the computer and user's choice. Then run the game to see who wins and displays the result for the round. If the round is not five then update score and the function should end.
If the round reaches five, check the score, display a winner, and prompts the user to play again. If the user chooses to continue the game will reset. If the user cancels....nothing happens? I'm not too sure how that works yet.
Alright, next I will start implementing the function.
Resources
The Odin Project
Revisiting Rock Paper Scissors
This content originally appeared on DEV Community and was authored by Jennifer Tieu
Jennifer Tieu | Sciencx (2022-01-31T04:22:43+00:00) Self-Taught Developer Journal, Day 51: TOP Building Rock Paper Scissors UI cont.. Retrieved from https://www.scien.cx/2022/01/31/self-taught-developer-journal-day-51-top-building-rock-paper-scissors-ui-cont/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.