A rock, paper, scissors game in which the player goes against the computer.
The player chooses between three options on the screen while the computer then selects its option at random as soon as the player has made their move. The first to reach 10 points wins and the winner gets a point added to the scoreboard. After reaching 10 points, the game and scores will then restart, and a new game starts when the player makes a new move.
Game Rules:
- Rock beats Scissors.
- Scissors beat Paper.
- Paper beats Rock.
- As a player - I want to play a game of rock, paper, and scissors against an automated opponent.
- As a player - I'm able to read the rules of the game.
- As a player - I can make a choice by clicking a button that signifies rock, paper, or scissors.
- As a player - I can expect the computer to return with a choice of rock, paper, or scissors.
- As a player - I want to be able to see how many points I have so far.
- As a player - I want to be able to see who won or if it's a tie after each choice.
- As a player - I want to be able to see the total score of my winnings after each round.
- As a player - I want to be able to play again when I win or lose.
- Includes the name "Rock-Paper-Scissors".
- Displays the rules of the game with icons.
- Displays how many games the player and computer have won.
- Displays the score and choices for the player and computer.
- Displays how many points are needed to win at the beginning. When the game starts, it changes to display the winner of each round or if it's a tie, and at the end of each game, it displays the winner.
- Displays three buttons with icons for "rock", "paper", and "scissors" that the player can click on to make a move.
I used colors that would have a good contrast for easy readability but also make it a bit more fun to look at than just having everything be white, gray, and black.
- Background color - WhiteSmoke #F5F5F5, RGB(245,245,245).
- Text color - #3A3A3A, RGB(58,58,58).
Imported from Google Fonts.
- Londrina Sketch - used for the heading.
- Bebas Neue - used for all other text.
- HTML, CSS, and JavaScript.
- GitHub/GitHub Pages.
- Git.
- Gitpod.
- Google Fonts.
- Font Awesome.
Testing was done throughout the development. Chrome Dev Tools is used to make sure that the responsiveness, design, layout, and score system are working for different screen sizes and browsers. The deployed website is tested on Chrome, Opera GX, and Microsoft Edge on both desktop and mobile. It looks and works as intended for the most part (see known issues and bugs for more details), a friend of mine also tested the website and said that it looks good and works well.
-
Player Buttons
Each button works as expected when clicked on.- Rock button - displays the rock icon as the player's choice when clicked.
- Paper button - displays the paper icon as the player's choice when clicked.
- Scissors button - displays the scissors icon as the player's choice when clicked.
-
Computer Random Choice
Is working as intended. The computer picks between "rock", "paper", and "scissors" icons at random when the player makes their move. -
Score System, Scoreboard, Winner Display & Game Restart
Is working as intended. When both the player and computer have made their move, a text displays correctly according to who won or if a tie. If the player wins, the player score gets increased by one, if the computer wins, the computer score gets increased by one. Whenever the player or computer reaches a score of 10, a text is displayed according to who won the game. The scores then reset back to 0, and a point is added to the scoreboard for the winner. A new round starts when the player clicks any of the three buttons.
Desktop
Mobile
-
On mobile (Galaxy S22 Ultra)
-
Opera GX Browser:
Instruction text (at the top of the screen under the heading) becomes a little bigger every time the text "Player/Computer won the game!" comes up when a winner is announced (that text also becomes a little bigger), which makes everything else jump down a little on the screen. It goes back to normal again when you click on one of the buttons to start a new round, and the text "Player won/Computer won/Tie!" comes up again. -
Microsoft Edge Browser:
The text "Player/Computer won the game!" is a little bigger than the text for "Player won/Computer won/Tie!" which makes the text "What's your move?" and buttons under it jump down a little. It goes back to normal when you click on one of the buttons to start a new round, and the text "Player won/Computer won/Tie!" comes up again.Not sure what's the cause for these issues, it doesn't show up while using Chrome Dev Tools on desktop or while using the Chrome browser on mobile.
-
-
Rock Button
- On some screen sizes, the button is a little bigger/smaller due to the size of the icon itself. I tried to fix the padding for it on as many screen sizes as possible via media queries.
Deployed via GitHub Pages:
- Navigate to the settings for the GitHub repository.
- On the menu to the left, click on "Pages".
- From the "Source" section drop-down menu under "Build and deployment", select "Deploy from a branch".
- From the section "Branch", select the options "main" and "/(root)" then click save.
- After you click save, the page will automatically refresh and a statement will be displayed stating the deployment was successful.
Fork the repository:
- Log in/sign up to GitHub.
- Go to the repository for this project pp2-javascript.
- Click the 'Fork' button in the top right corner.
Clone the repository:
- Log in/sign up to GitHub.
- Go to the repository for this project pp2-javascript.
- Click the code button, select which one you want to clone with (HTTPS, SSH, or GitHub CLI), and copy the link shown.
- Open the terminal in a code editor and change the current working directory to a location of your choice to use for the cloned directory.
- Type 'git clone' in the terminal, paste the link that you copied in step 3 and then press enter.
- ChatSonic - Used to get some tips on how I could get my score- and scoreboard system to work as it should after days of trying and not being able to make it function properly.
- Used this tutorial as a base/starting structure for the script to make the player and computer choices work while using Font Awesome icons as options.
- Icons - Font Awesome
- Favicon - Gauger.io