Skip to content

Commit e636d5a

Browse files
marleyDipmarleyDip
committed
DOM, Function, Array, Condition
1 parent 43cc777 commit e636d5a

File tree

6 files changed

+191
-0
lines changed

6 files changed

+191
-0
lines changed

‎Projects/StonePaperScissors/app.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
let userScore = 0;
2+
let compScore = 0;
3+
4+
const choices = document.querySelectorAll(".choice");
5+
const msg = document.querySelector("#msg");
6+
7+
const userScorePara = document.querySelector("#user-score");
8+
const compScorePara = document.querySelector("#comp-score");
9+
10+
const generateComputerChoice = () => {
11+
let options = ["rock", "paper", "scissors"];
12+
const randomIds = Math.floor(Math.random() * 3);
13+
14+
return options[randomIds];
15+
};
16+
17+
drawGame = () => {
18+
console.log("Game was draw.");
19+
msg.innerText = "Game was Draw. Play Again";
20+
msg.style.backgroundColor = "#081b31";
21+
};
22+
23+
const showWinner = (userWin, userChoice, compChoice) => {
24+
if (userWin) {
25+
console.log("You win!");
26+
27+
userScore++;
28+
userScorePara.innerText = userScore;
29+
30+
msg.innerText = `You Won! Your ${userChoice} beats ${compChoice}`;
31+
32+
msg.style.backgroundColor = "green";
33+
} else {
34+
console.log("You lose!");
35+
36+
compScore++;
37+
compScorePara.innerText = compScore;
38+
39+
msg.innerText = `You Lose! ${compChoice} beats Your ${userChoice}`;
40+
41+
msg.style.backgroundColor = "red";
42+
}
43+
};
44+
45+
const playGame = (userChoice) => {
46+
console.log("User choice = ", userChoice);
47+
// generate computer choice
48+
const compChoice = generateComputerChoice();
49+
console.log("Computer choice = ", compChoice);
50+
51+
if (userChoice === compChoice) {
52+
// draw game
53+
drawGame();
54+
} else {
55+
let userWin = true;
56+
57+
if (userChoice === "rock") {
58+
//scissors, paper
59+
userWin = compChoice === "paper" ? false : true;
60+
} else if (userChoice === "paper") {
61+
// rock, scissors
62+
userWin = compChoice === "scissors" ? false : true;
63+
} else {
64+
// rock, paper
65+
userWin = compChoice === "rock" ? false : true;
66+
}
67+
showWinner(userWin, userChoice, compChoice);
68+
}
69+
};
70+
71+
choices.forEach((choice) => {
72+
//console.log(choice);
73+
74+
choice.addEventListener("click", () => {
75+
const userChoice = choice.getAttribute("id");
76+
//console.log("Choice was Clicked", userChoice);
77+
playGame(userChoice);
78+
});
79+
});

‎Projects/StonePaperScissors/images/paper.png‎

55.2 KB
Loading

‎Projects/StonePaperScissors/images/rock.png‎

48 KB
Loading

‎Projects/StonePaperScissors/images/scissors.png‎

49.1 KB
Loading

‎Projects/StonePaperScissors/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
7+
<title>Rock Paper Scissors Game</title>
8+
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
12+
<body>
13+
<h1>Rock Paper Scissors</h1>
14+
<div class="choices">
15+
<div class="choice" id="rock">
16+
<img src="./images/rock.png" />
17+
</div>
18+
19+
<div class="choice" id="paper">
20+
<img src="./images/paper.png" />
21+
</div>
22+
23+
<div class="choice" id="scissors">
24+
<img src="./images/scissors.png" />
25+
</div>
26+
</div>
27+
28+
<div class="score-board">
29+
<div class="score">
30+
<p id="user-score">0</p>
31+
<p>You</p>
32+
</div>
33+
<div class="score">
34+
<p id="comp-score">0</p>
35+
<p>Comp</p>
36+
</div>
37+
</div>
38+
39+
<div class="msg-container">
40+
<p id="msg">Play your move</p>
41+
</div>
42+
43+
<script src="app.js"></script>
44+
</body>
45+
</html>

‎Projects/StonePaperScissors/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
text-align: center;
5+
}
6+
7+
h1 {
8+
background-color: #081b31;
9+
color: #fff;
10+
height: 5rem;
11+
line-height: 5rem;
12+
}
13+
14+
.choice {
15+
height: 165px;
16+
width: 165px;
17+
border-radius: 50%;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
23+
.choice:hover {
24+
cursor: pointer;
25+
background-color: #081b31;
26+
}
27+
28+
img {
29+
height: 150px;
30+
width: 150px;
31+
object-fit: cover;
32+
border-radius: 50%;
33+
}
34+
35+
.choices {
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
gap: 3rem;
40+
margin-top: 4rem;
41+
}
42+
43+
.score-board {
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
font-size: 2rem;
48+
margin-top: 3rem;
49+
gap: 5rem;
50+
}
51+
52+
#user-score, #comp-score {
53+
font-size: 4rem;
54+
}
55+
56+
.msg-container {
57+
margin-top: 5rem;
58+
}
59+
60+
#msg {
61+
background-color: #081b31;
62+
color: #fff;
63+
font-size: 4rem;
64+
display: inline;
65+
padding: 1rem;
66+
border-radius: 1rem;
67+
}

0 commit comments

Comments
 (0)