├── .vscode └── settings.json ├── assets ├── Paper.png ├── Rock.png ├── Scissors.png ├── title.png └── triangle.png ├── css └── styles.css ├── index.html └── js └── index.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /assets/Paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/challenge-rock-paper-scissors-game/bb93c03717c15a565c0bd6adf0a80ff2bf619b79/assets/Paper.png -------------------------------------------------------------------------------- /assets/Rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/challenge-rock-paper-scissors-game/bb93c03717c15a565c0bd6adf0a80ff2bf619b79/assets/Rock.png -------------------------------------------------------------------------------- /assets/Scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/challenge-rock-paper-scissors-game/bb93c03717c15a565c0bd6adf0a80ff2bf619b79/assets/Scissors.png -------------------------------------------------------------------------------- /assets/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/challenge-rock-paper-scissors-game/bb93c03717c15a565c0bd6adf0a80ff2bf619b79/assets/title.png -------------------------------------------------------------------------------- /assets/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/challenge-rock-paper-scissors-game/bb93c03717c15a565c0bd6adf0a80ff2bf619b79/assets/triangle.png -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | Global styles 3 | ----------------------------------------------------------------*/ 4 | 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Barlow Condensed", sans-serif; 13 | } 14 | 15 | /* 16 | ------------------------------------------------------------------------------- 17 | HTML elements 18 | ------------------------------------------------------------------------------- 19 | */ 20 | .wrapper { 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | width: 100vw; 25 | height: 100vh; 26 | background: radial-gradient( 27 | 134.34% 134.34% at 50% 0%, 28 | #1f3757 0%, 29 | #131537 100% 30 | ); 31 | } 32 | 33 | .scoreboard { 34 | width: 700px; 35 | height: 150px; 36 | border-radius: 15px; 37 | border: 1px solid white; 38 | display: flex; 39 | justify-content: space-between; 40 | align-items: center; 41 | margin-top: 50px; 42 | } 43 | 44 | .title { 45 | padding-left: 30px; 46 | } 47 | 48 | .score { 49 | width: 150px; 50 | height: 114px; 51 | background-color: white; 52 | border: 1px solid white; 53 | border-radius: 8px; 54 | margin-right: 30px; 55 | display: flex; 56 | flex-direction: column; 57 | justify-content: center; 58 | align-items: center; 59 | } 60 | 61 | .score h1 { 62 | color: #565468; 63 | font-size: 56px; 64 | font-family: "Barlow", sans-serif; 65 | } 66 | 67 | .score p { 68 | color: #2a45c2; 69 | font-size: 16px; 70 | font-style: normal; 71 | font-weight: 600; 72 | line-height: 19px; 73 | letter-spacing: 2.5px; 74 | text-align: left; 75 | } 76 | 77 | .hands { 78 | background-image: url("../assets/triangle.png"); 79 | background-position: center; 80 | background-repeat: no-repeat; 81 | visibility: visible; 82 | opacity: 1; 83 | position: relative; 84 | width: 476px; 85 | height: 430px; 86 | margin-top: 100px; 87 | display: flex; 88 | z-index: 0; 89 | flex-wrap: wrap; 90 | justify-content: center; 91 | } 92 | .hands img { 93 | width: 200px; 94 | height: 200px; 95 | display: block; 96 | } 97 | 98 | .hands .paper { 99 | margin-right: 20px; 100 | } 101 | 102 | .hands .scissors { 103 | margin-left: 20px; 104 | } 105 | 106 | .hands .hand { 107 | cursor: pointer; 108 | transition: all 0.25s; 109 | } 110 | 111 | .hands .hand:hover { 112 | transform: translate3d(0px, -8px, 0px); 113 | } 114 | 115 | .contest { 116 | display: none; 117 | margin-top: 50px; 118 | width: 900px; 119 | } 120 | 121 | .contest img { 122 | width: 275px; 123 | height: 275px; 124 | } 125 | 126 | .contest > div { 127 | flex: 1; 128 | } 129 | 130 | .contest h1 { 131 | color: white; 132 | font-size: 20px; 133 | margin-top: 20px; 134 | margin-bottom: 50px; 135 | text-align: center; 136 | } 137 | 138 | .contest .newGame { 139 | color: hsl(229, 25%, 31%); 140 | background-color: white; 141 | padding: 12px 24px; 142 | border-radius: 6px; 143 | cursor: pointer; 144 | transition: all 0.15s; 145 | } 146 | 147 | .newGame:hover { 148 | background: rgb(218, 218, 218); 149 | transform: translate3d(0px, -2px, 0px); 150 | } 151 | 152 | .contest .handImageContainer { 153 | display: flex; 154 | justify-content: center; 155 | } 156 | 157 | .referee { 158 | display: flex; 159 | flex-direction: column; 160 | justify-content: center; 161 | align-items: center; 162 | } 163 | 164 | .referee h1 { 165 | font-size: 45px; 166 | color: white; 167 | } 168 | 169 | .computerhand { 170 | display: flex; 171 | flex-direction: column; 172 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Rock Paper Scissors 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |

