Skip to content

Commit e15d4c5

Browse files
NaeuCodeNaeuCode
committed
m
1 parent b140bba commit e15d4c5

File tree

4 files changed

+264
-0
lines changed

4 files changed

+264
-0
lines changed

‎Day #38 - Rock Paper Scissors/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Rock Paper Scissors Game | NaeuCode YouTube Channel</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<div class="choices">
16+
<div class="user-choice">
17+
<i class="fa-regular fa-hand-back-fist"></i>
18+
</div>
19+
<div class="computer-choice">
20+
<i class="fa-regular fa-hand-back-fist"></i>
21+
</div>
22+
<h4 class="result">Let's play</h4>
23+
</div>
24+
25+
<div class="btns">
26+
<div class="rock" onclick="play('rock',this)">
27+
<i class="fa-regular fa-hand-back-fist"></i>
28+
<p>Rock</p>
29+
</div>
30+
<div class="paper" onclick="play('paper',this)">
31+
<i class="fa-regular fa-hand"></i>
32+
<p>Paper</p>
33+
</div>
34+
<div class="scissor" onclick="play('scissor',this)">
35+
<i class="fa-regular fa-hand-scissors"></i>
36+
<p>Scissor</p>
37+
</div>
38+
</div>
39+
40+
</div>
41+
42+
<script src="script.js"></script>
43+
44+
</body>
45+
46+
</html>

‎Day #38 - Rock Paper Scissors/script.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// Selecting DOM elements with class names
2+
const userChoiceIcon = document.querySelector('.user-choice');
3+
const computerChoiceIcon = document.querySelector('.computer-choice');
4+
const resultText = document.querySelector('.result');
5+
6+
let userIcon, computerIcon;
7+
8+
// Function to initiate the game when the user makes a choice
9+
const play = (userChoice, elem) => {
10+
// Adding animation classes to user and computer choice icons
11+
userChoiceIcon.classList.add('user-icon-animate');
12+
computerChoiceIcon.classList.add('computer-icon-animate');
13+
// Displaying a "Wait...." message
14+
resultText.innerHTML = 'Wait....'
15+
16+
// Setting a timeout to simulate a delay (3 seconds) before getting the result
17+
setTimeout(() => {
18+
getResult(userChoice, elem);
19+
}, 3000);
20+
}
21+
22+
// Function to determine the game result based on user and computer choices
23+
const getResult = (userChoice, elem) => {
24+
// Removing animation classes from user and computer choice icons
25+
[userChoiceIcon, computerChoiceIcon].forEach(element =>
26+
element.classList.remove('user-icon-animate', 'computer-icon-animate'));
27+
28+
29+
// Generating a random choice for the computer: rock, paper, or scissor
30+
const randomChoices = ['rock', 'paper', 'scissor'];
31+
const computerChoice = randomChoices[Math.floor(Math.random() * randomChoices.length)];
32+
33+
34+
// Defining HTML icons for rock, paper, and scissor
35+
let rockIcon = '<i class="fa-regular fa-hand-back-fist"></i>';
36+
let paperIcon = '<i class="fa-regular fa-hand"></i>';
37+
let scissorIcon = '<i class="fa-regular fa-hand-scissors"></i>';
38+
39+
// Mapping user and computer choices to their respective icons
40+
41+
// userIcon = userChoice == 'rock' ? rockIcon : userChoice == 'paper' ? paperIcon : userChoice == 'scissor' ? scissorIcon : '';
42+
// computerIcon = computerChoice == 'rock' ? rockIcon : computerChoice == 'paper' ? paperIcon : computerChoice == 'scissor' ? scissorIcon : '';
43+
44+
const iconMap = {
45+
'rock': rockIcon,
46+
'paper': paperIcon,
47+
'scissor': scissorIcon
48+
};
49+
50+
userIcon = iconMap[userChoice] || '';
51+
computerIcon = iconMap[computerChoice] || '';
52+
53+
54+
// Updating the HTML content of user and computer choice icons
55+
userChoiceIcon.innerHTML = userIcon;
56+
computerChoiceIcon.innerHTML = computerIcon;
57+
58+
// Define an object 'outcomes' to represent possible outcomes based on user and computer choices
59+
const outcomes = {
60+
rock: { rock: 'Draw', paper: 'Cpu', scissor: 'You' },
61+
paper: { rock: 'You', paper: 'Draw', scissor: 'Cpu' },
62+
scissor: { rock: 'Cpu', paper: 'You', scissor: 'Draw' }
63+
};
64+
65+
// Access the outcome value based on userChoice and computerChoice from the 'outcomes' object
66+
const outcomeValue = outcomes[userChoice][computerChoice];
67+
68+
// Display the result message in the HTML
69+
// If userChoice is equal to computerChoice, it's a draw; otherwise, display the winner
70+
resultText.innerHTML = userChoice === computerChoice ? 'Draw' : `${outcomeValue} Won!!`;
71+
}

