Skip to content

Commit 1ae707b

Browse files
kartikktripathikartikktripathi
authored
Merge pull request #15 from ashwinalwa30/fixes
Fixed Indentation
2 parents d7f4d54 + fda10b1 commit 1ae707b

File tree

4 files changed

+294
-190
lines changed

4 files changed

+294
-190
lines changed

‎README.md‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,106 @@
1-
# Fate-of-Three
1+
# 🎮 Fate of Three – Rock Paper Scissors Game
2+
3+
A stylish and interactive **Rock–Paper–Scissors** game against the computer featuring animated buttons, score tracking, background music, sound effects, and confetti celebrations! Designed using **HTML, CSS, and JavaScript**.
4+
5+
---
6+
7+
## 📌 Features
8+
9+
* 🪨 **Rock–Paper–Scissors Gameplay**
10+
* 👨‍💻 **Play vs Computer (Randomized)**
11+
* 🔊 **Background Music + Sound Effects** (Win & Lose)
12+
* 🎉 **Confetti Animation** on Winning
13+
* ✨ **Button Entry Animations**
14+
* 📱 **Responsive UI for Mobile Screens**
15+
* 🎨 Custom fonts and modern UI
16+
17+
---
18+
19+
## 📁 Project Structure
20+
21+
```
22+
docs/
23+
│
24+
├── index.html # Main HTML structure
25+
├── styles.css # Styling and animations
26+
├── index.js # Game logic & event handling
27+
│
28+
├── assets/ # Images & audio files
29+
│ ├── 6729598.png # Favicon
30+
│ ├── bg_audio.mp3 # Background music
31+
│ ├── victory.mp3 # Victory sound
32+
│ └── lose.mp3 # Losing sound
33+
│
34+
└── README.md # Project documentation
35+
```
36+
37+
---
38+
39+
## 🛠️ Technologies Used
40+
41+
* **HTML5** – UI structure
42+
* **CSS3** – Styling, animations, responsiveness
43+
* **JavaScript** – Game functionality
44+
* **Google Fonts** – Custom typography
45+
* **Canvas Confetti JS (CDN)** – Win animation
46+
47+
---
48+
49+
## ▶️ How to Run the Project
50+
51+
1. Download or clone the repository:
52+
53+
```bash
54+
git clone https://github.com/your-username/fate-of-three.git
55+
```
56+
57+
2. Open the project folder.
58+
59+
3. Double-click **index.html** to open it in your browser.
60+
61+
4. Start playing! 🎮
62+
63+
---
64+
65+
## 🎯 Game Rules
66+
67+
* **Rock** beats **Scissors**
68+
* **Scissors** beats **Paper**
69+
* **Paper** beats **Rock**
70+
* Same choices → **Tie**
71+
72+
---
73+
74+
## 👥 Contributors
75+
76+
| Name |
77+
| ------------------- |
78+
| **Injora Injora** |
79+
| **Kartik Tripathi** |
80+
| **Ashwin Alwa** |
81+
82+
---
83+
84+
## 🚀 Future Improvements
85+
86+
* Add multiplayer mode
87+
* Add advanced animations
88+
* Add multiple themes (dark/light)
89+
90+
---
91+
92+
## 📄 License
93+
94+
This project is open-source. Feel free to modify and improve.
95+
96+
---
97+
98+
## ❤️ Acknowledgements
99+
100+
* Google Fonts
101+
* Canvas Confetti library
102+
* Emojis for Rock, Paper, Scissors
103+
104+
---
105+
106+
**Enjoy the Game!** 🎉🪨📃✂️

‎docs/index.html‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Fate of Three</title>
7-
<link rel="icon" href="assets/6729598.png">
8-
<link rel="stylesheet" href="styles.css">
9-
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
12-
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Science+Gothic:wght@100..900&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
13-
</head>
14-
<body>
15-
<audio id="bgaudio" src="assets/bg_audio.mp3" loop autoplay></audio>
16-
<audio id="victoryaudio" src="assets/victory.mp3"></audio>
17-
<audio id="loseaudio" src="assets/lose.mp3"></audio>
18-
<h1>Fate of Three</h1>
19-
<button id="musicBtn">Play Music</button>
20-
<h3>Choose One:</h3>
21-
<div class="choices">
22-
<button class="rock" onclick="playGame('Rock')">🪨</button>
23-
<button class="paper" onclick="playGame('Paper')">📃</button>
24-
<button class="scissor" onclick="playGame('Scissors')">✂️</button>
25-
</div>
26-
<div id="playerDisplay">Player : </div>
27-
<div id="compDisplay">Computer : </div>
28-
<div id="resultDisplay"></div>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Fate of Three</title>
7+
<link rel="icon" href="assets/6729598.png">
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
12+
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Science+Gothic:wght@100..900&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
13+
</head>
14+
<body>
15+
<audio id="bgaudio" src="assets/bg_audio.mp3" loop autoplay></audio>
16+
<audio id="victoryaudio" src="assets/victory.mp3"></audio>
17+
<audio id="loseaudio" src="assets/lose.mp3"></audio>
18+
<h1>Fate of Three</h1>
19+
<button id="musicBtn">Play Music</button>
20+
<h3>Choose One:</h3>
21+
<div class="choices">
22+
<button class="rock" onclick="playGame('Rock')">🪨</button>
23+
<button class="paper" onclick="playGame('Paper')">📃</button>
24+
<button class="scissor" onclick="playGame('Scissors')">✂️</button>
25+
</div>
26+
<div id="playerDisplay">Player : </div>
27+
<div id="compDisplay">Computer : </div>
28+
<div id="resultDisplay"></div>
2929

