-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
143 lines (124 loc) · 4.22 KB
/
script.js
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
const tiles = document.querySelectorAll(".tiles");
const blok = document.querySelectorAll(".blok");
const button = document.querySelectorAll(".button");
const instruction = document.querySelector(".instruction");
const content = document.querySelector(".content-game");
const play = document.querySelector("#start");
const pop = document.querySelector("#pop");
const backsound = document.querySelector("#backsound");
let time = document.querySelector(".time");
let countDown = document.querySelector(".countdown");
let score = 0;
function fadeBlok(timeLimit) {
// Ambil semua blok yang ada kemudian looping
blok.forEach((element) => {
let timeCountDown = setInterval(() => {
// Jarak waktu selesai
let now = new Date().getTime();
let distance = timeLimit - now;
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
time.textContent = minutes + "m : " + seconds + "s";
if (distance < 0) {
clearInterval(timeCountDown);
clearInterval(move);
document.querySelector(".countdown").style.display = "block";
backsound.pause();
backsound.currentTime = 0;
time.textContent = "Timeout";
countDown.innerHTML = "Selesai";
}
}, 1000);
// Acak posisi waktu blok tampil
let pos = Math.floor(Math.random() * 200) + 1;
element.style.top = pos + "px";
let move = setInterval(frame, 1); // 1 untuk kecepatan blok paling cepat
function frame() {
if (pos > 800) {
element.style.opacity = "1";
pos = Math.floor(Math.random() * 100) - 100;
element.style.top = pos + "px";
} else {
pos++;
element.style.top = pos + "px";
}
}
// Kasih event saat tombol diklik
let but = element.nextElementSibling.nextElementSibling;
but.addEventListener("click", function () {
let bl = this.previousElementSibling.previousElementSibling;
let top = bl.getAttribute("style");
if (top > "top: 720px;" && top < "top: 750px;") {
score++;
document.querySelector(".score").textContent = score;
} else {
bl.style.opacity = "0.7";
}
});
});
}
function start() {
backsound.play(); // Nyalakan backsound
content.style.display = "block"; // Tampilkan kotak content piano
instruction.style.display = "none"; // sembunyikan instruksi game
play.style.display = "none"; // Sembunyikan tombol play
// Countdown 3 detik
let count = 4;
countDownTime = setInterval(() => {
count -= 1;
countDown.innerHTML = count != 0 ? count : "Mulai";
if (count < 0) {
document.querySelector(".countdown").style.display = "none";
clearInterval(countDownTime);
}
}, 1000);
setTimeout(() => {
// Timer
let year = new Date().getFullYear();
const monthName = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
let month = monthName[new Date().getMonth()];
let date = new Date().getDate();
let hour = new Date().getHours();
let minute = new Date().getMinutes() + 3; // ganti angka 3 untuk menambah waktu berapa menit
let timeLimit = new Date(
month + " " + date + ", " + year + " " + hour + ":" + minute
).getTime();
// Blok fade in
fadeBlok(timeLimit);
// Method tombol keyboard
pressKeyboard();
}, 4000);
}
function pressKeyboard() {
document.onkeydown = function (e) {
let key;
switch (e.keyCode) {
case 68: //ini kode untuk tombol D
key = document.querySelector("#d");
break;
case 70: //ini kode untuk tombol F
key = document.querySelector("#f");
break;
case 74:
key = document.querySelector("#j");
break;
case 75:
key = document.querySelector("#k");
break;
}
if (key) {
let bl = key.previousElementSibling.previousElementSibling;
key.style.opacity = "1";
setTimeout(() => {
key.style.opacity = "0.7";
}, 150);
let top = bl.getAttribute("style");
if (top > "top: 720px;" && top < "top: 750px;") {
score++;
document.querySelector(".score").textContent = score;
} else {
bl.style.opacity = "0.7";
}
}
};
}