Skip to content

Commit a552f4a

Browse files
zpratikpathakzpratikpathak
authored
Merge pull request #6 from sandeepMcodeX/add-new-js-project
Thanks for the PR
2 parents cd0912a + ffcb77f commit a552f4a

File tree

8 files changed

+451
-0
lines changed

8 files changed

+451
-0
lines changed

‎27-rock-paper-scissor-game/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rock Paper Scissor Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="icons-container">
12+
<div class="rock-btn">Rock🪨</div>
13+
<div class="paper-btn">Paper📃</div>
14+
<div class="scissors-btn">Scissors✂️</div>
15+
</div>
16+
<div class="play-game">
17+
<div class="user-hand">
18+
<p>Your score (<span class="user-score">0</span>)</p>
19+
<div class="user hand-icon">🤜</div>
20+
</div>
21+
<div class="result">Start Playing!!</div>
22+
<div class="computer-hand">
23+
<p>Sandeep score (<span class="computer-score">0</span>)</p>
24+
<div class="computer hand-icon">🤛</div>
25+
</div>
26+
</div>
27+
<!-- Popup -->
28+
<div class="popup-overlay">
29+
<div class="popup-content">
30+
<h2 class="popup-title">Sandeep Wins 🤛</h2>
31+
<button class="popup-close-btn">Play Again</button>
32+
</div>
33+
</div>
34+
<!-- Audio -->
35+
<audio class="click-sound" src="./sounds/click.mp3" preload="auto"></audio>
36+
<audio class="shake-sound" src="./sounds/shake.mp3" preload="auto"></audio>
37+
<audio class="win-sound" src="./sounds/win.mp3" preload="auto"></audio>
38+
<audio class="lose-sound" src="./sounds/lose.mp3" preload="auto"></audio>
39+
</body>
40+
</html>

‎27-rock-paper-scissor-game/readme.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# ✊🤚✌️ Rock Paper Scissors Game
2+
3+
A fun **Rock–Paper–Scissors** game built with **HTML, CSS, and JavaScript**.
4+
Play against the computer, enjoy animations, and sound effects when you win or lose.
5+
6+
---
7+
8+
## 🚀 Features
9+
- 🎵 **Sound effects** for clicks, shakes, wins & losses
10+
- 🎮 **Score tracking** (first to 3 wins)
11+
- 🎭 **Hand shake animation** before revealing results
12+
- 🎉 **Popup overlay** when the game ends
13+
14+
---
15+
16+
## project
17+
18+
## ⚙️ How to Play
19+
1. Click **Rock**, **Paper**, or **Scissors**.
20+
2. The computer will make a random choice.
21+
3. First to reach 3 points wins the match.
22+
23+
---
24+
25+
## 📂 Project Structure
26+
```
27+
28+
├── index.html
29+
├── style.css
30+
├── script.js
31+
├── assets/
32+
│ ├── click.mp3
33+
│ ├── win.mp3
34+
│ ├── lose.mp3
35+
│ └── shake.mp3
36+
37+
```
38+
---
39+
40+
## 🛠️ Technologies
41+
- **HTML5**
42+
- **CSS3**
43+
- **JavaScript (Vanilla JS)**
44+
---
45+
## 🙌 Author
46+
Made with ❤️ by **Sandeep Maurya**