SCORE

21 |

0

22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |

YOU PICKED

38 |
39 | 40 |
41 |
42 |
43 |

YOU WIN!

44 |
PLAY AGAIN
45 |
46 |
47 |

THE HOUSE PICKED

48 |
49 | 50 |
51 |
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const handOptions = { 2 | "rock": "/assets/Rock.png", 3 | "paper": "/assets/Paper.png", 4 | "scissors": "/assets/Scissors.png" 5 | } 6 | 7 | let SCORE = 0; 8 | 9 | const pickUserHand = (hand) => { 10 | let hands = document.querySelector(".hands"); 11 | hands.style.display = "none"; 12 | 13 | let contest = document.querySelector(".contest"); 14 | contest.style.display = "flex"; 15 | 16 | // set user Image 17 | document.getElementById("userPickImage").src = handOptions[hand]; 18 | 19 | pickComputerHand(hand); 20 | }; 21 | 22 | const pickComputerHand = (hand) => { 23 | let hands = ["rock", "paper", "scissors"]; 24 | let cpHand = hands[Math.floor(Math.random() * hands.length)]; 25 | 26 | // set computer image 27 | document.getElementById("computerPickImage").src = handOptions[cpHand] 28 | 29 | referee(hand, cpHand); 30 | }; 31 | 32 | const referee = (userHand, cpHand) => { 33 | if (userHand == "paper" && cpHand == "scissors") { 34 | setDecision("YOU LOSE!"); 35 | } 36 | if (userHand == "paper" && cpHand == "rock") { 37 | setDecision("YOU WIN!"); 38 | setScore(SCORE + 1); 39 | } 40 | if (userHand == "paper" && cpHand == "paper") { 41 | setDecision("It's a tie!"); 42 | } 43 | if (userHand == "rock" && cpHand == "scissors") { 44 | setDecision("YOU WIN!"); 45 | setScore(SCORE + 1); 46 | } 47 | if (userHand == "rock" && cpHand == "paper") { 48 | setDecision("YOU LOSE!"); 49 | } 50 | if (userHand == "rock" && cpHand == "rock") { 51 | setDecision("It's a tie!"); 52 | } 53 | if (userHand == "scissors" && cpHand == "scissors") { 54 | setDecision("It's a tie!"); 55 | } 56 | if (userHand == "scissors" && cpHand == "rock") { 57 | setDecision("YOU LOSE!"); 58 | } 59 | if (userHand == "scissors" && cpHand == "paper") { 60 | setDecision("YOU WIN!"); 61 | setScore(SCORE + 1); 62 | } 63 | }; 64 | 65 | const restartGame = () => { 66 | let contest = document.querySelector(".contest"); 67 | contest.style.display = "none"; 68 | 69 | let hands = document.querySelector(".hands"); 70 | hands.style.display = "flex"; 71 | } 72 | 73 | const setDecision = (decision) => { 74 | document.querySelector(".decision h1").innerText = decision; 75 | } 76 | 77 | const setScore = (newScore) => { 78 | SCORE = newScore; 79 | document.querySelector(".score h1").innerText = newScore; 80 | } 81 | --------------------------------------------------------------------------------