diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/README.md b/Domains/Frontend/MiniProjects/RockPaperScissors/README.md new file mode 100644 index 00000000..3bbdd90b --- /dev/null +++ b/Domains/Frontend/MiniProjects/RockPaperScissors/README.md @@ -0,0 +1,69 @@ +**Contributor:** MeghPatel-007 + +# 🎮 Rock-Paper-Scissors Game + +A fun and interactive **Rock-Paper-Scissors** game built with **HTML, CSS, and JavaScript**. Play against the computer and test your skills in multiple rounds! 🏆 + +--- + +## 📑 Table of Contents + +1. [✨ Features](#-features) +2. [🎯 How to Play](#-how-to-play) +3. [📂 Folder Structure](#-folder-structure) +4. [📸 Screenshots](#-screenshots) +5. [📝 License](#-license) + +--- + +## ✨ Features + +- 🖥 Play against a computer opponent with random moves +- 🏅 Keep track of scores across multiple rounds +- 💬 Dynamic messages for **win**, **loss**, or **tie** +- 🎨 Clean and responsive interface + +--- + +## 🎯 How to Play + +1. Open the `index.html` file in your browser. +2. Click on **Rock ✊**, **Paper ✋**, or **Scissors ✌️** to make your move. +3. The computer will choose randomly. +4. The winner of each round is displayed and scores are tracked automatically. +5. Press **Reset Game 🔄** to start a new match. + +--- + +## 📂 Folder Structure + +RockPaperScissors/ +├─ index.html # Main HTML file +├─ style.css # Styling for the game +├─ script.js # Game logic +├─ paper.png # Paper image +├─ rock.png # Rock image +├─ scissors.png # Scissors image +├─ rps icon.png # Favicon +└─ README.md # This README file + +--- + +## 📸 Screenshots + +![Game Screenshot](screenshot.png) + +--- + +## 📝 License + +This project is licensed under the **MIT License**. See the LICENSE file for details. + +--- + +## 🙏 Thank You + +Thanks for checking out my Rock-Paper-Scissors project! +I hope you enjoy playing it and have fun trying to beat the computer. 🎮✨ + +Feel free to leave feedback or suggestions for improvement! diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/index.html b/Domains/Frontend/MiniProjects/RockPaperScissors/index.html new file mode 100644 index 00000000..1d7abd68 --- /dev/null +++ b/Domains/Frontend/MiniProjects/RockPaperScissors/index.html @@ -0,0 +1,51 @@ + + + + + + RPS Game + + + + + +
+
+
+

Rock Paper Scissor Game

+
+
+
+ + +
+
+ + + +
+
+
"Beat me if you can!!!"
+
+
+ 
You -
+
+ 
Comp -
+
+
+
+
+ +
+

Congratulations!!!!

+
+
+

You beat me