‎27-rock-paper-scissor-game/script.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
// Selected buttons and icons
2+
const rockBtn = document.querySelector('.rock-btn');
3+
const paperBtn = document.querySelector('.paper-btn');
4+
const scissorBtn = document.querySelector('.scissors-btn');
5+
const userHandIcon = document.querySelector('.user.hand-icon');
6+
const computerHandIcon = document.querySelector('.computer.hand-icon');
7+
const result = document.querySelector('.result');
8+
const userScore = document.querySelector('.user-score');
9+
const computerScore = document.querySelector('.computer-score');
10+
const handsIcons = document.querySelectorAll('.hand-icon');
11+
const gameButtons = document.querySelectorAll(
12+
'.rock-btn, .paper-btn, .scissors-btn'
13+
);
14+
15+
// PopupOverlay
16+
const popupOverlay = document.querySelector('.popup-overlay');
17+
const popupTitle = document.querySelector('.popup-title');
18+
const popupCloseBtn = document.querySelector('.popup-close-btn');
19+
20+
// Audio Elements
21+
const clickSound = document.querySelector('.click-sound');
22+
const shakeSound = document.querySelector('.shake-sound');
23+
const winSound = document.querySelector('.win-sound');
24+
const loseSound = document.querySelector('.lose-sound');
25+
26+
// Icons
27+
const rockIcon = '✊';
28+
const paperIcon = '🤚';
29+
const scissorIcon = '✌️';
30+
31+
// play sound
32+
function playSound(sound) {
33+
sound.currentTime = 0; // Reset to start so it can
34+
sound.play(); // Play the sound
35+
}
36+
37+
// Computer Choice Array
38+
const iconList = [rockIcon, paperIcon, scissorIcon];
39+
40+
function calculateResult(selectionIcon, winningIcon) {
41+
userHandIcon.innerText = '🤜';
42+
computerHandIcon.innerText = '🤛';
43+
result.innerText = '🙄';
44+
45+
//start shake animation
46+
userHandIcon.classList.add('shakeUserHands');
47+
computerHandIcon.classList.add('shakeComputerHands');
48+
49+
setTimeout(() => {
50+
userHandIcon.classList.remove('shakeUserHands');
51+
computerHandIcon.classList.remove('shakeComputerHands');
52+
53+
// show user choice
54+
userHandIcon.innerText = selectionIcon;
55+
const computerChoice = Math.floor(Math.random() * 3);
56+
computerHandIcon.innerText = iconList[computerChoice];
57+
58+
if (computerHandIcon.innerText === userHandIcon.innerText) {
59+
result.innerText = 'Draw';
60+
} else if (computerHandIcon.innerText === winningIcon) {
61+
result.innerText = 'You won!!';
62+
userScore.innerText = parseInt(userScore.innerText) + 1;
63+
} else {
64+
result.innerText = 'Sandeep Won!!';
65+
computerScore.innerText = parseInt(computerScore.innerText) + 1;
66+
}
67+
68+
checkScore();
69+
}, 3000);
70+
}
71+
72+
// check score
73+
function checkScore() {
74+
const userScoreValue = parseInt(userScore.textContent);
75+
const computerScoreValue = parseInt(computerScore.textContent);
76+
if (userScoreValue === 3) {
77+
// show popup
78+
showPopup('You Wins! 🎉');
79+
playSound(winSound);
80+
} else if (computerScoreValue === 3) {
81+
// show popup
82+
showPopup('Sandeep Wins! 😒');
83+
playSound(loseSound);
84+
}
85+
}
86+
function showPopup(message) {
87+
popupTitle.textContent = message;
88+
popupOverlay.classList.add('active');
89+
}
90+
function hidePopup() {
91+
popupOverlay.classList.remove('active');
92+
}
93+
function resetGame() {
94+
userScore.textContent = '0';
95+
computerScore.textContent = '0';
96+
hidePopup();
97+
}
98+
popupCloseBtn.addEventListener('click', resetGame);
99+
100+
handsIcons.forEach((hand) => {
101+
hand.addEventListener('animationstart', () => {
102+
playSound(shakeSound); // Play shake sound
103+
});
104+
});
105+
106+
gameButtons.forEach((btn) => {
107+
btn.addEventListener('click', () => {
108+
playSound(clickSound); // Play click sound
109+
});
110+
});
111+
112+
rockBtn.addEventListener('click', () => {
113+
calculateResult(rockIcon, scissorIcon);
114+
});
115+
paperBtn.addEventListener('click', () => {
116+
calculateResult(paperIcon, rockIcon);
117+
});
118+
scissorBtn.addEventListener('click', () => {
119+
calculateResult(scissorIcon, paperIcon);
120+
});

‎27-rock-paper-scissor-game/sounds/click.mp3‎

86.8 KB
Binary file not shown.

‎27-rock-paper-scissor-game/sounds/lose.mp3‎

68.4 KB
Binary file not shown.

‎27-rock-paper-scissor-game/sounds/shake.mp3‎

92.2 KB
Binary file not shown.

‎27-rock-paper-scissor-game/sounds/win.mp3‎

62 KB
Binary file not shown.

0 commit comments

Comments
 (0)