-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (137 loc) · 5.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Ro Sham Bo">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Surbhi Singh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<link rel="shortcut icon" type="image/png" href="bg.jpg"/>
<link href='https://fonts.googleapis.com/css?family=Unica One' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="web.css">
<title> Ro Sham Bo</title>
<body bgcolor=" #e6d9f2" >
<h1 class = "Heading"> Ro.Sham.Bo</h1>
<hr class = "firsthr">
<input class = "play rock" type="image" onclick="play('rock')" src="C:\xampp\htdocs\RoShamBo\rock.jpg" alt="Rock">
<input class = "play paper" type="image" onclick="play('paper')" src="C:\xampp\htdocs\RoShamBo\paper.jpeg" alt="Paper">
<input class = "play scissors" type="image" onclick="play('scissors')" src="C:\xampp\htdocs\RoShamBo\scissors.jpeg" alt="Scissors">
<footer class = "feedbox">
<div class="userScore">Your score:<span id="wins">0 </span></div>
<div class="computerScore">Computers score:<span id="loses">0 </span></div>
<p><span class = "feed1" id="player"></span> <span class = "feed2" id="opponent"></span></p>
<h2 id="results"></h2>
<input class = "help" id = "userHelp" type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Lol_question_mark.png" alt="Help">
<div id="gameHelp" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1 class = "Modal_text"><u>How to play</u></h1>
<hr>
<p> Ro.Sham.Bo is a game of <b>Probability</b> in which the player chooses an object to combat the computers object.The player to reach score 3 first, becomes the winner. </p>
<p><u><b>Rock - </b></u> Rock breaks the scissor and hence wins,but it is wrapped and defeated by the paper.</p>
<p><u><b>Paper - </b></u> Paper wraps the rock and wins, but it gets cut by scissor.</p>
<p><u><b>Scissors - </b></u> Scissor wins against paper by cutting.</p>
<hr>
<p> Ro.Sham.Bo by Surbhi Singh,2018.</p>
</div>
</div>
</footer>
<script>
var loses = 0;
var wins = 0;
var play = function(userChoice) {
document.getElementById("player").innerHTML="";
document.getElementById("opponent").innerHTML="";
document.getElementById("results").innerHTML="";
if (userChoice == "rock" || userChoice == "paper" || userChoice == "scissors") {
document.getElementById("player").innerHTML='You chose' + ' ' + userChoice + '.';
} else if (userChoice == "rope") {
document.getElementById("player").innerHTML='You chose' + ' ' + userChoice + '.';
} else {
document.getElementById("player").innerHTML="That is not a valid choice, try again.";
return false;
}
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "paper";
} else if(computerChoice <= 0.67) {
computerChoice = "rock";
} else {
computerChoice = "scissors"} ;
document.getElementById("opponent").innerHTML=' The computer chose ' + ' ' + computerChoice + '.';
var compare = function (choice1,choice2) {
if (choice1 == choice2) {
return "The result is a tie!";
} else if (choice1 == "rock"){
if (choice2 =="scissors") {
wins++;
return "Rock beats scissors, you win";
} else {
loses++;
return "Scissors beats paper, you lose";
}
} else if (choice1 == "paper") {
if (choice2 == "rock") {
wins++;
return "Paper beats rock, you win";
} else {
loses++;
return "Scissors beats paper, you lose";
}
} else if (choice1 == "scissors") {
if (choice2 == "rock") {
loses++;
return "Rock beats scissors, you lose";
} else {
wins++;
return "Paper beats rock, you win";
}
} else if (choice1 == "rope") {
wins++;
return "";
} else {
return "";
}
};
var winner = compare(userChoice,computerChoice);
document.getElementById("results").innerHTML=winner;
document.getElementById("wins").innerHTML=wins;
document.getElementById("loses").innerHTML=loses;
if (wins > 99 || loses > 99) {
document.getElementById("wins").style.fontSize="44";
document.getElementById("loses").style.fontSize="44";
}
if (wins == 3) {
alert("You win!");
loses = 0;
wins = 0;
}
if (loses == 3) {
alert("You lose");
loses = 0;
wins = 0;
}
};
var reset = function() {
loses = 0;
wins = 0;
document.getElementById("wins").innerHTML=wins;
document.getElementById("loses").innerHTML=loses;
};
var modal = document.getElementById('gameHelp');
var button = document.getElementById("userHelp");
var span = document.getElementsByClassName("close")[0];
button.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>