├── paper.png ├── rock.png ├── scissors.png ├── LICENSE ├── README.md ├── index.html ├── style.css └── script.js /paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/testgithubrittttttt/stone-paper-scissor-game/HEAD/paper.png -------------------------------------------------------------------------------- /rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/testgithubrittttttt/stone-paper-scissor-game/HEAD/rock.png -------------------------------------------------------------------------------- /scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/testgithubrittttttt/stone-paper-scissor-game/HEAD/scissors.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Dhruv Sharma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Stone Paper Scissors Game 2 | 3 | Welcome to the ultimate rock-paper-scissors showdown! This exciting game is built entirely with HTML, CSS, and JavaScript, providing a fun and engaging experience for anyone. 4 | 5 | How to Play: 6 | 7 | Fire Up the Game: Open the index.html file in your web browser. 8 | Choose Your Weapon: Click on the vibrant buttons labeled "Rock," "Paper," or "Scissors" to make your selection. 9 | Face Off: Watch the suspense build as the computer opponent reveals its choice with a cool animation. 10 | May the Best Hand Win: A clear message will declare the victor (you or the computer) and a celebratory animation for the winner. 11 | Rematch? Click the "Play Again" button to challenge the computer repeatedly! 12 | 13 | Features: 14 | Intuitive Gameplay: Simple controls make it easy for anyone to jump in and play. 15 | Engaging Animations: Witness captivating animations for both player and computer selections, adding a touch of excitement. 16 | Visually Appealing Design: A visually appealing design with clear buttons and informative messages keeps you engaged. 17 | Responsive and Mobile-Friendly: Enjoy seamless gameplay on any device, from desktops to smartphones. 18 | 19 | Getting Started: 20 | 21 | Download the Files: Clone or download the repository to obtain the game files. 22 | Open in Browser: Navigate to the project directory in your web browser (usually by double-clicking index.html). 23 | Start Playing! Get ready to unleash your rock-paper-scissors mastery! 24 | Technical Stack: 25 | 26 | HTML: Provides the game's structure and content. 27 | CSS: Styles the game's visual elements for a polished look. 28 | JavaScript: Powers the game's logic, including user interaction, decision-making, and animations. 29 | Feel free to customize the game! 30 | 31 | The code is well-commented, making it easy to modify: 32 | 33 | If you want to make any changes, you can make it a better version. Changes can be like: 34 | 35 | Change the button colors, background images, or text styles to personalize the look and feel. 36 | Experiment with different animation libraries to create unique effects. 37 | Add sound effects to enhance the interactive experience. 38 | Consider implementing difficulty levels or a multiplayer mode for an extra challenge. 39 | 40 | This project is a great starting point for your web development journey. Experiment, explore, and have fun creating a truly exceptional rock-paper-scissors experience! 41 | 42 | If you like my work make sure you like the repository and follow me for more such amazing games or projects. 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock Paper Scissors 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Rock Paper Scissors

15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | Rock 23 |
24 |
25 | Paper 26 |
27 |
28 | Scissors 29 |
30 |
31 |
32 |
33 |
34 |

0

35 |

USER

36 |
37 |
38 |

0

39 |

COMPUTER

40 |
41 |
42 |
43 |

Make your move!

44 |
45 | 46 |
47 |
48 |
49 |

Game History

