-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtestButton.html
87 lines (81 loc) · 3.03 KB
/
testButton.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
<!DOCTYPE html>
<html>
<head>
<style>
.toggle-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
cursor: pointer;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
border: 2px solid gray;
position: absolute;
}
</style>
</head>
<body>
<div id="type1" class="toggle-button" style="--pos-x: 10px; --pos-y: 10px;">1</div>
<div id="type1" class="toggle-button" style="--pos-x: 70px; --pos-y: 10px;">1</div>
<div id="type1" class="toggle-button" style="--pos-x: 130px; --pos-y: 10px;">1</div>
<div id="type1" class="toggle-button" style="--pos-x: 10px; --pos-y: 70px;">1</div>
<div id="type1" class="toggle-button" style="--pos-x: 70px; --pos-y: 70px;">1</div>
<div id="type1" class="toggle-button" style="--pos-x: 130px; --pos-y: 70px;">1</div>
<div id="type2" class="toggle-button" style="--pos-x: 10px; --pos-y: 130px;">2</div>
<div id="type2" class="toggle-button" style="--pos-x: 70px; --pos-y: 130px;">2</div>
<div id="type2" class="toggle-button" style="--pos-x: 130px; --pos-y: 130px;">2</div>
<div id="type2" class="toggle-button" style="--pos-x: 10px; --pos-y: 190px;">2</div>
<div id="type3" class="toggle-button" style="--pos-x: 70px; --pos-y: 190px;">3</div>
<script>
var toggleButtons = document.querySelectorAll('.toggle-button');
var colors = ['black', 'green', 'blue', 'red'];
var currentColorIndices = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // Menyimpan indeks warna untuk setiap tombol
var score = {
blue: 0,
red: 0
};
function calculateScore() {
score.blue = 0;
score.red = 0;
toggleButtons.forEach(function(button, index) {
var buttonColor = colors[currentColorIndices[index]];
var buttonId = button.id;
if (buttonColor === 'blue') {
if (buttonId === 'type1') {
score.blue += 10;
} else if (buttonId === 'type2') {
score.blue += 30;
} else if (buttonId === 'type3') {
score.blue += 70;
}
} else if (buttonColor === 'red') {
if (buttonId === 'type1') {
score.red += 10;
} else if (buttonId === 'type2') {
score.red += 30;
} else if (buttonId === 'type3') {
score.red += 70;
}
}
});
}
toggleButtons.forEach(function(button, index) {
button.addEventListener('click', function() {
currentColorIndices[index] = (currentColorIndices[index] + 1) % colors.length;
var currentColor = colors[currentColorIndices[index]];
button.style.backgroundColor = currentColor;
calculateScore();
console.log(score); // Menampilkan skor pada konsol
});
// Set posisi button menggunakan variabel CSS
button.style.setProperty('--pos-x', button.dataset.posX);
button.style.setProperty('--pos-y', button.dataset.posY);
});
</script>
</body>
</html>