Skip to content

Commit 9d74355

Browse files
CodingDashUUCodingDashUU
authored
Add files via upload
Release of Files for the first time.
1 parent 2de49e4 commit 9d74355

File tree

6 files changed

+159
-0
lines changed

6 files changed

+159
-0
lines changed

‎RPS/RPS.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="RPSstyle.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Rock Paper Scissors</title>
8+
</head>
9+
<body>
10+
<h1>ROCK PAPER SCISSORS</h1>
11+
<h2>Choose your options:</h2>
12+
<img src="paper.png" alt="paper" id="paper">
13+
<img src="rock.png" alt="rock" id="rock">
14+
<img src="scissors.png" alt="scissors" id="scissors"> <br><br><br>
15+
<button id="submit">Lock In</button>
16+
<p id="message">You chose:</p><p id="chose"></p>
17+
<p id="result">Result:</p>
18+
<div id="scores">
19+
<p id="pscore">Player Score: 0</p>
20+
<p id="Cscore">AI Score: 0</p>
21+
</div>
22+
<script src="RPScript.js"></script>
23+
</body>
24+
</html>

‎RPS/RPScript.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const paper = document.getElementById("paper");
2+
const rock = document.getElementById("rock");
3+
const scissors = document.getElementById("scissors");
4+
const submit = document.getElementById("submit");
5+
const result = document.getElementById("result");
6+
const chose = document.getElementById("chose");
7+
const playerscore = document.getElementById("pscore")
8+
const computerscore = document.getElementById("Cscore")
9+
let playerV = 0;
10+
let computerV = 0;
11+
let choice;
12+
13+
const computer = ["rock","paper","scissors"];
14+
15+
paper.addEventListener("click", function(event){
16+
paper.classList.add("selected");
17+
rock.classList.remove("selected");
18+
scissors.classList.remove("selected");
19+
submit.classList.add("canSubmit");
20+
choice = "paper";
21+
22+
})
23+
rock.addEventListener("click", function(event){
24+
paper.classList.remove("selected");
25+
rock.classList.add("selected");
26+
scissors.classList.remove("selected");
27+
submit.classList.add("canSubmit");
28+
choice = "rock";
29+
})
30+
scissors.addEventListener("click", function(event){
31+
paper.classList.remove("selected");
32+
rock.classList.remove("selected");
33+
scissors.classList.add("selected");
34+
submit.classList.add("canSubmit");
35+
choice = "scissors";
36+
})
37+
38+
submit.onclick = function(){
39+
chose.textContent = choice;
40+
result.textContent = "Result:";
41+
let num = Math.floor(Math.random() * (2 - 0 + 1) + 0)
42+
let AIchoice = computer[num];
43+
44+
if(AIchoice == choice){
45+
result.textContent += " It is a tie!"
46+
result.style.color = "orange";
47+
computerV += 0.5;
48+
playerV += 0.5;
49+
}
50+
else if(AIchoice == "rock" && choice == "scissors"){
51+
result.textContent += " AI chose rock! You lose!"
52+
result.style.color = "red";
53+
computerV += 1;
54+
}
55+
else if(AIchoice == "rock" && choice == "paper"){
56+
result.textContent += " AI chose rock! You win!"
57+
result.style.color = "green";
58+
playerV += 1;
59+
}
60+
else if(AIchoice == "paper" && choice == "scissors"){
61+
result.textContent += " AI chose paper! You win!"
62+
result.style.color = "green";
63+
playerV += 1;
64+
}
65+
else if(AIchoice == "paper" && choice == "rock"){
66+
result.textContent += " AI chose paper! You lose!"
67+
result.style.color = "red";
68+
computerV += 1;
69+
}
70+
else if(AIchoice == "scissors" && choice == "rock"){
71+
result.textContent += " AI chose scissors! You win!"
72+
result.style.color = "green";
73+
playerV += 1;
74+
}
75+
else if(AIchoice == "scissors" && choice == "paper"){
76+
result.textContent += " AI chose scissors! You lose!"
77+
result.style.color = "red";
78+
computerV += 1;
79+
}
80+
if(computerV == playerV){
81+
computerscore.style.color = "orange"
82+
playerscore.style.color = "orange"
83+
}
84+
else if(computerV > playerV){
85+
computerscore.style.color = "green"
86+
playerscore.style.color = "red"
87+
}
88+
else if(computerV < playerV){
89+
computerscore.style.color = "red"
90+
playerscore.style.color = "green"
91+
}
92+
93+
paper.classList.remove("selected");
94+
rock.classList.remove("selected");
95+
scissors.classList.remove("selected");
96+
submit.classList.remove("canSubmit");
97+
choice = ""
98+
99+
computerscore.textContent = `AI Score: ${computerV} `
100+
playerscore.textContent = `Player Score: ${playerV} `
101+
}

‎RPS/RPSstyle.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.selected{
2+
transform: scale(1.2,1.2);
3+
background-color: hsl(190, 100%, 80%);
4+
}
5+
#submit{
6+
width: 100px;
7+
height: 50px;
8+
}
9+
.canSubmit{
10+
background-color: hsl(120, 83%, 63%);
11+
}
12+
#result,#message{
13+
font-size: 3em;
14+
}
15+
#paper,#rock,#scissors{
16+
border: 2px,solid;
17+
margin: 20px;
18+
19+
}
20+
#chose{
21+
font-size: 3em;
22+
color: hsl(190, 100%, 80%);
23+
border: 4px solid black;
24+
text-align: center;
25+
}
26+
#scores{
27+
font-size: 3em;
28+
}
29+
body{
30+
border: 2px solid;
31+
}
32+
p{
33+
font-family: 'Courier New', Courier, monospace;
34+
}

‎RPS/paper.png‎

21 KB
Loading

‎RPS/rock.png‎

51.8 KB
Loading

‎RPS/scissors.png‎

21.7 KB
Loading

0 commit comments

Comments
 (0)