50 |
    51 |
    52 |
    53 |

    Leaderboard

    54 |
      55 |
      56 |
      57 |

      Achievements

      58 |
        59 |
        60 |
        61 |
        62 |
        63 |

        How to Play

        64 |

        Welcome to Rock Paper Scissors! Here’s how to play...

        65 | 66 |
        67 |
        68 |

        Achievement Unlocked!

        69 | 70 |
        71 |
        72 |
        73 | × 74 |

        Share your score:

        75 | 76 | 77 |
        78 |
        79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | html, body { 9 | height: 100%; 10 | overflow: hidden; 11 | } 12 | 13 | body { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | background: var(--background); 19 | color: var(--text-color); 20 | transition: background 0.5s, color 0.5s; 21 | } 22 | 23 | :root { 24 | --background: #f4f4f9; 25 | --text-color: #333; 26 | --highlight: #c3bef0; 27 | --msg-background: rgba(0, 0, 0, 0.6); 28 | } 29 | 30 | [data-theme="dark"] { 31 | --background: #333; 32 | --text-color: #f4f4f9; 33 | --highlight: #fc5c7d; 34 | --msg-background: rgba(255, 255, 255, 0.1); 35 | } 36 | 37 | header { 38 | width: 100%; 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | padding: 0.5rem 1rem; 43 | background: var(--highlight); 44 | color: #fff; 45 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 46 | } 47 | 48 | header h1 { 49 | font-size: 1.5rem; 50 | } 51 | 52 | #theme-toggle, #login { 53 | background: none; 54 | border: none; 55 | color: #fff; 56 | font-size: 1rem; 57 | cursor: pointer; 58 | } 59 | 60 | .container { 61 | display: flex; 62 | flex: 1; 63 | overflow-y: auto; 64 | width: 100%; 65 | padding: 1rem; 66 | } 67 | 68 | .game-container, .history-container { 69 | flex: 1; 70 | padding: 1rem; 71 | border-radius: 10px; 72 | background: rgba(255, 255, 255, 0.1); 73 | margin: 1rem; 74 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 75 | overflow-y: auto; 76 | } 77 | 78 | .choice { 79 | height: 120px; 80 | width: 120px; 81 | border-radius: 50%; 82 | display: flex; 83 | justify-content: center; 84 | align-items: center; 85 | transition: background-color 0.3s ease, transform 0.3s ease; 86 | } 87 | 88 | .choice:hover { 89 | cursor: pointer; 90 | background-color: rgba(255, 255, 255, 0.3); 91 | transform: scale(1.1); 92 | } 93 | 94 | img { 95 | height: 100px; 96 | width: 100px; 97 | object-fit: cover; 98 | } 99 | 100 | .choices { 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | gap: 2rem; 105 | margin: 1.5rem 0; 106 | } 107 | 108 | .score-board { 109 | display: flex; 110 | justify-content: space-around; 111 | align-items: center; 112 | font-size: 1.5rem; 113 | margin: 1.5rem 0; 114 | } 115 | 116 | #user-score, 117 | #computer-score { 118 | font-size: 2rem; 119 | font-weight: bold; 120 | } 121 | 122 | .msg-container { 123 | margin-top: 2rem; 124 | } 125 | 126 | #msg { 127 | background: var(--msg-background); 128 | padding: 0.5rem 1rem; 129 | border-radius: 5px; 130 | font-size: 1.2rem; 131 | transition: background-color 0.3s ease; 132 | } 133 | 134 | .history, .leaderboard, .achievements { 135 | margin-top: 2rem; 136 | text-align: left; 137 | padding: 1rem; 138 | border-radius: 10px; 139 | background: rgba(255, 255, 255, 0.1); 140 | overflow-y: auto; 141 | max-height: 300px; 142 | } 143 | 144 | .history h2, .leaderboard h2, .achievements h2 { 145 | font-size: 1.5rem; 146 | margin-bottom: 0.5rem; 147 | } 148 | 149 | .history ul, .leaderboard ul, .achievements ul { 150 | list-style: none; 151 | } 152 | 153 | .history li, .leaderboard li, .achievements li { 154 | background: rgba(255, 255, 255, 0.1); 155 | padding: 0.5rem; 156 | margin: 0.5rem 0; 157 | border-radius: 5px; 158 | font-size: 1rem; 159 | transition: background 0.3s; 160 | } 161 | 162 | .history li:hover, .leaderboard li:hover, .achievements li:hover { 163 | background: rgba(255, 255, 255, 0.2); 164 | } 165 | 166 | .tutorial { 167 | display: none; 168 | position: absolute; 169 | top: 10%; 170 | left: 50%; 171 | transform: translateX(-50%); 172 | padding: 2rem; 173 | background: rgba(0, 0, 0, 0.8); 174 | color: #fff; 175 | border-radius: 10px; 176 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 177 | } 178 | 179 | .tutorial h2 { 180 | font-size: 1.5rem; 181 | margin-bottom: 1rem; 182 | } 183 | 184 | .tutorial p { 185 | font-size: 1rem; 186 | margin-bottom: 1rem; 187 | } 188 | 189 | #close-tutorial { 190 | background: var(--highlight); 191 | border-radius: 5px; 192 | padding: 0.5rem 1rem; 193 | border: none; 194 | color: #fff; 195 | cursor: pointer; 196 | } 197 | 198 | button:focus { 199 | outline: none; 200 | } 201 | 202 | @media (max-width: 768px) { 203 | body { 204 | flex-direction: column; 205 | } 206 | 207 | .container { 208 | flex-direction: column; 209 | padding: 0.5rem; 210 | } 211 | 212 | .game-container, .history-container { 213 | width: 100%; 214 | } 215 | } 216 | /* ... Existing styles ... */ 217 | 218 | #countdown { 219 | font-size: 3rem; 220 | color: var(--highlight); 221 | text-align: center; 222 | margin: 1rem 0; 223 | } 224 | 225 | .achievement-popup { 226 | display: none; 227 | position: absolute; 228 | top: 20%; 229 | left: 50%; 230 | transform: translateX(-50%); 231 | background: rgba(0, 0, 0, 0.8); 232 | color: #fff; 233 | padding: 1rem; 234 | border-radius: 10px; 235 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 236 | } 237 | 238 | .achievement-popup p { 239 | font-size: 1.5rem; 240 | margin-bottom: 1rem; 241 | } 242 | 243 | .achievement-popup button { 244 | background: var(--highlight); 245 | border: none; 246 | color: #fff; 247 | padding: 0.5rem 1rem; 248 | border-radius: 5px; 249 | cursor: pointer; 250 | } 251 | 252 | .score-modal { 253 | display: none; 254 | position: fixed; 255 | top: 0; 256 | left: 0; 257 | width: 100%; 258 | height: 100%; 259 | background: rgba(0, 0, 0, 0.5); 260 | align-items: center; 261 | justify-content: center; 262 | } 263 | 264 | .score-modal-content { 265 | background: #fff; 266 | padding: 2rem; 267 | border-radius: 10px; 268 | text-align: center; 269 | position: relative; 270 | max-width: 500px; 271 | margin: auto; 272 | } 273 | 274 | .score-modal-content .close { 275 | position: absolute; 276 | top: 10px; 277 | right: 10px; 278 | cursor: pointer; 279 | } 280 | 281 | .score-modal-content textarea { 282 | width: 100%; 283 | height: 100px; 284 | margin-bottom: 1rem; 285 | } 286 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let userScore = 0; 2 | let compScore = 0; 3 | let countdownTimer; 4 | 5 | const choices = document.querySelectorAll(".choice"); 6 | const msg = document.querySelector("#msg"); 7 | const historyList = document.querySelector("#history-list"); 8 | const leaderboardList = document.querySelector("#leaderboard-list"); 9 | const achievementsList = document.querySelector("#achievements-list"); 10 | 11 | const userScorePara = document.querySelector("#user-score"); 12 | const compScorePara = document.querySelector("#computer-score"); 13 | 14 | const clickSound = document.querySelector("#click-sound"); 15 | const winSound = document.querySelector("#win-sound"); 16 | const loseSound = document.querySelector("#lose-sound"); 17 | const drawSound = document.querySelector("#draw-sound"); 18 | 19 | const themeToggle = document.querySelector("#theme-toggle"); 20 | const body = document.body; 21 | const loginButton = document.querySelector("#login"); 22 | const shareScoreButton = document.querySelector("#share-score"); 23 | const tutorial = document.querySelector(".tutorial"); 24 | const closeTutorialButton = document.querySelector("#close-tutorial"); 25 | const achievementPopup = document.querySelector("#achievement-popup"); 26 | const achievementMsg = document.querySelector("#achievement-msg"); 27 | const closeAchievementButton = document.querySelector("#close-achievement"); 28 | const scoreModal = document.querySelector("#score-modal"); 29 | const closeScoreModalButton = document.querySelector("#close-score-modal"); 30 | const scoreText = document.querySelector("#score-text"); 31 | const copyScoreButton = document.querySelector("#copy-score"); 32 | const countdownElement = document.querySelector("#countdown"); 33 | 34 | themeToggle.addEventListener("click", () => { 35 | body.dataset.theme = body.dataset.theme === "dark" ? "" : "dark"; 36 | themeToggle.innerText = body.dataset.theme === "dark" ? "🌞" : "🌙"; 37 | }); 38 | 39 | loginButton.addEventListener("click", () => { 40 | alert("User authentication is a placeholder."); 41 | }); 42 | 43 | shareScoreButton.addEventListener("click", () => { 44 | scoreText.value = `Score: USER ${userScore} - COMPUTER ${compScore}`; 45 | scoreModal.style.display = "flex"; 46 | }); 47 | 48 | closeTutorialButton.addEventListener("click", () => { 49 | tutorial.style.display = "none"; 50 | }); 51 | 52 | closeAchievementButton.addEventListener("click", () => { 53 | achievementPopup.style.display = "none"; 54 | }); 55 | 56 | closeScoreModalButton.addEventListener("click", () => { 57 | scoreModal.style.display = "none"; 58 | }); 59 | 60 | copyScoreButton.addEventListener("click", () => { 61 | scoreText.select(); 62 | document.execCommand("copy"); 63 | alert("Score copied to clipboard!"); 64 | }); 65 | 66 | const genCompChoice = () => { 67 | const options = ["rock", "paper", "scissors"]; 68 | const randIdx = Math.floor(Math.random() * 3); 69 | return options[randIdx]; 70 | }; 71 | 72 | const drawGame = () => { 73 | msg.innerText = "It's a Draw! Try again."; 74 | msg.style.backgroundColor = "var(--msg-background)"; 75 | drawSound.play(); 76 | addHistory("Draw"); 77 | }; 78 | 79 | const showWinner = (userWin, userChoice, compChoice) => { 80 | if (userWin) { 81 | userScore++; 82 | userScorePara.innerText = userScore; 83 | msg.innerText = `You win! ${capitalize(userChoice)} beats ${capitalize(compChoice)}`; 84 | msg.style.backgroundColor = "rgba(76, 175, 80, 0.8)"; 85 | winSound.play(); 86 | addHistory(`Win - ${capitalize(userChoice)} beats ${capitalize(compChoice)}`); 87 | checkAchievements(); 88 | } else { 89 | compScore++; 90 | compScorePara.innerText = compScore; 91 | msg.innerText = `You lose! ${capitalize(compChoice)} beats ${capitalize(userChoice)}`; 92 | msg.style.backgroundColor = "rgba(244, 67, 54, 0.8)"; 93 | loseSound.play(); 94 | addHistory(`Loss - ${capitalize(compChoice)} beats ${capitalize(userChoice)}`); 95 | } 96 | }; 97 | 98 | const playGame = (userChoice) => { 99 | clickSound.play(); 100 | const compChoice = genCompChoice(); 101 | 102 | if (userChoice === compChoice) { 103 | drawGame(); 104 | } else { 105 | let userWin = true; 106 | if (userChoice === "rock") { 107 | userWin = compChoice === "paper" ? false : true; 108 | } else if (userChoice === "paper") { 109 | userWin = compChoice === "scissors" ? false : true; 110 | } else { 111 | userWin = compChoice === "rock" ? false : true; 112 | } 113 | showWinner(userWin, userChoice, compChoice); 114 | } 115 | }; 116 | 117 | const addHistory = (result) => { 118 | const li = document.createElement("li"); 119 | li.innerText = result; 120 | historyList.appendChild(li); 121 | }; 122 | 123 | const checkAchievements = () => { 124 | let achievement = ""; 125 | if (userScore === 5) { 126 | achievement = "5 Wins - Good Start!"; 127 | } else if (userScore === 10) { 128 | achievement = "10 Wins - Getting Better!"; 129 | } else if (userScore === 20) { 130 | achievement = "20 Wins - Master Player!"; 131 | } 132 | if (achievement) { 133 | addAchievement(achievement); 134 | achievementMsg.innerText = achievement; 135 | achievementPopup.style.display = "block"; 136 | } 137 | }; 138 | 139 | const addAchievement = (achievement) => { 140 | const li = document.createElement("li"); 141 | li.innerText = achievement; 142 | achievementsList.appendChild(li); 143 | }; 144 | 145 | const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); 146 | 147 | choices.forEach((choice) => { 148 | choice.addEventListener("click", () => { 149 | startCountdown(() => { 150 | const userChoice = choice.getAttribute("id"); 151 | playGame(userChoice); 152 | }); 153 | }); 154 | }); 155 | 156 | const startCountdown = (callback) => { 157 | let countdown = 3; 158 | countdownElement.innerText = countdown; 159 | countdownElement.style.display = "block"; 160 | countdownTimer = setInterval(() => { 161 | countdown--; 162 | countdownElement.innerText = countdown; 163 | if (countdown === 0) { 164 | clearInterval(countdownTimer); 165 | countdownElement.style.display = "none"; 166 | callback(); 167 | } 168 | }, 1000); 169 | }; 170 | --------------------------------------------------------------------------------