-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
67 lines (58 loc) · 2.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Rock Paper Scissors</title>
<link rel="shortcut icon" href="scissor.png">
</head>
<body>
<header>
<h1>Rock paper Scissors</h1>
</header>
<br><br>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span> : <span id="computer-score">0</span>
</div><br>
<div class="result">
<p>Hi! Let's compete with computer.</p><br>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="rock1.png" alt="" height="80" width="80">
</div>
<div class="choice" id="p">
<img src="paper1.png" alt="" height="80" width="80">
</div>
<div class="choice" id="s">
<img src="scissor1.png" alt="" height="80" width="80">
</div>
</div><br>
<p id="action-message">Make Your Choice.</p><br><br><br><br><br><br><br>
<p class="scroll">⏬</p>
<br><br><br><br><br>
<div class="rules">
<h1>How To Play</h1>
<p>The rules are very simple and probably you remember them from your childhood :</p>
<li>If you choose Rock, you will win against Scissors but lose against Paper.</li>
<li>If you choose Scissors, you will win against Paper but lose against Rock.</li>
<li>If you choose Paper, you will win against Rock but lose against Scissors.</li><br>
</div><br>
<div class="hint">
<h1>Fun Facts of RPS game (Souurce Wiki)😜</h1>
<li>Did you know that this game first appeared in China in the 17th century? Yes, it was not
invented in Europe or America but in Asia. Europe started to play this game only in 19th century.</li>
<li>Statistics say that people usually choose Scissors in the first round and Rock in the second.</li><br>
</div><br>
<div class="hint">
<h1>Good advice</h1>
<p>If you want to win, you need to be a good psychologist to predict the next choice of your opponent.
Although predicting computer's move is harder as it is more random. There
are many strategies and different people have different patterns of behavior.</p><br>
</div>
<br><br><br><br>
<script src="app.js" charset="utf-8"></script>
</body>
</html>