Skip to content

Commit fa23cd3

Browse files
himanshuherehimanshuhere
authored
Add files via upload
1 parent 5192625 commit fa23cd3

File tree

1 file changed

+338
-0
lines changed

1 file changed

+338
-0
lines changed

‎index.html

+338
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
5+
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
6+
<meta charset="utf-8">
7+
<title>Rock Paper Scissors Shoot!</title>
8+
<style>
9+
10+
.choose img {
11+
width: 150px;
12+
margin: 20px;
13+
}
14+
#result {color:red}
15+
#question{
16+
widows: max-content;
17+
}
18+
19+
20+
21+
#score{
22+
color: chocolate;
23+
font-size: 25px;
24+
}
25+
.sc{
26+
color: #70c9d4;
27+
}
28+
.img-all{
29+
border-radius: 50%;
30+
border: solid #D24D57; 3px;
31+
padding: 10px;
32+
}
33+
#div-choose{
34+
width: max-content;
35+
height: max-content;
36+
37+
}
38+
table{
39+
height: max-content;
40+
width: 100%;
41+
color: white;
42+
position: relative;
43+
top: 14px;
44+
left: 231px;
45+
}
46+
47+
body {
48+
font-family: 'Lato', sans-serif;
49+
background: #353535;
50+
color: #FFF;
51+
}
52+
.jumbotron h1 {
53+
color: #353535;
54+
}
55+
footer {
56+
margin-bottom: 0 !important;
57+
margin-top: 80px;
58+
}
59+
footer p {
60+
margin: 0;
61+
padding: 0;
62+
}
63+
span.icon {
64+
margin: 0 5px;
65+
color: #D64541;
66+
}
67+
h2 {
68+
color: #BDC3C7;
69+
text-transform: uppercase;
70+
letter-spacing: 1px;
71+
}
72+
.mrng-60-top {
73+
margin-top: 60px;
74+
}
75+
76+
77+
78+
/* Global Button Styles */
79+
a.animated-button:link, a.animated-button:visited {
80+
position: relative;
81+
display: block;
82+
margin: 30px auto 0;
83+
padding: 14px 15px;
84+
color: #fff;
85+
font-size:14px;
86+
font-weight: bold;
87+
text-align: center;
88+
text-decoration: none;
89+
text-transform: uppercase;
90+
overflow: hidden;
91+
letter-spacing: .08em;
92+
border-radius: 0;
93+
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
94+
-webkit-transition: all 1s ease;
95+
-moz-transition: all 1s ease;
96+
-o-transition: all 1s ease;
97+
transition: all 1s ease;
98+
}
99+
a.animated-button:link:after, a.animated-button:visited:after {
100+
content: "";
101+
position: absolute;
102+
height: 0%;
103+
left: 50%;
104+
top: 50%;
105+
width: 150%;
106+
z-index: -1;
107+
-webkit-transition: all 0.75s ease 0s;
108+
-moz-transition: all 0.75s ease 0s;
109+
-o-transition: all 0.75s ease 0s;
110+
transition: all 0.75s ease 0s;
111+
}
112+
a.animated-button:link:hover, a.animated-button:visited:hover {
113+
color: #FFF;
114+
text-shadow: none;
115+
}
116+
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
117+
height: 450%;
118+
}
119+
a.animated-button:link, a.animated-button:visited {
120+
position: relative;
121+
display: block;
122+
margin: 30px auto 0;
123+
padding: 14px 15px;
124+
color: #fff;
125+
font-size:14px;
126+
border-radius: 0;
127+
font-weight: bold;
128+
text-align: center;
129+
text-decoration: none;
130+
text-transform: uppercase;
131+
overflow: hidden;
132+
letter-spacing: .08em;
133+
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
134+
-webkit-transition: all 1s ease;
135+
-moz-transition: all 1s ease;
136+
-o-transition: all 1s ease;
137+
transition: all 1s ease;
138+
}
139+
140+
/* Victoria Buttons */
141+
142+
a.animated-button.victoria-one {
143+
border: 2px solid #D24D57;
144+
}
145+
a.animated-button.victoria-one:after {
146+
background: #D24D57;
147+
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
148+
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
149+
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
150+
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
151+
}
152+
a.animated-button.victoria-two {
153+
border: 2px solid #D24D57;
154+
}
155+
a.animated-button.victoria-two:after {
156+
background: #D24D57;
157+
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
158+
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
159+
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
160+
transform: translateX(-50%) translateY(-50%) rotate(25deg);
161+
}
162+
a.animated-button.victoria-three {
163+
border: 2px solid #D24D57;
164+
}
165+
a.animated-button.victoria-three:after {
166+
background: #D24D57;
167+
opacity: .5;
168+
-moz-transform: translateX(-50%) translateY(-50%);
169+
-ms-transform: translateX(-50%) translateY(-50%);
170+
-webkit-transform: translateX(-50%) translateY(-50%);
171+
transform: translateX(-50%) translateY(-50%);
172+
}
173+
a.animated-button.victoria-three:hover:after {
174+
height: 140%;
175+
opacity: 1;
176+
}
177+
a.animated-button.victoria-four {
178+
border: 2px solid #D24D57;
179+
}
180+
a.animated-button.victoria-four:after {
181+
background: #D24D57;
182+
opacity: .5;
183+
-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
184+
-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
185+
-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
186+
transform: translateY(-50%) translateX(-50%) rotate(90deg);
187+
}
188+
a.animated-button.victoria-four:hover:after {
189+
opacity: 1;
190+
height: 600% !important;
191+
}
192+
</style>
193+
194+
195+
</head>
196+
197+
<body>
198+
<!-- Div-Head-Content -->
199+
<div class="choose" align="center">
200+
<div id="content">
201+
<div class="col-md-3 col-sm-3 col-xs-6" id="question" onclick="reload()">
202+
<a href="#" class="btn btn-sm animated-button victoria-two">Rock - Paper - Scissors</a>
203+
</div>
204+
</div>
205+
206+
<!-- Div Main -->
207+
<div id="div-main">
208+
<table>
209+
<tr>
210+
<td id="first-td">
211+
<h2 class="table-content">You Selected :</h2>
212+
<div id="first-box">
213+
214+
</div>
215+
216+
</td>
217+
<td id="second-td">
218+
<h2 class="table-content">Computer Selected :</h2>
219+
<div id="second-box">
220+
221+
</div>
222+
</td>
223+
</tr>
224+
</table>
225+
</div>
226+
<!-- Div choose -->
227+
<div id="div-choose">
228+
<h2 id="result"></h2>
229+
<h2 id="score">You <span id="playerScore" class="sc">0</span> - <span id="computerScore" class="sc">0</span> Computer</h2>
230+
231+
<img alt="Rock" src="rock.png" id="rock" class="img-all">
232+
<img alt="Paper" src="paper.png" id="paper" class="img-all">
233+
<img alt="Scissors" src="scissors.png" id="scissors" class="img-all">
234+
</div>
235+
</div>
236+
237+
238+
<!-- Script -->
239+
<script>
240+
$(document).ready(function(){
241+
$(function(){
242+
// function reload(){
243+
// location.reload();
244+
// }
245+
$("#question").click(function() {
246+
$("#question").load("index.php")
247+
})
248+
var computerScore=0,
249+
playerScore=0;
250+
251+
function setText(txt){
252+
$("#playerScore").text(playerScore);
253+
$("#computerScore").text(computerScore);
254+
$("#result").text(txt);
255+
}
256+
257+
function makeComputerChoice(){
258+
var computerChoice = "";
259+
var r = Math.random();
260+
if (r < .33) {
261+
computerChoice = "rock";
262+
// $("#second-box").setAttribute("src", "rock.png");
263+
} else if (r < .66) {
264+
computerChoice = "paper";
265+
// $("#second-box").setAttribute("src", "paper.png");
266+
} else {
267+
computerChoice = "scissors";
268+
// $("#second-box").setAttribute("src", "scissors.png");
269+
}
270+
271+
return computerChoice;
272+
}
273+
274+
275+
function makeUserChoice(userChoice){
276+
var computerChoiceprev = makeComputerChoice();
277+
var computerChoice = computerChoiceprev.trim();
278+
var outcome = "";
279+
if(document.getElementById("first-box").innerHTML!="")
280+
{
281+
document.getElementById("first-box").innerHTML="";
282+
}
283+
if(document.getElementById("second-box").innerHTML!="")
284+
{
285+
document.getElementById("second-box").innerHTML="";
286+
287+
}
288+
var img1=document.createElement("img");
289+
img1.src=userChoice+".png";
290+
img1.id="img-main1";
291+
document.getElementById("first-box").appendChild(img1);
292+
293+
var img=document.createElement("img");
294+
img.src=computerChoice+".png";
295+
img.id="img-main2";
296+
document.getElementById("second-box").appendChild(img);
297+
298+
if (userChoice == computerChoice) {
299+
outcome="Tie!";
300+
}
301+
else if (userChoice == "rock") {
302+
if (computerChoice == "scissors") {
303+
outcome="You win!"; playerScore=playerScore+1;
304+
} else {
305+
outcome="You lose."; computerScore=computerScore+1;
306+
};
307+
}
308+
else if (userChoice == "paper") {
309+
if (computerChoice == "rock") {
310+
outcome="You win!"; playerScore=playerScore+1;
311+
} else {
312+
outcome="You lose."; computerScore=computerScore+1;
313+
};
314+
} else if (userChoice == "scissors") {
315+
if (computerChoice == "paper") {
316+
outcome="You win!"; playerScore=playerScore+1;
317+
} else {
318+
outcome="You lose"; computerScore=computerScore+1;
319+
};
320+
};
321+
setText(userChoice+" vs "+computerChoice+" = "+outcome);
322+
};
323+
324+
//add event listeners:
325+
$('#rock').click(function() {
326+
makeUserChoice("rock");
327+
});
328+
$('#paper').click(function() {
329+
makeUserChoice("paper");
330+
});
331+
$('#scissors').click(function() {
332+
makeUserChoice("scissors");
333+
});
334+
});
335+
});
336+
</script>
337+
</body>
338+
</html>

0 commit comments

Comments
 (0)