-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (78 loc) · 2.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spock Rock Game</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="rules">
<pre>
Scissors cuts paper,
Paper covers rock,
Rock crushes lizard,
Lizard poisons Spock,
Spock smashes scissors,
Scissors decapitates lizard,
Lizard eats paper, paper disproves Spock,
Spock vaporizes rock,
And as it always has,
Rock crushes scissors.
</pre>
</div>
<div class="game-container">
<div class="header">
<h1>Rock Paper Scissors Lizard Spock</h1>
</div>
<!-- player container -->
<div class="player-container" id="player">
<h2>You - <span id="playerScore"></span><span class="choice" id="playerChoice"></span></h2>
<div class="hand-container">
<i class="far fa-hand-rock" title="Rock" id="playerRock" onclick="select('rock')"></i>
<i class="far fa-hand-paper" title="Paper" id="playerPaper" onclick="select('paper')"></i>
<i
class="far fa-hand-scissors"
title="Scissors"
id="playerScissors"
onclick="select('scissors')"
></i>
<i
class="far fa-hand-lizard"
title="Lizard"
id="playerLizard"
onclick="select('lizard')"
></i>
<i class="far fa-hand-spock" title="Spock" id="playerSpock" onclick="select('spock')"></i>
</div>
</div>
<!-- computer container -->
<div class="player-container" id="computer">
<h2>
Computer - <span id="computerScore"></span
><span class="choice" id="computerChoice"></span>
</h2>
<div class="hand-container">
<i class="far fa-hand-rock" title="Rock" id="computerRock"></i>
<i class="far fa-hand-paper" title="Paper" id="computerPaper"></i>
<i class="far fa-hand-scissors" title="Scissors" id="computerScissors"></i>
<i class="far fa-hand-lizard" title="Lizard" id="computerLizard"></i>
<i class="far fa-hand-spock" title="Spock" id="computerSpock"></i>
</div>
</div>
<!-- Reset Icon -->
<i class="fas fa-sync-alt reset-icon" title="Reset" onclick="resetAll()"></i>
<!-- Results text -->
<div class="result-container">
<h3 class="result-text" id="resultText"></h3>
</div>
</div>
<!-- Script -->
<script src="script.js" type="module"></script>
</body>
</html>