| |
As shown in the example above, you have the option of using a rock, paper, or scissors.
It will then generate a random icon for both you and the computer.
If you win, your score will rise, and the same thing for the computer
1.index.html
Let's create an index.html file and add the following code to it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rock, Paper, Scissors game</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="script.js" defer></script> | |
| </head> | |
| <body> | |
| <div class="selections"> | |
| <button class="selection" data-selection="rock">👊</button> | |
| <button class="selection" data-selection="paper">✋</button> | |
| <button class="selection" data-selection="scissors">✌️</button> | |
| </div> | |
| <div class="results"> | |
| <div> | |
| You | |
| <span class="result-score" data-your-score>0</span> | |
| </div> | |
| <div data-final-column> | |
| Computer | |
| <span class="result-score" data-computer-score>0</span> | |
| </div> | |
| <!-- <div class="result-selection winner">👊</div> | |
| <div class="result-selection">✌️</div> --> | |
| </div> | |
| </body> | |
| </html> |
2.style.css
Let's create a CSS file called style.css and add the following CSS code to it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #ccc; | |
| } | |
| .selections { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .selection { | |
| background: none; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| font-size: 4rem; | |
| transition: 500ms; | |
| } | |
| .selection:hover { | |
| transform: scale(1.2); | |
| } | |
| .results { | |
| margin-top: 1rem; | |
| display: grid; | |
| font-size: 2rem; | |
| justify-content: center; | |
| grid-template-columns: repeat(2, 1fr); | |
| justify-items: center; | |
| align-items: center; | |
| } | |
| .result-score { | |
| margin-left: .1rem; | |
| font-size: 1rem; | |
| color: #333; | |
| } | |
| .result-selection { | |
| opacity: .5; | |
| } | |
| .result-selection.winner { | |
| opacity: 1; | |
| font-size: 2.5rem; | |
| } |
3.script.js
Make a JavaScript file called script.js and paste the following JavaScript code into it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const setectionButton = document.querySelectorAll('[data-selection]') | |
| const finalColumn = document.querySelector('[data-final-column]') | |
| const computerScoreSpan = document.querySelector('[data-computer-score') | |
| const yourScoreSpan = document.querySelector('[data-your-score') | |
| const SELECTIONS = [ | |
| { | |
| name: 'rock', | |
| emoji: '👊', | |
| beats: 'scissors' | |
| }, | |
| { | |
| name: 'paper', | |
| emoji: '✋', | |
| beats: 'rock' | |
| }, | |
| { | |
| name: 'scissors', | |
| emoji: '✌️', | |
| beats: 'paper' | |
| } | |
| ] | |
| setectionButton.forEach(setectionButton => { | |
| setectionButton.addEventListener('click', e => { | |
| const selectionName = setectionButton.dataset.selection | |
| const selection = SELECTIONS.find(selection => selection.name === selectionName) | |
| makeSelection(selection) | |
| }) | |
| }) | |
| function makeSelection(selection) { | |
| const computerSelection = randomSelection() | |
| const yourWinner = isWinner(selection, computerSelection) | |
| const computerWinner = isWinner(computerSelection, selection) | |
| addSelectionResult(computerSelection, computerWinner) | |
| addSelectionResult(selection, yourWinner) | |
| if (yourWinner) incrementScore(yourScoreSpan) | |
| if (computerWinner) incrementScore(computerScoreSpan) | |
| } | |
| function incrementScore(scoreSpan) { | |
| scoreSpan.innerText = parseInt(scoreSpan.innerText) + 1 | |
| } | |
| function addSelectionResult(selection, winner) { | |
| const div = document.createElement('div') | |
| div.innerText = selection.emoji | |
| div.classList.add('result-selection') | |
| if (winner) div.classList.add('winner') | |
| finalColumn.after(div) | |
| } | |
| function isWinner(selection, opponentSelection) { | |
| return selection.beats === opponentSelection.name | |
| } | |
| function randomSelection() { | |
| const randomIndex = Math.floor(Math.random() * SELECTIONS.length) | |
| return SELECTIONS[randomIndex] | |
| } |
Comments
Post a Comment