-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (143 loc) · 6.74 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
<html>
<head>
<title>HRA NA MOBIL</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<img src="https://toppng.com/public/uploads/thumbnail/papyrus-paper-115500931971w0dascvpp.png" id="tp7">
<img src="https://freepngimg.com/thumb/decorative_border/153824-golden-frame-photos-download-hd.png" id="bp7">
<img src="https://freepngimg.com/thumb/decorative_border/153824-golden-frame-photos-download-hd.png" id="bp6">
<img src="https://i.pinimg.com/originals/c3/8a/a6/c38aa60c01461d12917c06a0d7d5c4e6.png" id="sp1">
<img src="https://pngimage.net/wp-content/uploads/2018/06/schilderijlijst-png-4.png" id="bp1">
<img src="https://pngimage.net/wp-content/uploads/2018/06/schilderijlijst-png-4.png" id="bp2">
<img src="https://pngimage.net/wp-content/uploads/2018/06/schilderijlijst-png-4.png" id="bp3">
<img src="https://pngimage.net/wp-content/uploads/2018/06/schilderijlijst-png-4.png" id="bp4">
<img src="https://static.vecteezy.com/system/resources/thumbnails/008/477/257/small/rectangular-gold-frame-free-png.png" id="bp5">
<img src="https://media.istockphoto.com/id/1306955172/vector/stone-tablet-panel-textured-cartoon-frame-with-cracked-elements-isolated-on-white-background.jpg?s=612x612&w=0&k=20&c=jSfR5sQa2PGMvPmx1wC4oklD9AN3_OyK0RPHeZc0kOY=" id="pozadi1">
<button id="red" onclick="randombarvaRED();"></button>
<button id="blue" onclick="randombarvaBLUE();"></button>
<button id="yellow"onclick="randombarvaYELLOW();"></button>
<button id="green" onclick="randombarvaGREEN();"></button>
<button id="guess"></button>
<button id="start" onclick="startTimer();randombarva();">Start</button>
<button id="reset" onclick="restart();">Restart</button>
<p id="casovac"> Čas: 30s</p>
<p id="skore"> Skore: 0</p>
<p id="tutorial">Klikni na tlačítko "Start". <br> Po kliknutí se zobrazí <br> náhodná barva v černém poli.<br> <br>Tvým úkolem je co nejrychleji<br>barvu zaznačit. Po zaznačení se<br> vylosuje další barva.<br> <br>Nasbírej tak co nejvíce skore za <br>30 sekund. <br><br> Tlačítko restart vynuluje skore <br>a zresetuje čas na 30 sek.</p>
<script>
var cas = 30;
var intervalId;
var score = 0;
var cink = new Audio ("https://cdn.pixabay.com/download/audio/2022/01/18/audio_8db1f1b5a5.mp3?filename=snd_fragment_retrievewav-14728.mp3");
var starting = new Audio ("https://cdn.pixabay.com/download/audio/2022/03/10/audio_bbde917866.mp3?filename=wine-glass-clink-36036.mp3");
function startTimer() {
// Check if the interval is already running
if (!intervalId && cas == 30) {
intervalId = setInterval(() => {
cas--;
document.getElementById("casovac").innerHTML = "Čas: " + cas + "s";
if (cas === 0) {
clearInterval(intervalId);
intervalId = null;
}
}, 1000);
}
}
function randombarva(){
if (cas == 30){
const guess = document.getElementById("guess");
const colors = ["blue", "red", "yellow", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
guess.style.backgroundColor = randomColor;
starting.play();
}
}
function randombarvaRED() {
// Make sure that the guess and skore variables are defined and have the correct values
const colors = ["blue", "red", "yellow", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const guess = document.getElementById("guess");
const skore = document.getElementById("skore");
// Get the computed style of the guess button
const style = window.getComputedStyle(guess);
// Get the value of the background-color property
const backgroundColor = style.getPropertyValue("background-color");
// Compare the background color to the RGB value of red
if (backgroundColor === "rgb(255, 0, 0)" && cas > 0 && cas < 30 ) {
score++;
skore.innerHTML = `Skore: ${score}`;
guess.style.backgroundColor = randomColor;
cink.play();
cink.currentTime = 0;
}
}
function randombarvaBLUE() {
// Make sure that the guess and skore variables are defined and have the correct values
const colors = ["blue", "red", "yellow", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const guess = document.getElementById("guess");
const skore = document.getElementById("skore");
// Get the computed style of the guess button
const style = window.getComputedStyle(guess);
// Get the value of the background-color property
const backgroundColor = style.getPropertyValue("background-color");
// Compare the background color to the RGB value of red
if (backgroundColor === "rgb(0, 0, 255)" && cas > 0 && cas > 0 ) {
score++;
skore.innerHTML = `Skore: ${score}`;
guess.style.backgroundColor = randomColor;
cink.play();
cink.currentTime = 0;
}
}
function randombarvaYELLOW() {
// Make sure that the guess and skore variables are defined and have the correct values
const colors = ["blue", "red", "yellow", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const guess = document.getElementById("guess");
const skore = document.getElementById("skore");
// Get the computed style of the guess button
const style = window.getComputedStyle(guess);
// Get the value of the background-color property
const backgroundColor = style.getPropertyValue("background-color");
// Compare the background color to the RGB value of red
if (backgroundColor === "rgb(255, 255, 0)" && cas > 0 && cas > 0 ) {
score++;
skore.innerHTML = `Skore: ${score}`;
guess.style.backgroundColor = randomColor;
cink.play();
cink.currentTime = 0;
}
}
function randombarvaGREEN() {
// Make sure that the guess and skore variables are defined and have the correct values
const colors = ["blue", "red", "yellow", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const guess = document.getElementById("guess");
const skore = document.getElementById("skore");
// Get the computed style of the guess button
const style = window.getComputedStyle(guess);
// Get the value of the background-color property
const backgroundColor = style.getPropertyValue("background-color");
// Compare the background color to the RGB value of red
if (backgroundColor === "rgb(0, 128, 0)" && cas > 0 && cas > 0 ) {
score++;
skore.innerHTML = `Skore: ${score}`;
guess.style.backgroundColor = randomColor;
cink.play();
cink.currentTime = 0;
}
}
function restart(){
if (cas == 0){
cas =+ 30;
score = 0;
skore.innerHTML = `Skore: ${score}`;
document.getElementById("casovac").innerHTML = "Čas: " + cas + "s";
}
}
</script>
</body>
</html>