‎Day #38 - Rock Paper Scissors/style.css

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
background: #531414;
11+
font-family: 'poppins', sans-serif;
12+
}
13+
14+
.container {
15+
height: 280px;
16+
width: 330px;
17+
background: white;
18+
position: absolute;
19+
top: 50%;
20+
left: 50%;
21+
transform: translate(-50%, -50%);
22+
border-radius: 7px;
23+
}
24+
25+
.btns {
26+
height: 100px;
27+
width: 100%;
28+
position: absolute;
29+
bottom: 0;
30+
}
31+
32+
.btns div {
33+
height: 80px;
34+
width: 80px;
35+
float: left;
36+
text-align: center;
37+
cursor: pointer;
38+
margin-left: 10px;
39+
position: relative;
40+
left: 25px;
41+
}
42+
43+
.btns div i {
44+
font-size: 33px;
45+
color: #8a8a8a;
46+
margin-top: 5px;
47+
}
48+
49+
.btns div p {
50+
font-size: 11px;
51+
position: relative;
52+
top: 4px;
53+
color: #8a8a8a;
54+
}
55+
56+
.btns div:hover i,
57+
.btns div:hover p {
58+
color: #000;
59+
transition: all .2s ease-in-out;
60+
}
61+
62+
.choices {
63+
height: 130px;
64+
width: 100%;
65+
padding: 30px;
66+
display: flex;
67+
align-items: center;
68+
}
69+
70+
.choices div {
71+
font-size: 75px;
72+
color: #2d2828;
73+
}
74+
75+
/* Rotate the first child of .choices 90 degrees clockwise */
76+
.choices div:nth-child(1) {
77+
transform: rotate(90deg);
78+
transition: all .2s;
79+
}
80+
81+
/* Rotate the second child of .choices 270 degrees counterclockwise and flip horizontally */
82+
.choices div:nth-child(2) {
83+
transform: rotate(270deg) scaleX(-1);
84+
position: absolute;
85+
right: 30px;
86+
transition: all .2s;
87+
}
88+
89+
/* Rotate the Scissors icon for user choice */
90+
.user-choice .fa-hand-scissors {
91+
transform: rotate(-270deg) scaleY(-1);
92+
}
93+
94+
/* Rotate and flip the Scissors icon for computer choice */
95+
.computer-choice .fa-hand-scissors {
96+
transform: rotate(-80deg) scaleX(-1);
97+
}
98+
99+
/* Style for the heading inside .choices */
100+
.result {
101+
position: absolute;
102+
left: 50%;
103+
transform: translate(-50%, -50%);
104+
font-size: 16px;
105+
top: 50%;
106+
}
107+
108+
/* Apply animation to user choice icon */
109+
.user-choice.user-icon-animate {
110+
animation: userIcon 2s linear infinite;
111+
}
112+
113+
/* Apply animation to computer choice icon */
114+
.computer-choice.computer-icon-animate {
115+
animation: computerIcon 2s linear infinite;
116+
}
117+
118+
/* Keyframes animation for user choice icon */
119+
@keyframes userIcon {
120+
0% {
121+
transform: rotate(50deg);
122+
}
123+
124+
50% {
125+
transform: rotate(125deg);
126+
}
127+
128+
100% {
129+
transform: rotate(50deg);
130+
}
131+
}
132+
133+
/* Keyframes animation for computer choice icon */
134+
@keyframes computerIcon {
135+
0% {
136+
transform: rotate(-50deg) scaleX(-1);
137+
}
138+
139+
50% {
140+
transform: rotate(-125deg) scaleX(-1);
141+
}
142+
143+
100% {
144+
transform: rotate(-50deg) scaleX(-1);
145+
}
146+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,4 @@ Here we have list of projects:
4848
35. Random Joke Generator
4949
36. Particles Portfolio
5050
37. Product Card
51+
38. Rock Paper Scissors

0 commit comments

Comments
 (0)