+
+ +
+ + + diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/paper.png b/Domains/Frontend/MiniProjects/RockPaperScissors/paper.png new file mode 100644 index 00000000..fcc66033 Binary files /dev/null and b/Domains/Frontend/MiniProjects/RockPaperScissors/paper.png differ diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/rock.png b/Domains/Frontend/MiniProjects/RockPaperScissors/rock.png new file mode 100644 index 00000000..9bd0b7ae Binary files /dev/null and b/Domains/Frontend/MiniProjects/RockPaperScissors/rock.png differ diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/rps icon.png b/Domains/Frontend/MiniProjects/RockPaperScissors/rps icon.png new file mode 100644 index 00000000..5c06f219 Binary files /dev/null and b/Domains/Frontend/MiniProjects/RockPaperScissors/rps icon.png differ diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/scissors.png b/Domains/Frontend/MiniProjects/RockPaperScissors/scissors.png new file mode 100644 index 00000000..c9dcbb6c Binary files /dev/null and b/Domains/Frontend/MiniProjects/RockPaperScissors/scissors.png differ diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/screenshot.png b/Domains/Frontend/MiniProjects/RockPaperScissors/screenshot.png new file mode 100644 index 00000000..4fa8a9d3 Binary files /dev/null and b/Domains/Frontend/MiniProjects/RockPaperScissors/screenshot.png differ diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/script.js b/Domains/Frontend/MiniProjects/RockPaperScissors/script.js new file mode 100644 index 00000000..4418183d --- /dev/null +++ b/Domains/Frontend/MiniProjects/RockPaperScissors/script.js @@ -0,0 +1,136 @@ +let yPicker = document.querySelectorAll(".btn"); +let print = document.querySelector(".comment"); +let reset = document.querySelector(".resetBtn"); +let scoreC = document.querySelector("#scoreC"); +let scoreY = document.querySelector("#scoreY"); +let count = 0; +let countY = 1; +let countC = 1; +let storageY = 0; +let storageC = 0; +let cancel = document.querySelector(".cancel"); +let popUp = document.querySelector(".pop-up"); +let comment1 = document.querySelector(".pop-up-comment"); +let printC = document.querySelector("#choicedC"); +let printY = document.querySelector("#choicedY"); +let comment2 = document.querySelector(".pop-up-title"); + +const cChoice = () => { + let opt = ["Rock", "Paper", "Scissors"]; + let i = Math.floor(Math.random() * 3); + return opt[i]; +}; + +const ShowWinner = (yWin) => { + if (yWin) { + winner(); + // console.log(`YOU = ${countY}`); + storageY = +countY; + } else { + loser(); + // console.log(`COMP = ${countC}`); + storageC = +countC; + } + // console.log(storageY); + // console.log(storageC); + comparison(); +}; + +const core = (You) => { + // console.log("you =",You); + printY.innerText = You; + let Comp = cChoice(); + // console.log("comp =",Comp); + printC.innerText = Comp; + if (You === Comp) { + draw(); + } else { + let yWin = true; + if (You === "Rock") { + yWin = Comp === "Paper" ? false : true; + } else if (You === "Paper") { + yWin = Comp === "Scissors" ? false : true; + } else { + yWin = Comp === "Rock" ? false : true; + } + ShowWinner(yWin); + } + counter(); +}; + +yPicker.forEach((btn) => { + // console.log(btn); + btn.addEventListener("click", () => { + let You = btn.getAttribute("id"); + count++; + // console.log(count); + core(You); + }); +}); + +reset.addEventListener("click", () => { + // console.log(scoreC); + scoreC.innerText = "Comp - 0"; + scoreY.innerText = "You - 0"; + no = 1; + count = 0; + countY = 1; + countC = 1; + scoreC.style.color = "white"; + scoreY.style.color = "white"; + popUp.classList.add("visible"); + print.style.color = "white"; + print.innerText = "Try again Child!!!"; +}); +const winner = () => { + // console.log("You Win"); + print.innerText = "You Win"; + scoreY.innerText = `You - ${countY++}`; + scoreY.style.color = "#36BA98"; + scoreC.style.color = "#E76F51"; + print.style.color = "#36BA98"; +}; +const loser = () => { + // console.log("You lose"); + print.innerText = "You lose"; + scoreC.innerText = `Comp - ${countC++}`; + scoreY.style.color = "#E76F51"; + scoreC.style.color = "#36BA98"; + print.style.color = "#E76F51"; +}; +const draw = () => { + // console.log("Its a Draw"); + print.innerText = "Its a Draw"; + print.style.color = "#ffff44"; + scoreY.style.color = "#ffff44"; + scoreC.style.color = "#ffff44"; +}; + +const counter = () => { + console.log(count); + if (count % 10 === 0) { + popUp.classList.remove("visible"); + } else { + popUp.classList.add("visible"); + } +}; + +cancel.addEventListener("click", () => { + popUp.classList.add("visible"); +}); + +const comparison = () => { + // console.log(storageC); + // console.log(storageY); + + if (storageY > storageC) { + comment1.innerText = "You beat me,bruh!!"; + comment2.innerText = "Congratulaions!!!"; + } else if (storageY < storageC) { + comment1.innerText = "HA!!! loser can't beat me"; + comment2.innerText = "Loser!!!"; + } else { + comment1.innerText = "I have never such a tough player"; + comment2.innerText = "Tie!!!"; + } +}; diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/style.css b/Domains/Frontend/MiniProjects/RockPaperScissors/style.css new file mode 100644 index 00000000..ae4e08ee --- /dev/null +++ b/Domains/Frontend/MiniProjects/RockPaperScissors/style.css @@ -0,0 +1,236 @@ +* { + padding: 0; + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + color: white; +} + +body { + display: flex; + justify-content: center; + align-items: center; + background-color: #36ba98; + z-index: -1; +} + +.main { + height: 100vh; + width: 35rem; + border-right: 0.5rem #e9c46a solid; + border-left: 0.5rem #e9c46a solid; + display: flex; + justify-content: center; + align-items: center; + background-color: #e76f51; + flex-direction: column; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + z-index: 0; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +header { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.title { + height: 2.5rem; + width: 22.7rem; + display: flex; + justify-content: center; + align-items: center; + border: 5px #f4a261 solid; + border-radius: 1rem; + margin: 0.5rem; + background-color: #e9c46a; + color: white; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.scoreBoard { + display: flex; +} + +.scoreBox { + height: 3rem; + width: 11.3rem; + margin: 0.2rem 0.2rem; + background-color: rgb(255, 255, 255); + border-radius: 0.5rem; + border: 7px solid #f4a261; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + font-size: 1.5rem; + background-color: #e9c46a; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.gameBox { + background-color: #e9c46a; + display: flex; + align-items: center; + justify-content: space-evenly; + height: 15rem; + width: 18rem; + border-radius: 0.5rem; + margin: 0.5rem; + border: none; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + flex-wrap: wrap; + padding: 2.5rem; +} + +.btn { + height: 7rem; + width: 7rem; + background-color: #36ba98; + border-radius: 50%; + border: none; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + /* background-size:cover ; */ + cursor: pointer; + transition: 1.5s; +} + +.btn:hover { + height: 9rem; + width: 9rem; +} +/* -------------------------------------------------------------------------------------------------------------------- */ + +.display { + height: 4rem; + color: white; + width: 22.7rem; + display: flex; + justify-content: center; + align-items: center; + background-color: #e9c46a; + border: 5px solid #f4a261; + border-radius: 0.5rem; + font-size: 1.5rem; + margin: 0.5rem; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.footer { + height: 4rem; + width: 22.7rem; + display: flex; + justify-content: center; + align-items: center; + background-color: #e9c46a; + border: 5px solid #f4a261; + border-radius: 0.5rem; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; +} + +.resetBtn { + padding: 0.5rem 2rem; + border-radius: 1rem; + border: none; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + background-color: #36ba98; + color: white; + margin: 0.5rem; + /* font-weight: 1000; */ + cursor: pointer; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +img { + height: 6.6rem; + width: 6.6rem; + margin-top: 0.2rem; + border-radius: 50%; + object-fit: cover; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.pop-up { + height: 20rem; + width: 30rem; + border: 0.5rem #e9c46a solid; + display: flex; + justify-content: center; + align-items: center; + background-color: #e76f51; + flex-direction: column; + z-index: 1; + position: fixed; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + border-radius: 0.5rem; + /* visibility: hidden; */ +} + +.cancel { + height: 3rem; + width: 3rem; + translate: 14.5rem -3.5rem; + border: none; + font-weight: 400; + font-size: 1.5rem; + background-color: #e76f51; + align-items: center; + justify-content: center; + display: flex; + border: #e9c46a 0.5rem solid; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; +} + +.pop-up-title { + margin: 0.5rem; +} + +.pop-up-comment { + font-weight: 100; + /* margin: .5rem .5rem 2rem .5rem; */ +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.visible { + visibility: hidden; +} + +/* -------------------------------------------------------------------------------------------------------------------- */ + +.optchoiced { + height: 2.7rem; + margin: 0.2rem; + background-color: #36ba98; + width: 5rem; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + border-radius: 1rem; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.3rem; +} + +.text { + display: flex; + justify-content: center; + align-items: center; + height: 3rem; + margin: 0.5rem; + background-color: #36ba98; + width: auto; + box-shadow: inset 0rem 0rem 0.2rem 0.1rem black; + border-radius: 1rem; + padding: 0.2rem 1rem; +} + +.p { + font-size: 1.5rem; + margin: 0.5rem; +}