Skip to content

Commit 235cdf5

Browse files
satvikDesktopsatvikDesktop
committed
added rock paper scissors
1 parent e01caf1 commit 235cdf5

4 files changed

Lines changed: 212 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33

44
![forks](https://img.shields.io/github/forks/satvikDesktop/Javascript_Projects?color=yellow&style=flat-square)   ![issues](https://img.shields.io/github/issues/satvikDesktop/Javascript_Projects?color=yellow&style=flat-square)   ![stars](https://img.shields.io/github/stars/satvikDesktop/Javascript_Projects?color=yellow&style=flat-square)
55

6-
### javascript web development learning projects
6+
### vanilla javascript web development learning projects
77
<br>
88

99
## Contents
1010

1111
### 1. [Random Color Flipper](https://satvik.ninja/RandomColorFlipper/)
1212
### 2. [Counter](https://satvik.ninja/counter/)
13-
### 3. [ToDo List](https://satvik.ninja/todo_list/)
13+
### 3. [Todo List](https://satvik.ninja/todo_list/)
14+
### 3. [Rock Paper Scissors game](https://satvik.ninja/rock-paper-scissors/)

‎Rock Paper Scissors/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="icon" href="favicon.png">
9+
<title>Rock Papers Scissors</title>
10+
</head>
11+
<body>
12+
<div class="nav">
13+
<a href="https://satvik.ninja/" target="blank">
14+
built by satvik
15+
</a>
16+
</div>
17+
<div class="container">
18+
<h1>Pick :</h1>
19+
<div id="choice-overlay" onclick="off()"><div id="text1"></div><div id="text2"></div><div id="text3"></div></div>
20+
<center>
21+
<button class="R" onclick="onR()">✊</button>&nbsp;&nbsp;
22+
<button class="P"onclick="onS()">✌️</button>&nbsp;&nbsp;
23+
<button class="S"onclick="onP()">🖐</button>&nbsp;&nbsp;
24+
</center>
25+
</div>
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎Rock Paper Scissors/script.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
2+
const moves = ["✊", "✌️","🖐"]
3+
let selected_move
4+
5+
function computers_move(){
6+
7+
for (let i = 1; i < 3; i++) {
8+
9+
random = Math.floor(Math.random() * moves.length)
10+
selected_move=moves[random]
11+
}
12+
}
13+
14+
15+
var choices = document.getElementById('choice-overlay');
16+
17+
function onR() { //rock
18+
computers_move()
19+
document.getElementById("choice-overlay").style.display = "block";
20+
text1.innerHTML = "Your choice - ✊"
21+
text2.innerHTML = "Computer chose - " + selected_move
22+
if (moves[random] == "✌️")
23+
text3.innerHTML = "You won"
24+
else if (moves[random] == "🖐")
25+
text3.innerHTML = "Computer won"
26+
else
27+
text3.innerHTML = "Draw"
28+
effects()
29+
}
30+
function onS() { //scissors
31+
computers_move()
32+
document.getElementById("choice-overlay").style.display = "block";
33+
text1.innerHTML = "Your choice - ✌️"
34+
text2.innerHTML = "Computer chose - " + selected_move
35+
if (moves[random] == "✊")
36+
text3.innerHTML = "Computer won"
37+
else if (moves[random] == "🖐")
38+
text3.innerHTML = "You won"
39+
else
40+
text3.innerHTML = "Draw"
41+
effects()
42+
}
43+
function onP() { //paper
44+
computers_move()
45+
document.getElementById("choice-overlay").style.display = "block";
46+
text1.innerHTML = "Your choice - 🖐"
47+
text2.innerHTML = "Computer chose - " + selected_move
48+
49+
if (moves[random] == "✌️")
50+
text3.innerHTML = "Computer won"
51+
else if (moves[random] == "✊")
52+
text3.innerHTML = "You won"
53+
else
54+
text3.innerHTML = "Draw"
55+
effects()
56+
}
57+
58+
function off() {
59+
document.getElementById("choice-overlay").style.display = "none";
60+
}
61+
62+
function effects (){
63+
if (text3.textContent =="You won"){
64+
text3.textContent += " 🎉"
65+
text3.style.color = "#42ff5f"
66+
}
67+
if (text3.textContent == "Computer won"){
68+
text3.textContent+= " 🤖"
69+
text3.style.color = "#ff4242"
70+
}
71+
if (text3.textContent == "Draw"){
72+
text3.textContent+= " 😐"
73+
text3.style.color = "#8c8c8c"
74+
}
75+
}
76+

‎Rock Paper Scissors/styles.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
2+
body{
3+
background-color: #ffffff;
4+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffc83d' fill-opacity='0.98' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
5+
}
6+
.container {
7+
display: flex;
8+
flex-flow: column wrap;
9+
margin-left: 20%;
10+
margin-right: 20%;
11+
margin-top: 5%;
12+
}
13+
@media only screen and (max-width: 600px) {
14+
.container{
15+
margin-left: 10%;
16+
margin-right: 10%;
17+
margin-top: 30vh;
18+
}
19+
}
20+
button{
21+
font-size: 6vw;
22+
text-align: center;
23+
background-color:rgba(255, 255, 255, 0) ;
24+
border: 0px;
25+
}
26+
27+
@media only screen and (max-width: 600px) {
28+
button {
29+
font-size: 18vw;
30+
}
31+
}
32+
33+
button:active {
34+
transform: scale(0.9);
35+
}
36+
h1{
37+
font-family: 'Bangers', cursive;
38+
text-align: center;
39+
font-size:5vw;
40+
color: #000000;
41+
}
42+
@media only screen and (max-width: 600px) {
43+
h1{
44+
font-size: 10vw;
45+
}
46+
}
47+
48+
#choice-overlay {
49+
position: fixed;
50+
/* Sit on top of the page content */
51+
display: none;
52+
/* Hidden by default */
53+
width: 100%;
54+
/* Full width (cover the whole page) */
55+
height: 100%;
56+
/* Full height (cover the whole page) */
57+
top: 0;
58+
left: 0;
59+
right: 0;
60+
bottom: 0;
61+
background-color: rgba(0, 0, 0, 0.88);
62+
/* Black background with opacity */
63+
z-index: 2;
64+
/* Specify a stack order in case you're using a different order for other elements */
65+
cursor: pointer;
66+
/* Add a pointer on hover */
67+
}
68+
#text1,#text2{
69+
font-family: 'Bangers', cursive;
70+
font-size: 5vw;
71+
text-align: center;
72+
color: #ffffff;
73+
margin-top:5%;
74+
}
75+
#text3{
76+
font-family: 'Bangers', cursive;
77+
font-size: 5vw;
78+
text-align: center;
79+
color: #ffffff; /* changed by javascript */
80+
margin-top: 5%;
81+
}
82+
@media only screen and (max-width: 600px) {
83+
#text1,#text2{
84+
font-size: 10vw;
85+
margin-top: 20%;
86+
}
87+
#text3{
88+
font-size: 10vw;
89+
margin-top: 20%;
90+
}
91+
}
92+
a{
93+
font-family: 'Bangers', cursive;
94+
font-size: 1.3vw;
95+
color: #000000;
96+
text-decoration: none;
97+
}
98+
a:hover{
99+
opacity:0.7;
100+
}
101+
@media only screen and (max-width: 600px) {
102+
a{
103+
font-size: 5vw;
104+
}
105+
}

0 commit comments

Comments
 (0)