-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·94 lines (94 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="#">
</head>
<body>
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<main>
<p id="mainTextId" class="text invisible">Select a difficulty</p>
<section>
<button id="buttonPlay" class="actionButton visible" onclick="playButton()">PLAY</button>
<div id="buttonDifficulty" class="actionButton invisible" >
<button class="easyButton" onclick="selectDifficult(0)">EASY</button>
<button class="normalButton" onclick="selectDifficult(1)">NORMAL</button>
<button class="hardButton" onclick="selectDifficult(2)">HARD</button>
<button class="insaneButton" onclick="selectDifficult(3)">INSANE</button>
</div>
<div id="buttonActions" class="actionButton invisible" >
<button id="buttonAction" onclick="game(computerchoice,'Rock',difficulty[0])">👊</button>
<button id="buttonAction" onclick="game(computerchoice,'Paper',difficulty[0])">🖐</button>
<button id="buttonAction" onclick="game(computerchoice,'Scissors',difficulty[0])">✌</button>
</div>
<button id="buttonReplay" class="actionButton invisible"><a href="./index.html">REPLAY</a></button>
</section>
<div id="playersId" class="invisible">
<p>👤 - You</p>
<p>Computer - 🤖</p>
</div>
<div class="textLog">
<section id="footerCriticalInfo" class="invisible">
<p><span class="textRed">⚡️ CRITICAL MOVE ⚡️</span> = Only computer has a chance to use 2 moves instead of 1 and choose the best one, you cannot win against a critical move, only tie or lose. Good Luck!</p>
<ul>
<li><p>EASY</p>
<p>The computer has a 0% critical chance</p></li>
<li><p>NORMAL</p>
<p>The computer has a 15% critical chance</p></li>
<li><p>HARD</p>
<p>The computer has a 30% critical chance</p></li>
<li><p>INSANE</p>
<p>The computer has a 75% critical chance</p></li>
</ul>
</section>
<section>
<div id="textActions" class="invisible">
<p id="round1"></p>
<p id="round2"></p>
<p id="round3"></p>
<p id="round4"></p>
<p id="round5"></p>
<p id="finalResults"></p>
</div>
<p id="textResults" class="text invisible"></p>
</section>
</div>
</main>
<footer>
<div>
<a href="https://github.com/Hallimasa/rock-paper-scissors-odinProject">
<img src="./attach/img/github-mark.svg" style="width: 40px;" alt="Hallimasa">
<img src="./attach/img/github-mark-white.svg" id="gitImgHidden" style="width: 40px; position: absolute;" alt="Hallimasa">
<p>Hallimasa</p>
</a>
</div>
<audio id="audioClick">
<source src="./attach/sounds/click.mp3" type="audio/mpeg">
</audio>
<audio id="audioWonMatch">
<source src="./attach/sounds/won_match.mp3" type="audio/mpeg">
</audio>
<audio id="audioWonGame">
<source src="./attach/sounds/won_game.mp3" type="audio/mpeg">
</audio>
<audio id="audioLostMatch">
<source src="./attach/sounds/lost_match.mp3" type="audio/mpeg">
</audio>
<audio id="audioLostGame">
<source src="./attach/sounds/lost_game.mp3" type="audio/mpeg">
</audio>
<audio id="audioTieMatch">
<source src="./attach/sounds/tie_match.mp3" type="audio/mpeg">
</audio>
<audio id="audioTieGame">
<source src="./attach/sounds/tie_game.mp3" type="audio/mpeg">
</audio>
</footer>
<script src="./script.js"></script>
</body>
</html>