30-
<div class="scoreDisplay">Player Score:
31-
<span id="playerScoreDisplay">0</span>
32-
</div>
30+
<div class="scoreDisplay">Player Score:
31+
<span id="playerScoreDisplay">0</span>
32+
</div>
3333

34-
<div class="scoreDisplay">Computer Score:
35-
<span id="compScoreDisplay">0</span>
36-
</div>
34+
<div class="scoreDisplay">Computer Score:
35+
<span id="compScoreDisplay">0</span>
36+
</div>
3737

38-
<script src="index.js"></script>
39-
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
40-
</body>
38+
<script src="index.js"></script>
39+
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
40+
</body>
4141
</html>

‎docs/index.js‎

Lines changed: 62 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -17,83 +17,82 @@ bgAudio.volume = 0.15;
1717
let musicStarted = false;
1818

1919
musicBtn.addEventListener("click", () => {
20-
if (!musicStarted) {
21-
bgAudio.play().catch(() => {});
22-
musicStarted = true;
23-
musicBtn.textContent = "Stop Music";
24-
} else {
25-
if (!bgAudio.paused) {
26-
bgAudio.pause();
27-
musicBtn.textContent = "Play Music";
28-
} else {
29-
bgAudio.play().catch(() => {});
30-
musicBtn.textContent = "Stop Music";
31-
}
32-
}
20+
if (!musicStarted) {
21+
bgAudio.play().catch(() => {});
22+
musicStarted = true;
23+
musicBtn.textContent = "Stop Music";
24+
} else {
25+
if (!bgAudio.paused) {
26+
bgAudio.pause();
27+
musicBtn.textContent = "Play Music";
28+
} else {
29+
bgAudio.play().catch(() => {});
30+
musicBtn.textContent = "Stop Music";
31+
}
32+
}
3333
});
3434

3535
let playerScore = 0;
3636
let compScore = 0;
3737
function playGame(playerChoice) {
3838
const compChoice = choices[Math.floor(Math.random() * 3)];
3939
let result = "";
40-
if (playerChoice === compChoice) {
41-
result = "It's a Tie!";
42-
}
43-
else {
44-
switch (playerChoice) {
45-
case "Rock":
46-
if (compChoice === "Scissors") {
47-
result = "You Win!";
48-
} else {
49-
result = "You Lose!";
50-
}
51-
break;
52-
case "Paper":
53-
if (compChoice === "Rock") {
54-
result = "You Win!";
40+
if (playerChoice === compChoice) {
41+
result = "It's a Tie!";
5542
} else {
56-
result = "You Lose!";
57-
}
58-
break;
59-
case "Scissors":
60-
if (compChoice === "Paper") {
61-
result = "You Win!";
62-
} else {
63-
result = "You Lose!";
64-
}
65-
break;
66-
}
43+
switch (playerChoice) {
44+
case "Rock":
45+
if (compChoice === "Scissors") {
46+
result = "You Win!";
47+
} else {
48+
result = "You Lose!";
49+
}
50+
break;
51+
case "Paper":
52+
if (compChoice === "Rock") {
53+
result = "You Win!";
54+
} else {
55+
result = "You Lose!";
56+
}
57+
break;
58+
case "Scissors":
59+
if (compChoice === "Paper") {
60+
result = "You Win!";
61+
} else {
62+
result = "You Lose!";
63+
}
64+
break;
65+
}
6766
}
6867
playerDisplay.textContent = `Player: ${playerChoice} ${emojiMap[playerChoice]}`;
6968
compDisplay.textContent = `Computer: ${compChoice} ${emojiMap[compChoice]}`;
7069
resultDisplay.textContent = result;
7170
resultDisplay.classList.remove("green", "red", "yellow");
72-
switch(result){
73-
case "You Win!":
74-
resultDisplay.classList.add("green");
75-
playerScore++;
76-
playerScoreDisplay.textContent = playerScore;
71+
switch(result){
72+
case "You Win!":
73+
resultDisplay.classList.add("green");
74+
playerScore++;
75+
playerScoreDisplay.textContent = playerScore;
7776

78-
confetti({
79-
particleCount: 100,
80-
spread: 70,
81-
origin: { y: 0.6 }
82-
});
83-
winAudio.currentTime = 0;
84-
winAudio.play();
85-
break;
77+
confetti({
78+
particleCount: 100,
79+
spread: 70,
80+
origin: { y: 0.6 }
81+
});
82+
winAudio.currentTime = 0;
83+
winAudio.play();
84+
break;
8685

87-
case "You Lose!":
88-
resultDisplay.classList.add("red");
89-
compScore++;
90-
compScoreDisplay.textContent = compScore;
91-
loseAudio.currentTime = 0;
92-
loseAudio.play();
93-
break;
86+
case "You Lose!":
87+
resultDisplay.classList.add("red");
88+
compScore++;
89+
compScoreDisplay.textContent = compScore;
90+
loseAudio.currentTime = 0;
91+
loseAudio.play();
92+
break;
9493

95-
case "It's a Tie!":
96-
resultDisplay.classList.add("yellow");
97-
break;
98-
}
94+
case "It's a Tie!":
95+
resultDisplay.classList.add("yellow");
96+
break;
97+
}
9998
}

0 commit comments

Comments
 (0)