└── Rock Paper Scissors ├── images ├── rock.png ├── paper.png └── scissors.png ├── index.html ├── style.css └── script.js /Rock Paper Scissors/images/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanjaycodez/Rock-Paper-Scissors/HEAD/Rock Paper Scissors/images/rock.png -------------------------------------------------------------------------------- /Rock Paper Scissors/images/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanjaycodez/Rock-Paper-Scissors/HEAD/Rock Paper Scissors/images/paper.png -------------------------------------------------------------------------------- /Rock Paper Scissors/images/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanjaycodez/Rock-Paper-Scissors/HEAD/Rock Paper Scissors/images/scissors.png -------------------------------------------------------------------------------- /Rock Paper Scissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Game | Rock Paper Scissors 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
Let's Play!!
23 |
24 | 25 |
26 | 27 | 28 |

Rock

29 | 30 | 31 | 32 |

Paper

33 | 34 | 35 | 36 |

Scissors

37 | 38 |
39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Rock Paper Scissors/style.css: -------------------------------------------------------------------------------- 1 | /* Import Google font - Poppins */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background: #1c36a0; 15 | } 16 | ::selection { 17 | color: #fff; 18 | background-color: #7d2ae8; 19 | } 20 | .container { 21 | padding: 2rem 7rem; 22 | border-radius: 14px; 23 | background: #fff; 24 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 25 | } 26 | .result_images { 27 | display: flex; 28 | column-gap: 7rem; 29 | } 30 | .container.start .user_result { 31 | transform-origin: left; 32 | animation: userShake 0.7s ease infinite; 33 | } 34 | @keyframes userShake { 35 | 50% { 36 | transform: rotate(10deg); 37 | } 38 | } 39 | 40 | .container.start .cpu_result { 41 | transform-origin: right; 42 | animation: cpuShake 0.7s ease infinite; 43 | } 44 | @keyframes cpuShake { 45 | 50% { 46 | transform: rotate(-10deg); 47 | } 48 | } 49 | .result_images img { 50 | width: 100px; 51 | } 52 | .user_result img { 53 | transform: rotate(90deg); 54 | } 55 | .cpu_result img { 56 | transform: rotate(-90deg) rotateY(180deg); 57 | } 58 | .result { 59 | text-align: center; 60 | font-size: 2rem; 61 | color: #7d2ae8; 62 | margin-top: 1.5rem; 63 | } 64 | 65 | .option_image img { 66 | width: 50px; 67 | } 68 | .option_images { 69 | display: flex; 70 | align-items: center; 71 | margin-top: 2.5rem; 72 | justify-content: space-between; 73 | } 74 | .container.start .option_images { 75 | pointer-events: none; 76 | } 77 | .option_image { 78 | display: flex; 79 | flex-direction: column; 80 | align-items: center; 81 | opacity: 0.5; 82 | cursor: pointer; 83 | transition: opacity 0.3s ease; 84 | } 85 | .option_image:hover { 86 | opacity: 1; 87 | } 88 | .option_image.active { 89 | opacity: 1; 90 | } 91 | .option_image img { 92 | pointer-events: none; 93 | } 94 | .option_image p { 95 | color: #7d2ae8; 96 | font-size: 1.235rem; 97 | margin-top: 1rem; 98 | pointer-events: none; 99 | } 100 | -------------------------------------------------------------------------------- /Rock Paper Scissors/script.js: -------------------------------------------------------------------------------- 1 | // Get to DOM elements 2 | const gameContainer = document.querySelector(".container"), 3 | userResult = document.querySelector(".user_result img"), 4 | cpuResult = document.querySelector(".cpu_result img"), 5 | result = document.querySelector(".result"), 6 | optionImages = document.querySelectorAll(".option_image"); 7 | 8 | // Loop through each option image element 9 | optionImages.forEach((image, index) => { 10 | image.addEventListener("click", (e) => { 11 | image.classList.add("active"); 12 | 13 | userResult.src = cpuResult.src = "images/rock.png"; 14 | result.textContent = "Wait..."; 15 | 16 | // Loop through each option image again 17 | optionImages.forEach((image2, index2) => { 18 | // If the current index doesn't match the clicked index 19 | // Remove the "active" class from the other option images 20 | index !== index2 && image2.classList.remove("active"); 21 | }); 22 | 23 | gameContainer.classList.add("start"); 24 | 25 | // Set a timeout to delay the result calculation 26 | let time = setTimeout(() => { 27 | gameContainer.classList.remove("start"); 28 | 29 | // Get the source of the clicked option image 30 | let imageSrc = e.target.querySelector("img").src; 31 | // Set the user image to the clicked option image 32 | userResult.src = imageSrc; 33 | 34 | // Generate a random number between 0 and 2 35 | let randomNumber = Math.floor(Math.random() * 3); 36 | // Create an array of CPU image options 37 | let cpuImages = ["images/rock.png", "images/paper.png", "images/scissors.png"]; 38 | // Set the CPU image to a random option from the array 39 | cpuResult.src = cpuImages[randomNumber]; 40 | 41 | // Assign a letter value to the CPU option (R for rock, P for paper, S for scissors) 42 | let cpuValue = ["R", "P", "S"][randomNumber]; 43 | // Assign a letter value to the clicked option (based on index) 44 | let userValue = ["R", "P", "S"][index]; 45 | 46 | // Create an object with all possible outcomes 47 | let outcomes = { 48 | RR: "Draw", 49 | RP: "Cpu", 50 | RS: "User", 51 | PP: "Draw", 52 | PR: "User", 53 | PS: "Cpu", 54 | SS: "Draw", 55 | SR: "Cpu", 56 | SP: "User", 57 | }; 58 | 59 | // Look up the outcome value based on user and CPU options 60 | let outComeValue = outcomes[userValue + cpuValue]; 61 | 62 | // Display the result 63 | result.textContent = userValue === cpuValue ? "Match Draw" : `${outComeValue} Won!!`; 64 | }, 2500); 65 | }); 66 | }); 67 | --------------------------------------------------------------------------------